Sitevision Components

Sitevision offers "native" components to select values from the Sitevision model. Values are retrieved using the appData-object in a server side script context.

In order to utilize Sitevision components, simply add data-component="<type>" to an input/select element in the configuration template. The following types are supported.

Components

html

<!-- page-selector -->
<input class="form-control" data-component="page-selector" name="page" />

<!-- file-selector -->
<input class="form-control" data-component="file-selector" name="file" />

<!-- image-selector -->
<input class="form-control" data-component="image-selector" name="image" />

<!-- user-selector -->
<input class="form-control" data-component="user-selector" name="user" />

<!-- content-node-selector -->
<input
   class="form-control"
   data-component="content-node-selector"
   name="content"
/>

<!-- tags-selector -->
<input class="form-control" data-component="tags-selector" name="tags" />

<!-- link-selector [@since 9.1] -->
<input class="form-control" data-component="link-selector" name="link" />

<!-- number spinner -->
<input
   class="form-control"
   data-component="number-spinner"
   data-min="0"
   data-max="10"
   data-step="2"
   name="count"
/> <!-- data-decimals="0" [@since 2025.04.1] max value is 6 -->

<!-- metadata-selector -->
<select data-component="metadata-selector" name="metadata"></select>

<!-- template-selector -->
<select data-component="template-selector" name="template"></select>

<!-- oauth2-configuration-selector -->
<select
   data-component="oauth2-configuration-selector"
   name="oauth2-configuration"
></select>

<!-- virtual-group-selector -->
<select data-component="virtual-group-selector" name="virtual-group"></select>

<!-- search-index-selector -->
<select data-component="search-index-selector" name="search-index"></select>

<!-- font-selector -->
<select data-component="font-selector" name="font"></select>

<!-- color-selector -->
<select data-component="color-selector" name="color"></select>

<!-- custom-selector [@since 9.1] -->
<select data-component="custom-selector" name="custom"></select>

<!-- llm-configuration-selector [@since 2024.08.1] -->
<select data-component="llm-configuration-selector" name="llm"></select>

<!-- target-audience-selector [@since 2024.09.2] -->
<select data-component="target-audience-selector" name="target-audience"></select>

Options

Options are passed to node selectors as data-attributes.

Component attributes
Attribute	Description
data-removable	Makes it possible to clear a selected value

html

<input
   class="form-control"
   data-removable
   data-component="page-selector"
   name="page"
/>
<select
   data-removable
   data-component="template-selector"
   name="template"
></select>

Types

Apply data-types to filter what types should be selectable. The following components accept data-types.

metadata selector

html

<!-- Apply comma separated if multiple -->
<select
   data-types="sv:metadataUserDefinition,sv:metadataMultipleDefinition"
   data-component="metadata-selector"
   name="meta"
></select>

Available types

sv:metadataDateDefinition
sv:metadataUserDefinition
sv:metadataDirectoryDefinition
sv:metadataTextDefinition
sv:metadataSingleDefinition
sv:metadataMultipleDefinition
sv:metadataSystemLinkDefinition
sv:metadataSystemIntegerDefinition
sv:metadataSystemTextDefinition
sv:metadataSystemDefinition
sv:metadataLinkDefinition
sv:metadataTextPortletDefinition
sv:metadataImagePortletDefinition
sv:metadataKeywordDefinition
sv:metadataRelatedInformationDefinition
sv:metadataMediaPortletDefinition
sv:metadataSingleTagDefinition
sv:metadataMultipleTagDefinition
sv:metadataSingleTargetAudienceDefinition [@since 2024.09.2]
sv:metadataMultipleTargetAudienceDefinition [@since 2024.09.2]
sv:metadataGeolocationDefinition [@since 2024.10.1]
sv:metadataModuleDefinition [@since 2025.01.1]

page selector

html

<!-- Apply comma separated if multiple -->
<input
   class="form-control"
   data-types="sv:page,sv:sitePage"
   data-component="page-selector"
   name="page"
/>

Available types

sv:sitePage
sv:page
sv:article
sv:archive
sv:folder
sv:link
sv:structurePage
sv:structureFolder
sv:structureLink
sv:collaborationGroupPage
sv:collaborationGroupFolder

image selector

html

<!-- Apply comma separated if multiple -->
<input 
       class="form-control"
       data-types="sv:image"
       data-component="image-selector" 
       name="image" />

Available types

sv:image
sv:folder

template selector [@since 10.1]

html

<!-- Only single value allowed -->
<select
   data-types="page"
   data-component="template-selector"
   name="template"
></select>

Available types

page
group
template

Custom selector [@since 9.1]

Select replacement for custom options.

Options

Options are passed to custom selector as attributes.

Custom selector options
Attribute	Description
data-removable	Makes it possible to clear a selected value
data-searchable	Makes the options searchable
data-placeholder [@since 2026.01.1]	Custom placeholder text
multiple [@since 2026.01.1]	Allow selecting multiple values

html

<select name="custom" data-component="custom-selector" data-searchable>
   <option value="1">Banana</option>
   <option value="2">Apple</option>
   <option value="3">Orange</option>
</select>

List components

In order to utilize Sitevision list components, simply add data-component="<type>-list" to a hidden input element.

List component values are retrieved in a server side script context using the appData.getArray-method.

The following types are supported.

html

<!-- page-list -->
<input type="hidden" data-component="page-list" name="pages" />

<!-- file-list -->
<input type="hidden" data-component="file-list" name="files" />

<!-- image-list -->
<input type="hidden" data-component="image-list" name="images" />

<!-- user-list -->
<input type="hidden" data-component="user-list" name="users" />

<!-- userfield-list [@since 9.0.1] -->
<input type="hidden" data-component="userfield-list" name="userfields" />

<!-- template-list [@since 10.1] -->
<input type="hidden" data-component="template-list" name="templates" />

<!-- target-audience-list [@since 2024.09.2] -->
<input type="hidden" data-component="target-audience-list" name="target-audiences" />

<!-- geolocation-list [@since 2024.10.1] -->
<input type="hidden" data-component="geolocation-list" name="geolocations" />

Sorting [@since 9.1]

Apply data-sortable to allow custom sorting of a list component.

html

<input type="hidden" data-component="page-list" name="pages" data-sortable />

Types

Apply data-types to filter what types should be selectable. The following components accept data-types.

page-list selector

html

<!-- Apply comma separated if multiple -->
<input
   type="hidden"
   data-types="sv:page,sv:sitePage"
   data-component="page-list"
   name="pages"
/>

Available types

sv:sitePage
sv:page
sv:article
sv:archive
sv:folder
sv:link
sv:structurePage
sv:structureFolder
sv:structureLink
sv:collaborationGroupPage
sv:collaborationGroupFolder

file-list selector

html

<!-- Apply comma separated if multiple -->
<input
   type="hidden"
   data-types="sv:file"
   data-component="file-list"
   name="files"
/>

Available types

sv:file
sv:folder

image-list selector

html

<!-- Apply comma separated if multiple -->
<input
   type="hidden"
   data-types="sv:image"
   data-component="image-list"
   name="images"
/>

Available types

sv:image
sv:folder

template-list selector [@since 10.1]

html

<!-- Only single value allowed -->
<input
   type="hidden"
   data-types="page"
   data-component="template-list"
   name="templates"
/>

Available types

page
group
template

Did you find the content on this page useful?

Sitevision Components

Components

Options

Types

metadata selector

Available types

page selector

Available types

image selector

Available types

template selector [@since 10.1]

Available types

Custom selector [@since 9.1]

Options

List components

Sorting [@since 9.1]

Types

page-list selector

Available types

file-list selector

Available types

image-list selector

Available types

template-list selector [@since 10.1]

Available types

Developer

Partner

Sitevision