Extensions of the For-Each widget

The For-Each-Widget can change the order of the rows and add new entries on a blank line at the bottom of the list.

Introduction

A user wants to create a new recipe text. First, you open the metadata of a recipe asset to add the ingredients for the recipe. In a search form (Auto-completion-field-widget) the user searches for existing ingredients. Now the user can drag the search result into the ingredients part of the metadata section. There is already an empty entry at the bottom. Once the user has added all ingredients, they can still be brought into a suitable order. This can be done either by clicking on the arrow symbols for each ingredient or simply by rearranging the elements with the mouse per drag and drop.

Adding new entries

New records (rows) can now be added not only via the plus button but also by a blank line at the end of the list. By specifying the attribute show-empty-row="true" instead of a plus button a blank line is displayed. In that blank line, all input fields are displayed without any content. Once a value is entered in a field and the user switches the focus to the next box, a new row is added and also another blank line below. Normally the dialogue definition must also specify one or more init-items in order to initialize the blank line correctly.

Syntax:

CODE

<xe:foreach source=""
	show-empty-row="true">
<xe:inititems>
          
  ...
  
  </xe:inititems>
          
  ...

</xe:foreach>

Changing the element order

The order of the lines can be selectively changed by drag and drop or by clicking on the arrow buttons to customize the order. Changing the sequence is only possible if the list is sorted, i.e. specifying one or more "xe:sort" elements is required. To be able to grab a line with the mouse in general, first, a drag handle widget (xe: drag-handle) has to be specified in the definition dialog. To move by button the widgets "xe:move-prev" and "xe:move-next ' are used. This allows the relevant line to be moved one row up or down.

Syntax:

CODE

< xe:foreach source = " " > < xe:sort key = " " data-type = " " ascending = " " /> < xe:drag-handle/> < xe:move-prev/> < xe:move-next/> ... </ xe:foreach>

Sample Configuration: Changing the order

CODE

<xe:foreach source="child_asset_rel" align="down">
       <xe:row-filters>
        <xe:filter source="@key" operator="="match="user."/>
          </xe:row-filters>
       <xe:sort key="@sorting" data-type="integer" ascending="true"/>
       <xe:group align="down">
       <xe:group align="right">
       <xe:drag-handle align-y="top" tooltip="${change-order}"/>
          <xe:assetref width="46em"
             height="40"
             source="@child_asset"
             css-key="asset-info"
             expression-id="asset-ref-list"/>
       <xe:move-prev align-y="top" tooltip="${move-forward}"/>
       <xe:move-next align-y="top" tooltip="${move-backward}"/>
      </xe:group>    
    <xe:separator/>
   </xe:group>
</xe:foreach>

The dialogue displays the children of an asset (only assignments) in a list. The list is sorted in ascending order by the database column "sorting". The order of the lines can either be changed by drag and drop (xe:drag-handle) or using the arrow buttons (xe:move-next. xe:move-prev).

Sample Configuration: New entries via drag & drop

CODE

<xe:foreach source="child_asset_rel" align="down" show-empty-row="true">
        <xe:row-filters>
       <xe:filter source="@key" operator="=" match="user."/>
       </xe:row-filters>
      <xe:group align="down">
      <xe:group align="right">
        <xe:assetref width="46em"
            height="40"
            source="@child_asset" 
			css-key="asset-info" 
			expression-id="asset-ref-list"/>
          </xe:group>
         <xe:separator/>
         </xe:group>
</xe:foreach>

The dialogue displays the children of an asset (only assignments) in a list. By specifying the attribute show-empty-row = "true" a blank line is appended at the end of the list. Via drag and drop, an asset (for example from an asset query) can be placed on that blank row. This creates a new link.

Sample configuration: Adding new entries via text input

CODE

< xe:foreach source = "asset_feature" show-empty-row = "true" > < xe:identify-children-by key = "@value_string" /> < xe:row-filters> < xe:filter source = "@feature" match = "mf:string" /> </ xe:row-filters> < xe:inititems> < xe:inititem dest = "@feature" value = "mf:string" /> < xe:inititem dest = "@sorting" value = " =:if ($content/asset/asset_feature[@feature= 'mf:string']/@sorting) then max(for $e in ($content/asset/asset_feature[@feature= 'mf:string']/@sorting) return round($e)) + 1 else 1" /> </ xe:inititems> < xe:editfield source = "@value_string" width = "10em" /> < xe:deletebutton/> </ xe:foreach>

This dialogue displays a list of asset features. This feature is of type "string". Therefore, each row contains a text field for entering the attribute value. By specifying the attribute show-empty-row="true" a blank line is appended at the end of the list. Entering a value in the text field of the blank line, a new feature value is added to the asset. The Init-Item is calculated using a formula (XPath) ensuring that when creating new rows the sort field is initialized correctly to the next higher value.