As an app developer, I want to configure layout expressions in Studio/Designer

[olemartinorg]

Description

In the layout expressions project, work is being done to support boolean expressions in the layout definitions, in a way that lets the app developer add dynamic behaviour to their app without having to write JavaScript code.

Some properties for components which currently are booleans, should also be possible to configure using an expression:

• readOnly
• required
• hidden (a new property controlling the visibility of a component)
• Multiple properties in a group edit configuration: saveButton, deleteButton, addButton.
• Possibly a new property to configure if the edit button for a repeating group row should be visible

Designer should have a GUI to configure these expressions, and it should be possible for a user to swap out a boolean on/off toggle for these properties with a dynamic expression instead.

Additional Information

• The project workspace

Tasks

• Design sketches
• Implement layout expressions panel #9933

Acceptance Criterias

No response

layout expressions design in Studio

This designs shows how you can create and edit layout expression in the right column in Studio

Dynamikk.mov

https://www.figma.com/proto/VAvGOqkMhKM8HL8h4xBeDH7b/Re-design-Altinn-Studio?page-id=0%3A1&node-id=3997%3A183508&viewport=-1577%2C-3352%2C0.24&scaling=min-zoom&starting-point-node-id=3997%3A183508

When you mark/edit a component in "lage siden" you get edit options on the right column. If you go to "dynamikk" you get the ability to create simple expressions.

How is it designed?

1. You start by choosing the action you want to do. The options will look different if you have chosen an repeating group component or another component.
   

2. Then you get to chose a setup for the expression you want to build. These are the options you have:

3. After choosing action and setup. You get a grey area where you could build the expression by choosing values. You have et opportunity to ad as many set ups under the same expression by adding an AND or OR, and choosing a new setup. The design is a bit limited, because you don't have the ability to build a new expression inside an expression (which is possible in code). We have chosen to exclude this, as it becomes too complicated for non-developers. If there is a need for it in the future, we recommend to builds a separate advanced editing window/mode for the more technical users, so it not complicate simple design in the right column.
   

4. By clicking on the button "lag ny dynamikk" you can create a new independent expression. You can make one expression for each action (hidden, required, read only (+ edit, save, delete, add in repeating group)).
   

5. When you have made a expression an click outside the edit-field, or add a new expression, the layout expression compresses
   

6. The tab on the top "lag dynamikk/ hent eksisterende" has been added to show that we think there should be an option to show a list of existing expressions, or expressions created as a default. It have not been decided how this will work yet