Dynamically Configuring Components with Expressions - Language Spec

Add-ons UIs
1

A few weeks ago I migrated my OH2.5.1 instance to OH3.2.0.M3. Everything works much better than I expected. Probably also because I did not take the automatic migration path, but rather started from scratch and migrated peace by peace manually.
Many thanks to the people who made this possible! OH3.2.0M3 is very stable.

Now I started to evaluate how to migrate my sitemaps-based UI to MainUI and widgets.
Looking through the examples in the forum I was not able to get a clue what sort of language spec the dynamic configuration language has.

Here it is stated:

image
image860×218 67.3 KB

Which is rather fluffy!
Is there a document that is more specific?

I found examples like:

    - component: oh-webframe-card
      config:
        title: =props.title
        borders: false
        noBorder: true
        outline: true
        src: =props.URL2.replace('{period}', vars.selectedPeriod || [props.timerange.split(',')[0].split('=')[0]])
        class:
          - display-block

Could somebody explain two things I was not able to find answers for the whole afternoon:

what the “{period}” means as well as the notation of “||” with the second expression (some sort of lambda?)

Logically it means: inside the replace function the target string is fed by the expression separated by ||.
I do not remember nor I did find googling any language spec (Jscript, Python,…) supporting this.

2

Widget expressions are evaluated using expression-eval (should probably be mentioned in the docs) which is in turn based on jsep for the parsing/abstract syntax building.

It looks like an arbitrary widget-defined placeholder that gets replaced with the actual desired value.

https://javascript.info/logical-operators#or-finds-the-first-truthy-value

1 Like
3

I just did not see this definition, shame on me:

let firstName = ""; 
let lastName = ""; 
let nickName = "SuperCoder"; 
alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder*

This is true, it was a placeholder for a actual value to be typed in into the yaml.

Thanks

4

Great question, thanks for asking this @lukics!
Hope to see @ysc’s answer in the docs.

5

Removed the solution checkmark for another issue for which I do not have an answer

In the documentation I read the following:

image
image786×122 22.6 KB

I have following yaml definition:

- component: f7-col
  slots:
    default:
      - component: oh-icon
        config:
          icon: = (items[props.rsItem].state === undefined) ? 'oh:rollershutter' : 'oh:rollershutter-' +items[props.rsItem].state
          height: 140

for the icon assignment I get:

Nested mappings are not allowed in compact mappings at line 64, column 33:

                          icon: = (items[props.rsItem].state === undefined) ? '…
                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^…

I get the same error message also when copying the sample above.

My questions are:
What does the error message mean, what is the cause?
How can I fix this?

6

The working solution is:

tooltip: "= props.rsItem === undefined ? 'oh:rollershutter' : 'oh:rollershutter-' + items[props.rsItem].state"

I am not clear about why and why not I just found out by try and error.
No clue when it has to be quoted and when not?

7

https://gordonansell.com/nested-mappings-are-not-allowed-in-compact-mappings/

Basically when you have a : in the value you have to add the quotes, since it’s also the separator between the field name and the value.

8

I also stumbled into this today. Can it be corrected in the documentation?