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
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
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
Description
Group box for content
Syntax
cs-groupbox
Example
CODE
<cs-groupbox title="group box">
Group box content
</cs-groupbox>
cs-expandgroup
Description
Expandable container with a title
Syntax
cs-expandgroup
Parameters
title: 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
Description
Creates a group title for controls used in a dialog
Syntax
cs-dialog-group
Parameters
title: 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
Description
Creates an HTML input field of type text
Syntax
cs-input
Parameters
title: 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
Creates a HTML select field which can either use nested option elements or the ng-options attribute for generation from data model
Syntax
cs-select
Parameters
title: 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
Description
Creates a multiselect field using the chosen.jquery plugin
Syntax
cs-multiselect
Parameters
placeholder: 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
Creates a control for editing of hierarchical values
Syntax
cs-hierarchical-value
Parameters
ng-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-generatorhide-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
ng-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
ng-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
Creates a date picker control for date related value types that can be displayed inline or as a dropdown on an input field
Syntax
cs-datepicker
Parameters
ng-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
Creates 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.
Syntax
cs-colorpicker
Parameters
ng-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, centerdisabled: 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
value: Value can be a hex color value, integer or rgb color
Example
CODE
<cs-color value="#000000"></cs-color>
cs-toggle
Description
Renders a toggle styled checkbox for true or false states
Syntax
cs-toggle
Parameters
ng-model: Assignable angular expression to data-bind to label: Adds a label with the given text title-off: Title for the false state, default: Offtitle-on: Title for the true state, default: On
ng-model: Assignable angular expression to data-bind to ng-click: Handler for onClickname: The button name cs-type: Button type for styling, values: default, cta, alt
ng-model: Assignable angular expression to data-bind to progress: Displays progress, values from 0 to 100number: Display the percentage value as number
Creates a row for an asset metadata information with automatic mapping of standard control elements, depending on the value type
Syntax
cs-metadata-row
Parameters
property: 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
