Creating a step

A step is represented by a json object. Steps can be loaded from one json file or multiple files. Recommended setup is to keep each step in a single file. This will simplify configuration and overview.

Pipe execution

If configured, execution of a pipe is done with all data available to the step. This means data will vary depending on what step is executed.

Data from all previous executed steps will be sent to pipe and accessed in pipes using {{request. pattern.

Returning from pipe execution

In order to be able to access any data returned from a pipe, return a single item in a pipe.

Data will available using {{flow.xxx}} pattern.

All steps and summary pages use a layout grid with a base column width of 12. All controls, or children, can be specified to have different sizes and multiple breakpoints for different screen sizes.

All controls (or children of the grid) have a base width of 12, meaning that they fill the entire width of the grid. A child with the width of 6 will occupies half of the grid, a child with the width of 8 will occupy 2/3s of the grid.

The grid will fill its columns from left to right and fit up to 12 columns in each "row".

Sizes for the controls can be set in the ui [SKRIV HÄR, måste kanske ändra en grej i hur man konfar kommer jag på nu.]

All controls will be rendered into the layout according to the order that they are defined.

Each breakpoint (a key) matches with a fixed screen width (a value):

• xs, extra-small: 0px

• sm, small: 600px

• md, medium: 900px

• lg, large: 1200px

• xl, extra-large: 1536px

Advanced layouts

For more advanced layout options you can also configure a "ui:grid" property on the ui for the step.

Using the "ui:grid" all other rendering will be bypassed, and only items found in the "ui:grid" will be rendered.

With "ui:grid" it is also possible to nest grids.

    "ui": {
      "ui:grid": {
        "spacing": 3,
        "items": [
          {
            "size": 12,
            "spacing": 2,
            "items": [
              {
                "size": { "xs": 12, "sm": 6 },
                "spacing": 3,
                "items": [{ "item": "firstName" }, { "item": "lastName" }]
              },
              {
                "size": { "xs": 12, "sm": 6 },
                "items": [{ "item": "helpText" }]
              }
            ]
          },
          {
            "items": [
              { "size": 8, "item": "address" },
              { "size": 4, "item": "postalCode" }
            ]
          }
        ]
      }
    }