Dynamic value lists allow extending simple asset features into value lists of which the items are dynamically managed by XSLT transformations. This article describes in detail how dynamic value lists work and how can one be configured.

Configuration

1. Create a value list module asset

Create a new asset with the following set up:

  • Asset type - module.value-list.*;
  • An assigned resource key;
  • An XSLT master file.

The XSLT master file acts as a search filter into dynamically gathering the desired information and displaying them as items in the value list.

Example: The XSLT below, queries on all assets of type picture.*. The items are displayed in the value list by their asset name.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:censhare="http://www.censhare.com/xml/3.0.0/xpath-functions">
  <!-- parameters -->
  <xsl:param name="value" select="()"/>
  <!-- root match -->
  <xsl:template match="/">
    <options>
      <!--<option value="censhare" display_value="Censhare AG"/>-->
        <xsl:choose>
          <xsl:when test="$value">
            <xsl:variable name="collectedImageAssets" select="(cs:asset()[@censhare:asset.type = 'picture.*' and @censhare:asset.id=$value])"/>
              <xsl:for-each select="$collectedImageAssets">
                <option>
                  <xsl:attribute name="value">
                    <xsl:value-of select="@id"/>
                  </xsl:attribute>
                  <xsl:attribute name="display_value">
                    <xsl:value-of select="concat('set value', @name)"/>
                  </xsl:attribute>
                </option>
              </xsl:for-each>
          </xsl:when>
          <xsl:otherwise>
            <xsl:variable name="collectedImageAssets" select="(cs:asset()[@censhare:asset.type = 'picture.*'])"/>
              <xsl:for-each select="$collectedImageAssets">
                <option>
                  <xsl:attribute name="value">
                    <xsl:value-of select="@id"/>
                  </xsl:attribute>
                  <xsl:attribute name="display_value">
                    <xsl:value-of select="@name"/>
                  </xsl:attribute>
                </option>
              </xsl:for-each>
          </xsl:otherwise>
        </xsl:choose>
    </options>
  </xsl:template>
</xsl:stylesheet>

Result: The XSLT query above, generates as result the following drop down list with image assets.

<?xml version="1.0" encoding="UTF-8"?>
<options xmlns:censhare="http://www.censhare.com/xml/3.0.0/xpath-functions">
  <option value="10073" display_value="Device Device Frame: Apple iPad Vertical"/>
  <option value="10074" display_value="Device Display Frame: Apple iPad Horizontal"/>
  <option value="10075" display_value="Device Display Frame: Apple iPhone Horizontal"/>
  <option value="10076" display_value="Device Display Frame: Apple iPhone Vertical"/>
  ..
</options>

When using the dynamic value lists, you must consider the amount of information that needs to be crawled by the XSLT. Complex search terms in combination with a not properly set up item structure can be the cause of performance issues.

2. Create an Asset Feature

In the Admin Client > Master Data, create a new feature with the following set up:

  • Type - "Asset Feature";
  • Value Type - set one of the supported value types:
    1. "Asset Key Reference";
    2. "Text (String)";
    3. "Asset reference";
    4. "Integer (Long)".
  • Value list resource key - the resource key assigned to the value list module asset (created on Step 1);
  • Additional configuration attributes (from version 2018.1):
    • Multiple values - enabling this option will make the dynamic value list work as a csMultiselect;
    • Relevance - enabling this option will add a relevance field next to the selected item;
    • Color - allows to define a "color" for the selected item. This attribute can be marked as "Optional", "Mandatory" or "None";
    • Language - allows to define a "language" for the selected item. This attribute can be marked as "Optional", "Mandatory" or "None".

3. Dialog definition

There are three different ways to include a dynamic value list into a dialog definition, depending on your running censhare version.

In all three cases, the "Trait key" of the asset feature needs to be added to the dialog configuration beforehand, for the feature to be displayed properly. This step can be done in the Options tab of the Template Editor when configuring a dialog.

Version 2018.1

  • Example using the cs-metadata-row directive:
<cs-metadata-row property="asset.traits.{trait-key}.{property-name}"></cs-metadata-row>

The cs-metadata-row directive provides a more simple way of adding a dynamic value list to a dialog definition. Depending on the asset feature configuration, the backend uses the cs-select and cs-multiselect directives to generate the correct type of value list.

Versions older than 2018.1

  • Example using the cs-select directive:

    • {resource-key} - the resource key assigned to the value list module asset (created on Step 1);
    • {feature-ID} - the ID of the asset feature in the master data (created on Step 2);
    • values & name - any name that can be used as reference for the items of the value list. The name should be the same for both "values" and "name".

      <cs-select ng-model="property.value" values="{name}" cs-options-generator="::{id:'resource-key/{resource-key}/{feature-ID}', name: '{name}'"></cs-select>
  • Example using the cs-multiselect directive:

    • {resource-key} - the resource key assigned to the value list module asset (created on Step 1);
    • {feature-ID} - the ID of the asset feature in the master data (created on Step 2);
    • options & name - any name that can be used as reference for the items of the value list. The name should be the same for both "values" and "name".

      <cs-metadata-row property="asset.traits.{trait-key}.{property-name}"
        <cs-multiselect trait-property="property" options="{name}" cs-options-generator="::{id:'resource-key/{resource-key}/{feature-ID}', name: '{name}'">
        </cs-multiselect>
      </cs-metadata-row>