Skip to content

Presenter class

The Presenter and Editor classes share a common base class and are therefore quite alike. The required parameters on initialization are the same, and it supports the same optional parameters except includeLevel which has no effect, see the documentation for the Editor Class to read about all the other parameters.

const presenter = new rdforms.Presenter({
    showLanguage: true,
    filterTranslations: true,
    truncate: true

As indicated in the example above, the presenter class supports a few additional parameters:

parameter type comment
showLanguage boolean When a language is provided on a literals it is shown only if showLanguage is set to true.
filterTranslations boolean If true, multiple matches of the same template-item with a explicit nodetype set to LANGUAGE_LITERAL will be filtered so that only a single value is shown. The value shown is the one deemed to be closest to the locale of the system, e.g. if the locale is "en_US" literals with "en" will be preferred over "se" or literals without language given.
truncate boolean If true large amount of bindings for the same item will be truncated, e.g. only 10 keywords will be shown with a button "show all" at the end.
truncateLimit number The amount of bindings to truncate after, default is 10.

Generated HTML and CSS classes

The default style is quite simple, feel free to experiment with providing you own stylesheet. The most important classes are:

styleclass usage
rdforms Always at the top of each presenter/editor, provides a suitable scope for the css.
rdformsPresenter Indicates that we have a presenter rather than an editor
rdformsRow A container node for a rdformsLabel and a rdformsFields
rdformsTopLevel An rdformsRow at the top of a presenter or editor
rdformsLabel The node containing the label
rdformsFields A node containing potentially multiple values for the same label or a sub-presenter / -editor
rdformsField A single value
rdformsLanguage The language part of a value, positioned inside the rformsField but not always present

The HTML structure for a single label and a single value in the form of a literal with a language looks like:

<div class="rdforms rdformsPresenter compact">
   <div class="rdformsTopLevel rdformsRow">
      <div class="rdformsLabel">Some label</div>
      <div class="rdformsFields">
         <div class="rdformsField">
            <div class="rdformsLanguage">en</div>
            <div lang="en">A string literal in english</div>