Options

** Options** are used to set additional attribute parameters. The interpretation of the settings is performed by a specific implementation of the module.

The following settings are currently used in the registry module:

"options": {
   "cssClasses": ["class1", "class2"],
   "cssStyles": {
       "background-color": "#FF0000"
    },
    "template": "some-custom-template"
}

• cssClasses - css classes, to apply to the field (in a standard template)
• cssStyles- css styles, to apply to the field (in a standard template)
• template is the name of the template that will be used to render the field. A search will be performed for an ejs template with this name in the standard theme, and in the directories specified in the module templates setting.

In the custom template, all variables that are passed to the standard attribute templates are available:

• item - the object displayed by the form
• prop - the object property represented by the field (if any)
• field- field meta-object
• id - field identifier, generated by the standard algorithm

Sorting - "reorderable": true

It is used for the attribute of the “Collection” type. Determines whether the items in the collection can be sorted with the up and down arrows, and changes the sequence numbers between the two items in the collection.

"options": {
  "reorderable": true`
}

Displaying the library template

Custom attribute template

Specify the path to the template - located in the project folder .\templates\registry\, example for template below - ./templates/registry/attrs/project/stateView.ejs

"options": {
                "template": "attrs/project/stateView"
              }

The item with ${item.getItemId()}basic commands is passed to the template:

• receiving item values item.property('stage').getValue()
• identifiers item.getItemId()
• class name item.getClassName() The item of the ``prop``property
• name (code) of the prop.getName() property
• computing the attribute value (if formula) prop.evaluate()
• the attribute value prop.getValue()
• references to class prop.meta.refClass

The same way the ${module} path is transferred to display templates, for example <% stylesheet(${module}/app-static/css/styles.css ) -%>

Hierarchy collection treegrid

"options": {
          "template": "treegrid/collection",
          "reorderable": true,
          "treegrid": {
            "width": "auto,100,100,100,100,0",
            "align": "left, center,center,center,center, left",
            "sort": "str, date, date, date, date, int",
            "enableAutoWidth": false,
            "paging": {
              "size": 20
            }
          }
        }

View in the list of objects for colored icons

In the same way as in the create/edit view meta, you can set overriding templates for the list view meta for each column:

...
"options":{
   "template": "templateDir/name"
}
...

Example

Digital slider fields

"options": {
            "template": "slider",
            "slider": {
              "skin": "dhx_skyblue"
            }
          }

Integer slider fields range

It is set in the view for the "options"property:

...
"tags": null,
"options": {
   "template": "range"
}
...

Connecting the functionality of creating objects for collections without using the inplace form

"options": {
   "inplaceInsertion": true,
   "inplaceInsertionClass": "className@namespace"
}

Example of "options" of the “Table” attribute

{
         "caption": "Таблица",
         "type": 3,
         "property": "table",
         "size": 2,
         "maskName": null,
         "mask": null,
         "mode": 3,
         "fields": [],
         "columns": [],
         "actions": null,
         "commands": null,
         "orderNumber": 50,
         "required": false,
         "visibility": null,
         "enablement": null,
         "obligation": null,
         "readonly": false,
         "selectionPaginated": true,
         "validators": null,
         "hint": "",
         "historyDisplayMode": 0,
         "tags": null,
         "options": {
           "inplaceInsertion": true
         },
         "selConditions": [],
         "selSorting": []
       }

Indicate the "inplaceInsertionClass" if it is necessary to choose a class (if there are heirs) when creating the object.

Setting the location of the attribute header above the value.

"options": {
   "cssClasses": ["top-label"]
}

Setting the attribute field for the entire string length (without the name).

"options": {
   "cssClasses": ["no-label"]
}

Customize the styles applied to the container that contains the input field with the name.

"options": {
   "cssStyles": {
    "max-width": "30%",
    "padding": "25px"
  }
}

Configuring table column parameters for the “Collection” type attribute

The date column is centered and is 110 pixels, by default.

Available attribute options:

"options": {
  "template": "treegrid/collection",
    "treegrid": {
      "width": "150,auto,200",
      "align": "center,left,center",
      "sort": "str, str, str",
      "enableAutoWidth": false,
      "paging": {
        "size": 20
  }
    }
}

Configuring CSS fields via tags and options

You can configure the CSS fields using tagsor options. In Registry there are css-classes with the following behavior: nolabel, toplabel, full.

For an attribute in the meta view, css-classes are assigned as follows:

In the optionsproperty:

"options": {
  "cssClasses": ["toplabel", "fill"]
}

In the tags property (backward compatibility)

"tags": ["css-class:nolabel", "css-class:fill"]

In addition to the classes, you can set the styles directly (they will be applied only to the container).

Set the styles for attribute in a meta view:

In the optionsproperty:

"options": {
  "cssStyles": {
    "max-width": "30%",
    "padding": "25px"
  }
}

In the tagsproperty:

"tags": ["css:min-width:10%", "css:background-color:green"]

The description above is only for the standard field templates from the standard theme.

---