FE framework directives

Item renderer directives

`cs-snippet-renderer`

The csItemRenderer templates for assets contain the csSnippetRenderer directive:

< div class = "csAssetListItemRendererWidget2xn" >
     < ul class = "csAssetListItem" >
         < li class = "csAssetListItem__preview" >
             < cs-snippet-renderer data = 'item.value'
                                  snippets = 'item.value.aspects.slotAssignment.slots.thumbnail' >, </ cs-snippet-renderer >
         </ li >
         < li class = "csAssetListItem__title" >
             < cs-snippet-renderer data = 'item.value'
                                  title = "{{ item.value.traits.display.name }}"
                                  snippets = 'item.value.aspects.slotAssignment.slots.title' >, </ cs-snippet-renderer >
         </ li >
         ...
     </ ul >
</ div >

This directive takes care to load the required implementation for the snippets and add the HTML code to them.

Collapsible wrapper directive for search filters

`cs-filter-collapsible`

Description: Renders a row with filter items that can be expanded and collapsed.
Syntax: cs-filter-collapsible
Parameters:
- item filters an object with type filter.
- toggle is called on filter click and stores the current state.
Example:

< cs-filter-collapsible item = "item" toggle = "toggle" ></ cs-filter-collapsible >

Screenshot:

csSplitter directive

cs-splitter

Description: Renders a resizable panel in a two column layout.
Syntax: cs-splitter
Parameters:
- cs-splitter-init-size sets the initial width of first column.
- cs-splitter-min-size sets the minimum width of first colum.
- cs-splitter-percentage-max-size sets the maximum width of column in percentage.
Example:

< div class = "csTwoColumnsComponentWrapper" >
     < div class = "csTwoColumnsWrapper" cs-splitter>
         < div class = "csWidgetWrapper csFirstWidgetWrapper"
             cs-splitter-init-size = "210"
             cs-splitter-min-size = "210"
             cs-splitter-percentage-max-size = "50"
             ng-hide = "widgets==0" >
             < div ></ div >
         </ div >
         < div class = "csTwoColumnsSplitter" ng-hide = "widgets==1" >
             < div class = "csTwoColumnsSplitter_draghandle" >
                 < div class = "circle" ></ div >
             </ div >
         </ div >
         < div class = "csWidgetWrapper csSecondWidgetWrapper"
              ng-hide = "widgets==1" >
             < div ></ div >
         </ div >
     </ div >
</ div >

load-options-by-domain & load-options-by-domain2

Description: It loads options to the cs-select component located in cs-metadata-row when the user changes the domainproperty
Syntax: load-options-by-domain and/or load-options-by-domain2
Parameters
- domain It sets the object to watch for changes
Example:

< cs-metadata-row
     property = "asset.traits.content.language"
     load-options-by-domain = "asset.traits.domain.domain.value[0].value"
     load-options-by-domain2 = "asset.traits.domain.domain2.value[0].value" >
</ cs-metadata-row >

Asset reference directive

cs-asset-reference

The directive cs-asset-reference can be used to edit an asset reference or an asset reference key in the metadata widget. The control displays the asset as in asset lists. To select a new value, the Asset Chooser is used.

Example

<cs-asset-reference
    base-asset-id="$ctrl.config.baseAssetId"
    feature-id="$ctrl.config.property.feature_key"
    direction="{{$ctrl.config.direction}}"
    ng-model="$ctrl.valueItem[$ctrl.valueKey]"
    filter-name="{{$ctrl.config.property.name}}"
    trait-name="{{$ctrl.config.property.traitName}}">
</cs-asset-reference>

Properties

Attribute	Description	Default
`ng-model`	Two-way bind-able property to set or get the current `selectedAssetId`. (required)	-
`base-asset-id`	The data property that contains the asset ID to set into the `csAssetChooser`	-
`feature-id`	The data property that contains the feature ID to create filter query	-
`filter-name`	Set to context name	-
`trait-name`	Set to context traitName	-
`direction`	The data property that contains the direction to create filter query	-

Notes

base-asset-id, feature-id and direction are optional. Add these attributes to filter assets list.

Usage

The component is shown by csMetadataRow in edit-mode for value-types asset-reference or asset-refence-key. To be shown, it requires that uiControl equals asset-reference for the selected feature.

To set attributes to this component, the attributes must be set in cs-metadata-row which forwards them to cs-asset-reference. The attributes are:

property
assetId
direction

Example:

< cs-metadata-row
     asset-id = "asset.traits.ids.id"
     direction = "feature"
     property = "asset.traits.cstestCsmetadatarow.assetReference" >
</ cs-metadata-row >

Note that assetId is mapped to base-asset-id.

Page tree