Skip to main content

Configuration your UI

The ui.json format looks as follows

NameDefaultDescription
iconLetterfont-awesome className or url
colorrandomhexadecimal or rgb
listoptional
viewoptional
referenceoptional
createoptional
editoptional

Identifier#

Assume our json object looks as follows

{
"name": "Marc Palm",
"affiliation": {
"company": "Testless GmbH"
},
"bizeps_sizes": [
"13cm",
"15cm"
]
}

Then this gives us the following identifier for referencing purposes

  • name
  • affiliation
  • affiliation.company
  • bizeps_size

For display purposes

  • name
  • affiliation.company
  • bizeps_size[0]
  • bizeps_size[1]

Display templates#

Mustache#

You can use mustache templating

<div>{{ name }} - {{ affiliation }} - bizeps sizes {{#bizeps_size}}{{.}},{{/bizeps_size}} </div>

Note we use compile this somewhat innocently with MustacheJS and it might break your frontend.

React-like tree#

You can use React in some abstract form

Only applicable in view, reference and list and for read-only fields.

{
"className": "md-xx",
"avatars": [
{ "name": "Remy Sharp", "src": "/static/images/avatar/1.jpg" },
{ "name": "Travis Howard", "src": "/static/images/avatar/2.jpg" }
],
"names": [ "Peter", "Achim" ]
}
import Avatar from '@material-ui/core/Avatar';
<div className="md--xx">
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<span>Peter</span>
<span>Achim</span>
</div>

Only standard tags and material-ui components are supported at the moment

{
"tag": "div",
"props": {
"className": "md--xx"
},
"children": [{
"type": "@material-ui/core/Avatar",
"array": "avatars",
"props": {
"alt": "name",
"src": "url"
}
}, {
"tag": "span",
"array": "names",
"props": {
"innerHTML": "$this",
}
}]
}

Section#

Notice most of our application use Material UI for styling and RJSF for json-forms and react admin for the Table Views.

"list": [{
"display": [...] // Name of identifiers to
...
}],
"edit": [{
"$name": "Name of edit display" // Only necessary if there is more than one
"$css": [], // some potential css files to inject
"[identifier]": {
"$widget": {
"ui:widget": "textarea",
"ui:options": {
"rows": 5
}
}
"$root": {
className: "hello",
style: {
padding: "5px",
...
}
}
[selector]: {
style: {
padding: "5px",
...
}
}
}
}],
"create": ..., // This is optional and overwrites the edit part
"reference": [{ ... }],
"view": [{ ... }]

See $widget look at possible options here