Skip to main content
Skip table of contents

Metadata directives - overview


Configuration for displaying and editing metadata in censhare 5 Web. How to create, display and edit metadata features using the metadata widget in censhare 5. Information about the available censhare directives to create controls in the censhare 5 user interface.

Feature definitions in censhare Admin Client

The requirement for working with metadata in censhare 5 are correctly set up features in master data section of the censhare Admin Client. For a full reference of how to set up features, see article Creating a new feature.

censhare 5 Metadata Widget

The Metadata widget provides access to definable metadata, to display and optionally edit features of an asset, based on the asset page.

It consists of two components, the display and dialog configuration template. Both are stored as module assets.

Widget configuration

To set up the widget with existing or newly created metadata templates, there are several configuration settings required in the widget configuration dialog.

  • Widget title: Manual widget title, displayed in the widget header

  • Widget traits

    • Available traits: Displays the defined and default available feature traits in an expandable list

    • Additional traits: Custom traits can be added by adding the specific trait name and clicking the

      button

  • Widget and dialog definitions

    • Template: Dropdown menu displays all available asset metadata templates (showing assets with resource usage „Meta data view definition“). With the

      button, a new template can be defined.

      • A. Adding a new template

        • Key: Defines the unique resource key of the metadata templates

          • Conventions: The prefix customer:metadata. should be used to identify resources as specific metadata dialogs. Example: censhare:metadata.general

          • Rule: If the metadata template is editable, the dialog asset is automatically added with an assignment relation to the display asset and an added .dialog suffix.

          • Example: censhare:metadata.general.dialog

        • Name: Asset name of the template

        • Description: Asset description of the template

        • Editable: If checked, the defined metadata can be edited by users (a dialog template is created)

      • B. Choosing an existing template

        • Template: Dropdown menu displays all available metadata templates (assets of type module.dialog.) that can be assigned for this widget instance. As right now there is no separate asset subtype for dialog assets, you have to choose the correct display template from the menu.

        • Edit content: Opens the Template Editor in which the HTML snippet for the widget content (what is displayed in the widget) can be defined

        • Edit dialog: If the Editable option is checked, this option opens the Template Editor in which the HTML snippet for the widget editing dialog (what is displayed in the edit dialog) can be defined

Asset Structure

  • If you create a metadata template within the configuration dialog, the required module assets are created in the background

    • Display asset (view in the widget)

      • Asset type: Module/Dialog

      • Resource usage: Meta data view definition

      • Resource key: As defined in dialog

    • Dialog asset (edit dialog of the widget)

      • Asset type: Module/Dialog

      • Resource usage: Meta data dialog definition

      • Resource key: Resource key of display asset plus .dialog

TIP: Of course you can also set up these assets manually outside of the Metadata Widget if you provide the required resource information.

Template Editor

  • The content of metadata templates is stored as HTML storage file

  • The Template Editor of the metadata widget gives access to the source of the metadata template

    • Source tab

      • Displays the content of the template asset‘s HTML content in an source code editor

    • Preview tab

      • Provides a live preview of the template definitions, based on the context assetChanges in the Source tab are reflected in the Preview

    • Model tab

      • Displays the JSON update data model of the context asset in read-only mode. This data model is the foundation for the template definitions

Asset Data Model

  • The metadata widget makes use of the JSON representation of the update data model that was introduced with censhare 5

  • There is a logical model and an update model

    • Logical model

      • Standard censhare 5 asset data model and API

      • High level model that represents a logical structure of objects and hides physical representation (database schema)

      • Available as XML, JSON, Java API

      • Expandable

    • Update model

      • Extended censhare 5 asset data model

      • Displays all available traits and properties, not only given values but also empty values

      • More complex data structure. Example XML representation: information are encapsulated in element structures instead of inlined attribute lists.

      • Used to display all information within the metadata widget

Example: Trait display of a dialog asset in the logical model

CODE
<display description="Show the basic properties of the asset" name="General Meta Data Display"/>

Example: Trait display of a dialog asset in the update model

CODE
<display>
  <name name="name" is_multivalue="false" label="Name" value_type="string" exists="true" has_children="false">
    <value value="General Meta Data Display" self="property/name"/>
  </name>
  <description name="description" tooltip="Asset description in free text" label="Description" value_type="string" placeholderText="Description" has_children="false" exists="true" is_multivalue="false">
    <value value="Show the basic properties of the asset" self="property/description"/>
  </description>
  <color name="color" is_multivalue="false" label="Color" value_type="integer" exists="false" has_children="false">
    <value/>
  </color>
  <localizedName name="localizedName" is_multivalue="true" label="Name (localized)" value_type="string" name="false" has_children="false">
    <value/>
  </localizedName>
  <localizedDescription name="localizedDescription" is_multivalue="true" label="Description (localized)" value_type="string" exists="false" has_children="false">
    <value/>
  </localizedDescription>
</display>

Asset Data Model: REST URLs

HTML Template Structure

The template storage files are based on an HTML structure that is displayed in the widget content and widget edit dialog

To access information in the JSON data model of an asset, the template structure is enhanced by AngularJS expressions

Expressions are used to navigate in the JSON data model and to access and display metadata (e. g. labels, values) by synchronizing the expression with asset data (data binding)

  • Syntax: {{JSON path}}

  • Example: {{asset.traits.display.name.value[0].value}} accesses the asset name (in the trait display)

Custom censhare AngularJS directives provide user interface controls and functions that give access to metadata properties

Directives introduce a new syntax to the HTML document object model. They represent dynamic HTML extensions that are compiled into specific HTML behavior or DOM elements/transformations.

Custom directives allow us to pre-define re-usable UI components and logic (of any complexity) that can be accessed by a simplified syntax

  • Syntax: custom HTML elements, attributes or comments, according to HTML naming conventions

  • Example:

    CODE
    <cs-metadata-row property="asset.traits.type.type"></cs-metadata-row>

    This provides a label and select input to choose the asset type. The compiled HTML structure is as follows:

    CODE
    <li class="csDialogForm__row ng-isolate-scope" required="required" property="asset.traits.type.type">
      <div class="csDialogForm__cell-label ng-scope">
        <span class="cs-label ng-binding">Module</span>
      </div>
      <div class="csDialogForm__cell metadata-transclude ng-scope">
        <cs-hierarchical-value ng-model="property.value[0]" data="property.generator.options">
        …

Template Examples

Display template for general asset meta data

CODE
<ul class="csAssetProperties__list">
  <li read>
    <span class="csAssetProperties__list-label">{{asset.traits.display.name.label}}</span>
    <span class="csAssetProperties__list-value"><strong>{{asset.traits.display.name.value[0].value}}</strong></span>
  </li>
  <cs-metadata-row read property="asset.traits.type.type"></cs-metadata-row>
  <cs-metadata-row read property="asset.traits.display.description"></cs-metadata-row>
  <cs-metadata-row read property="asset.traits.origin.author"></cs-metadata-row>
  <cs-metadata-row read property="asset.traits.domain.domain"></cs-metadata-row>
  <cs-metadata-row read property="asset.traits.domain.domain2"></cs-metadata-row>
  <cs-metadata-row read property="asset.traits.rating.rating"></cs-metadata-row>
  <cs-metadata-row read property="asset.traits.display.color"></cs-metadata-row>
  <cs-metadata-row read property="asset.traits.ids.id"></cs-metadata-row>
</ul>

Edit dialog for general asset meta data

CODE
<cs-dialog-group title="{{'csCommonTranslations.properties' | csTranslate}}">
  <ul>
    <cs-metadata-row required property="asset.traits.display.name"></cs-metadata-row>
    <cs-metadata-row property="asset.traits.display.description">
      <cs-input multilines="3" ng-model="property.value[0].value"></cs-input>
    </cs-metadata-row>
    <cs-metadata-row required property="asset.traits.type.type"></cs-metadata-row>
    <cs-metadata-row required property="asset.traits.domain.domain"></cs-metadata-row>
    <cs-metadata-row required property="asset.traits.domain.domain2"></cs-metadata-row>
    <cs-metadata-row property="asset.traits.rating.rating"></cs-metadata-row>
    <cs-metadata-row property="asset.traits.display.color"></cs-metadata-row>
    <cs-metadata-row property="asset.traits.type.application"></cs-metadata-row>
  </ul>
</cs-dialog-group>


censhare 5 Directives

Styleguide

  • URL: http://SERVERPATH/censhare5/client/styleguide

  • Coding reference for censhare 5 Web frontend

  • Defines basic principles and rule sets for HTML and CSS code

  • Two parts

    • Styleguide: Rule sets, coding conventions and user experience principles

    • Pattern Library: Definitions and examples for all types of structures and their combinations, based on Atomic Design

  • Benefits

    • We can build features consistently, focus our energy on business logic and workflows instead of pixel alignment or table stylings

    • We reuse existing code and do not have to reinvent design elements and UI components

    • For testing purposes we can see our front end code in one place, quickly revealing styling issues

Directives

Reference of metadata related censhare UI directives

cs-groupbox
DescriptionGroup box for content
Syntaxcs-groupbox
Example
CODE
<cs-groupbox title="group box">
  Group box content
</cs-groupbox>
cs-expandgroup
DescriptionExpandable container with a title
Syntaxcs-expandgroup
Parameterstitle: Title of the container expanded: Initial expand state (default: true)
Example
CODE
<cs-expandgroup title="Expand group" expanded="false">
  Expand group content
</cs-expandgroup>
cs-dialog-group
DescriptionCreates a group title for controls used in a dialog
Syntaxcs-dialog-group
Parameterstitle: Title string or translation key shown for this group
Example
CODE
<cs-dialog-group title="Dialog group">
  Dialog group content
</cs-dialog-group>
cs-input
DescriptionCreates an HTML input field of type text
Syntaxcs-input
Parameterstitle: Title string or translation key shown for this group ng-model: Assignable angular expression to data-bind to label: Adds a label with the given text to the input required: This field is mandatory disabled: This field is disabled placeholder: Text displayed inside the input number: The input only accepts numbers multilines: Renders a textarea with the given number of rows maxlength: Specifies the maximum number of characters allowed in the text area formatter: Used to format model value to view value parser: Used to parse view value to model value validate: Used to validate the input value
Example
CODE
<cs-input 
   ng-model="asset.traits.display.description.value[0].value" 
   label="Description" 
   multilines="3">
</cs-input>
cs-select
DescriptionCreates a HTML select field which can either use nested option elements or the ng-options attribute for generation from data model
Syntaxcs-select
Parameterstitle: Title string or translation key shown for this group ng-model: Assignable angular expression to data-bind to ng-options: expression to create options required: This field is mandatory disabled: This field is disabled placeholder: The text to be displayed as a placeholder when no options are selected
Example
CODE
<cs-select 
   label="Type" 
   ng-model="select01" 
   ng-options="type.name for type in data.assetTypes" 
   placeholder="Select a value">
</cs-select>
cs-multiselect
DescriptionCreates a multiselect field using the chosen.jquery plugin
Syntaxcs-multiselect
Parametersplaceholder: The text to be displayed as a placeholder when no options are selected values: Array with value objects, if traitProperty is not set. Will keep the selected options options: Array of option objects that must have a value and a display_value property traitProperty: Trait property object, if values is not set. Will set the selection directly on the trait property noResultsText: Text if no result for user typing were found required: This field is mandatory disabled: This field is disabled maxSelectedOptions: Number of selections the user can make
Example
CODE
<cs-multiselect 
   placeholder="cs-multiselect" 
   values="example.value" 
   options="example.options">
</cs-multiselect>
cs-hierarchical-value
DescriptionCreates a control for editing of hierarchical values
Syntaxcs-hierarchical-value
Parametersng-model: Assignable angular expression to data-bind to data: Array of possible values for the selection. Not needed when a generator-id is used generator-id: The data can also be loaded with an options-generator hide-root: If this attribute is present, the first (root) item will not be visible when there is only one root item and the root item has children separator: The path separator for the hierarchical value, defaults to "." bind-value: Determines whether to bind the whole entry to the model or just the value. Can be either true or false, defaults to false
Example
CODE
<cs-hierarchical-value 
   ng-model="relation.type" 
   data="relationTypes">
</cs-hierarchical-value>
cs-checkbox
DescriptionCreates an HTML checkbox
Syntaxcs-checkbox
Parametersng-model: Assignable angular expression to data-bind to ng-true-value: Value for true if not a boolean ng-false-value: Value for false if not a boolean required: This field is mandatory disabled: This field is disabled
Example
CODE
<cs-checkbox 
   label="Example checkbox" 
   ng-model="example.checkbox" 
   value="1">
</cs-checkbox>
cs-radio
DescriptionCreates an HTML radio button
Syntaxcs-radio
Parametersng-model: Assignable angular expression to data-bind to ng-true-value: Value for true if not a boolean ng-false-value: Value for false if not a boolean required: This field is mandatory disabled: This field is disabled
Example
CODE
<cs-radio 
   label="Example button" 
   ng-model="example.radio" 
   value="value">
</cs-radio>
cs-datepicker
DescriptionCreates a date picker control for date related value types that can be displayed inline or as a dropdown on an input field
Syntaxcs-datepicker
Parametersng-model: Assignable angular expression to data-bind to. Property must be date object by default show-weeks: Boolean expression if week numbers are shown (default: false) required: Mark this control as invalid if value is not set format: Display date format (default: DD.MM.YYYY) date-only: Add if the value type is only a date string without any time (YYYY-MM-DD). Avoid problems with timezone conversion which leads to a switch in date min: Minimal date that should be selected. Before that date the days are disabled max: Maximal date that should be selected. After that date the days are disabled
Example
CODE
<cs-datepicker 
   required show-weeks="true" 
   format="YYYY/MM/DD" 
   ng-model="example.date01">
</cs-datepicker>
<cs-datepicker-table 
   show-weeks="true" 
   ng-model="example.date02">
</cs-datepicker-table>
cs-timepicker
DescriptionCreates a time picker control for time related value types that is displayed as a dropdown on an input field
Syntaxcs-timepicker
Parametersng-model: Assignable angular expression to data-bind to. Property must be time object by default
Example
CODE
<cs-timepicker 
   ng-model="example.time">
</cs-timepicker>
cs-colorpicker
DescriptionCreates a color picker dropdown control with a palette of colors you can choose one from. Provided default color palette can be overwritten by a customized own.
Syntaxcs-colorpicker
Parametersng-model: Assignable angular expression to data-bind to label: Label string above the color picker value: If no ng-model is used, the color value can be assigned directly. Useful if the color picker is disabled. Value can be a hex color value, integer or rgb color palette-model: Scope variable for a custom color palette. A color palette is defines as a two dimensional array of color values (hex, decimal, rgb). position: Postion of dropdown menu relatively to the trigger field. Values: left (default), right, center disabled: If the disabled attribute exists, the control will only display a color custom-input: Displays a input for custom hex color input inside the dropdown
Example
CODE
<cs-colorpicker 
   ng-model="example.colors01">
</cs-colorpicker> 
<cs-colorpicker 
   palette-model="examplePalette" 
   custom-input ng-model="example.colors02">
</cs-colorpicker>
CODE
examplePalette: [
  ['#334433', '#6699aa', '#88aaaa', '#aacccc', '#447799'],
  ['#225533', '#44bbcc', '#88dddd', '#bbeeff', '#0055bb']
]
cs-color
DescriptionDisplays a color field
Syntaxcs-color
Parametersvalue: Value can be a hex color value, integer or rgb color
Example
CODE
<cs-color value="#000000"></cs-color>
cs-toggle
DescriptionRenders a toggle styled checkbox for true or false states
Syntaxcs-toggle
Parametersng-model: Assignable angular expression to data-bind to label: Adds a label with the given text title-off: Title for the false state, default: Off title-on: Title for the true state, default: On
Example
CODE
<cs-toggle 
   title-off="no" 
   title-on="yes" 
   ng-model="example.toggle">
</cs-toggle>
cs-rating
DescriptionRating visualisation with a configurable number of stars
Syntaxcs-rating
Parametersng-model: Assignable angular expression to data-bind to max: Maximum number of stars being displayed, default: 5 disabled: Set this control to readonly
Example
CODE
<cs-rating ng-model="example.rating"></cs-rating>
cs-slider
DescriptionRenders a HTML5 slider element
Syntaxcs-slider
Parametersng-model: Assignable angular expression to data-bind to min: Minimal value max: Maximum value step: Step size
Example
CODE
<cs-slider 
   min="0" 
   max="10" 
   step="1" 
   ng-model="relation.type">
</cs-hierarchical-value>
cs-button
DescriptionCreates a HTML button control
Syntaxcs-button
Parametersng-model: Assignable angular expression to data-bind to ng-click: Handler for onClick name: The button name cs-type: Button type for styling, values: default, cta, alt
Example
CODE
<cs-button 
   type="cta" 
   ng-click="click()">
</cs-button>
cs-button-group
DescriptionRenders a grouped button row, containing multiple buttons
Syntaxcs-button-group
Example
CODE
<cs-button-group>
  <cs-button ng-click="click()">Left</cs-button>
  <cs-button ng-click="click()">Right</cs-button>
</cs-button-group>
cs-progress
DescriptionRenders an HTML5 progress element
Syntaxcs-progress
Parametersng-model: Assignable angular expression to data-bind to progress: Displays progress, values from 0 to 100 number: Display the percentage value as number
Example
CODE
<cs-progress 
   progress="40" 
   ng-model="example.progress">
</cs-progress>
cs-workflow-state
DescriptionRenders a control to display the workflow state of an asset
Syntaxcs-workflow-state
Parametersasset: asset data workflow-state-id: alternative to asset, just the workflow state will be displayed
Example
CODE
<cs-workflow-state 
   asset="example.asset">
</cs-workflow-state>
<cs-workflow-state 
   workflow-state-id="example.id">
</cs-workflow-state>
cs-worst-workflow-state
DescriptionRenders a control to display the worst workflow state of an asset
Syntaxcs-worst-workflow-state
Parametersdata: asset data
Example
CODE
<cs-worst-workflow-state 
   data="example.asset">
</cs-worst-workflow-state>
cs-multivalue-repeat
DescriptionRenders enumeration multivalue controls with add, remove functions and type selection
Syntaxcs-multivalue-repeat
Parametersvalue: Path to the enumeration multivalue value
Example
CODE
<cs-multivalue-repeat 
   value="asset.traits.address.address.value[0].addressType">
      <ul>
         <li class="csDialogForm__row">
             <cs-input 
                 ng-model="value.zipCode.value[0].value">
             </cs-input>
             <cs-input 
                 ng-model="value.city.value[0].value">
             </cs-input>
        </li>
     </ul>
</cs-multivalue-repeat>
cs-time-pair-repeat
DescriptionCreates a control to edit time ranges and display them in a calendar view
Syntaxcs-time-pair-repeat
Parametersvalue: Multivalue time values
Example
CODE
<cs-multivalue-repeat 
   value="asset.traits.address.address.value[0].addressType">
      <ul>
         <li class="csDialogForm__row">
             <cs-input 
                 ng-model="value.zipCode.value[0].value">
             </cs-input>
             <cs-input 
                 ng-model="value.city.value[0].value">
             </cs-input>
        </li>
     </ul>
</cs-multivalue-repeat>
cs-metadata-row
DescriptionCreates a row for an asset metadata information with automatic mapping of standard control elements, depending on the value type
Syntaxcs-metadata-row
Parametersproperty: The property to edit in this row row-label: Custom label for the row read: Render in read only view translate-prefix: Prefix of a translation key for the value, for read only filter: Filter to apply, fo read only hide-root: Hides root value, only for hierarchical (cs-hierarchical-value) values multilines: Renders a textarea with the number of rows given by this attribute, only for String values
Example
CODE
<cs-metadata-row 
   read property="asset.traits.type.type">
</cs-metadata-row>
<cs-metadata-row 
   read property="asset.traits.display.color">
</cs-metadata-row>

<cs-metadata-row 
   required property="asset.traits.display.name">
</cs-metadata-row>
<cs-metadata-row 
   property="asset.traits.display.description">
      <cs-input 
         multilines="3" 
         ng-model="property.value[0].value">
      </cs-input>
</cs-metadata-row>
<cs-metadata-row 
   read property="asset.traits.type.type">
</cs-metadata-row>
The following mappings of value types are available for the cs-metadata-row directive:
  • Hierarchical attribute (String)
    • cs-hierarchical-value with cs-multiselect
  • Enumeration (String)
    • cs-select or cs-multiselect with cs-radio
  • Integer (Long)
    • cs-input
  • String
    • cs-input
  • Timestamp
    • cs-datepicker and cs-timepicker
  • Boolean
    • cs-checkbox
  • Double
    • cs-input
  • Date
    • cs-datepicker
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.