WebApps 2

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

<!-- 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"
/>

<!-- 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>

Options

Options are passed to node selectors as data-attributes.

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

<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

<!-- 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

page selector

<!-- 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

template selector [@since 10.1]

<!-- 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 data-attributes.

Custom selector options
Attribute	Description
data-removable	Makes it possible to clear a selected value
data-searchable	Makes the options searchable

<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.

<!-- 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" />

Sorting [@since 9.1]

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

<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

<!-- 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

<!-- 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

<!-- 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]

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

Available types

page
group
template