Data BSI Attributes
Data BSI attribute are regular DOM element attributes, starting with data-bsi-. In a BSI CX design they must be used to amend BSI CX specific semantic information to the DOM or to control processing logic while the DOM is rendered by the BSI CX server.
This chapter gives an overview over the attributes relevant for the development of designs (and omits e.g. attributes only used internally). In addition references for further information are collected here.
| Attribute | Short description | Further information |
|---|---|---|
|
Used to indicate a text is multiline.
|
|
|
Marker attribute for a container for a news snippet. |
|
|
General attribute for any property. Used in the context of news snippets to find elements where a particular information should be displayed. |
|
|
Marker attribute to identify the element to store the appropriate information. |
|
|
Marker attribute to identify the element to store the appropriate information. |
|
|
Marker attribute to identify the element to store the appropriate information. |
|
|
Marker attribute to identify the element to store the appropriate information. |
|
|
Unique ID of a dropzone in a content element. |
|
|
List of all allowed element IDs within a dropzone. |
|
|
List of all allowed element IDs within a dropzone. |
|
|
Hides the move button for a given content element in the BSI CX content editor. |
|
|
Hides the copy button for a given content element in the BSI CX content editor. |
|
|
Hides the remove button for a given content element in the BSI CX content editor. |
|
|
Hides the edit button for a given content element in the BSI CX content editor. |
|
|
Defines the unique ID of a content element in a design. |
|
|
Is used on tags that contain a certain content element part, so that BSI CX knows what can be edited in what way. |
|
|
Defines a unique scope for a Handlebars content element within a larger document, e.g. a composite element or the |
|
|
Defines rules on when to remove a certain element from the DOM. |
|
|
Used to declare a fieldset element within a form. Used by the form parser for form field rules. |
|
|
Forms annotated with this attribute are ignored by the BSI CX form processor. |
|
|
Marks an element for backend form-validation issues. |
|
|
Marks an element as a template to render backend form-validation issues. |
|
|
Attribute is set on each form field with a backend validation issue and contains the respective error message. |
|
|
Controls whether the BSI CX content editor shows a drop-down menu to choose a form type. |
|
|
Contains the BSI CX-internal form type. |
|
|
Contains the BSI CX-internal form field type. |
|
|
Text to be shown when a mandatory field is left empty. Used for client-side form validation. |
|
|
Text to be shown when a field has an invalid value. Used for client-side form validation. |
|
|
Text to be shown as context information to a form field. |
|
|
Defines whether the type of an input can be changed by the user. |
|
|
Will hide mandatory check box for form fields. |
|
|
Marks a radio button group. |
|
|
Marks a single radio item within a group. |
|
|
Contains the default selected value for select and radio fields. |
|
|
Contains the configured list of possible values for select and radio fields. |
|
|
Can be used to fix the option values available for selection on select and radio fields. |
|
|
If this attribute is set, only the link itself can be edited for a link element part in the content editor. |
|
|
If the anchor tag contains one or more elements with this attribute, the link text from the form will be inserted into them. |
|
|
Used to define a placeholder image that is used instead if no valid image has been selected for an image part. |
|
|
Used to toggle between external links and media library picker in the image part editor. |
|
|
Controls whether the fields for a link on an image part are shown in the editor. |
|
|
Contains the name of the url provider. |
|
|
Enables the option for pagination in the table part editor. |
|
|
Contains the value whether pagination has been enabled for a table. |
|
|
Marks tags that should be dissolved once the content is rendered to the user. Child elements are moved to the parent element |
--- |
|
Generic attribute to save JSON-strings into. Currently being used for dynamic form rules, and could e.g. be used to save configuration from the script template part into. |
|
|
Marker attribute for the different social share links. Contains the respective platform (e.g. "Facebook"). |
|
|
Marker attribute for the different social follow links. Contains the respective platform (e.g. "Facebook"). |
|
|
Used by the social share element part to save whether a particular link should be used. |
|
|
Used by the social share element part to save the URL. |
|
|
Used by the social share element part to save the title. |
|
|
Used by the social share element part to save the description. |
|
|
Target endpoint to lookup values belonging to the element’s |
|
|
Holds a BSI datamodel entity ID (i.e., an ID referencing the BSI Suite value list). Used in dynamic value lists. |
|
|
Holds an entity key belonging to the element’s |
|
|
Human readable label of the key stored in |
Control Attributes
data-bsi-remove-if
The presence of an HTML element in the generated content can be controlled by using data-bsi-remove-if. The attribute value can use the following boolean variables:
-
editor:Trueif the content is rendered within the content editor. It does not matter if the content editor is in draft (editing) or in (inline) preview mode.Falsein any other case, including the external preview. -
draft:Trueif the content is rendered within the content editor and the content editor is in draft (editing) mode.Falsein any other case. -
live:Trueif the content is rendered within a story, by the external preview or by the internal preview in the content editor.Falsein any other case. -
authenticated:Trueif the content is rendered within a story and an authenticated user is logged in. This feature is only available in BSI CX websites.Falsein any other case. -
production:Trueif the content is rendered on a BSI CX server which is configured as a production system. (as defined by the config property 'bsi.studio.html.output.environment').Falsein any other case. -
test:Trueif the content is rendered on a BSI CX server which is configured as a test system. (as defined by the config property 'bsi.studio.html.output.environment').Falsein any other case.
The attribute value may have a negate operator (!). Using this operator you can negate the condition, for instance !authenticated will only be removed in case the visitor is not logged in.
The attribute value can be a complex expression, see examples below.
Do not use the data-bsi-remove-if attribute in content elements if you must prevent script execution in the content editor.
The expressions are not evaluated when a content element is dropped into the editor.
Instead, use the attribute in the template for the landingpage or in the master for a website or in a website page template.
|
data-bsi-remove-if must not be used for DOM elements containing content elements. Otherwise, those cannot be edited in the draft mode.
|
Examples
A common and recommended use of data-bsi-remove-if="editor" is to suppress JavaScript execution in the content editor, which may lead to unintended side effects.
A script must never manipulate the DOM in the content editor.
Do not rely on CSP preventing script execution.
Instead, use the attribute as shown in the following examples.
<script data-bsi-remove-if="editor">
// This script does not execute while being displayed in the editor.
alert(1);
</script>A common use case of data-bsi-remove-if="live" mode is to display context information to the user that should only be present while editing a content.
<p data-bsi-remove-if="live">This hint will never be shown in any content driven by a story.</p>The following example shows a complex expression. If your design includes a script for analytic/tracking tools, you should make sure the script is never executed on a test system and never in the editor.
<script data-bsi-remove-if="!production || draft">
console.log('run only in production');
</script>data-bsi-hide-[type]-button
data-bsi-hide-edit-button may be used to prevent editing of a content element. The attribute must be located on the same tag as the data-bsi-element attribute.
<div data-bsi-element="..." data-bsi-hide-edit-button="true">...</div>data-bsi-hide-move-button, data-bsi-hide-copy-button, and data-bsi-hide-remove-button are working in the same manner, but on dropzone level. They will prevent from moving, copying, or removing content elements on a dropzone.
<div data-bsi-dropzone="..." data-bsi-hide-move-button="true" data-bsi-hide-copy-button="true" data-bsi-hide-remove-button="true">...</div>Form Processor Attributes
The BSI CX server may implement programmed backend logic to validate and process a specific form in a BSI CX website. The following attributes control which form processor is called on a form submit. A BSI CX project that implements its own backend logic may contribute its own form processors.
Set the data-bsi-form-type on a form element to specify which form processor handles the form on submit. Predefined values are login and change-password. A BSI CX project may define custom values, which must map to a form processor implementation in the BSI CX backend server.
The data-bsi-show-form-type-field controls whether the BSI CX content editor shows a drop-down menu to choose a form type in the Form element part. This gives a design author the freedom to create a generic content element for forms, where the content author can choose to create a standard form or a form using a form processor via drop-down menu, or to provide a complete form as a dedicated form element, where the content author cannot change the form type in the content editor.
Set the data-bsi-form-type attribute on a form field element to mark a field interpreted by a form processor. For instance a login form requires the form to have two fields, one must define data-bsi-form-type="user-id" and the other data-bsi-form-type="password" in order to pass the form processor validation. Each form process may define custom values for this attribute.
See dynamic value list template part for more information data-bsi-entity-id, data-bsi-entity-key-value, data-bsi-entity-key-display-text and data-bsi-rest-resource.
The BSI CX backend guarantees that values defined in data-bsi-entity-key-value are consistently encrypted prior to transmission to clients.
|
See form-field for information on data-bsi-form-*-text attributes.