CSS for 4D Forms

Originally published at: https://events.4d.com/summit2020/session/css-for-4d-forms-2/

Hi Add! Excellent prez! :+1:

I’ll dive into this ASAP but so far I’m a bit lazy to test if we could use:

  • wilcards for object names?
  • xliff strings?
  • unicode chars?

Thank you!

Thank you very much.

Using a wildcard in the name might not be a good idea, being that it is the character 4D use for comparison. But using xliff strings and unicode chars are supported.

Really liked the quiz-style tutorial on order of precedence, makes you think how the rules apply in real life. CSS specificity is a deep subject, but this presentation focuses on the rules that are relevant to 4D, which I appreciate.

For instance, the information (around 24:45) related to property set to default value (displays bold in property list) vs property not defined (yields to CSS) was super useful.

Also the example of switching icon and text according to the platform was very interesting. I did not know that !important is powerful enough to trump the property list, so that was an education!

For further reading:


As explained in the presentation, the form editor was fast tracked to work in project mode, but CSS rendering is not quite ready yet. It require much more work in an editor context, which must support redo, undo, etc. compared to one-shot rendering in Explorer preview pane or a DIALOG command. That said, sources tell me that there are plans to support WYSIWYG in the form editor, so let’s look forward to that.

Not covered in the presentation, but I suppose the next logical step would be using multiple CSS files (after all, “cascading” is in the name) which is already supported in 4D JSON forms (if there is a file backend, i.e. the form is not an object variable).

1 Like

You can find more information about CSS at developer.4d.com (remember, this is the site for project mode, not doc.4d.com).

Scroll down to “supported syntaxes”.

instead of using 4D wildcards (@), perhaps a more CSS way to select related objects is to use operators like = ~= |=.