Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Estimated time: 30 min.

In this tutorial you will learn:

...

  1. Select your form layout in the property tree, for example global/app/myapp42/form/person and switch to content edit mode.

  2. Replace the content of the property by the content below and click SAVE (Replace myapp42 in the content below in “schema” and “output” line with the name of the app you would like to create the form for. Do use only lower case letters and don’t use special characters or spaces!):

    Code Block
    languagejson
    {
      "title": "Add person",
      "description": "Add a new person",
      "schema": "property.list?filter=global/app/myapp42/object/person/v1/schema",
      "output": "global/app/myapp42/object/person/v1/instance/%23%7Bvar.property.uuid%7D",
        "layout": {
          "orientation": "vertical",
          "items": [
            {
            "orientation": "horizontal",
            "items": [
              {
              "field": "firstName"
              },
              {
              "field": "lastName"
              }]
            },
            {
              "field": "age"
            },
            {
              "field": "gender"
            },
            {
              "field": "birthDate"
            }
          ]
        }
    }
  3. Navigate to All Apps and select your app

  4. Now you should see that the “person” tile has changed to “Add person” + description. Click it.

  5. Here you can see the changed layout: firstName and lastName is now in the same line (horizontal) and all other fields are vertical:

  6. You can learn more about form layouts and orientation in PIPEFORCE here: Form - Orientation : https://logabit.atlassian.net/wiki/spaces/DEVEX/pages/1010991217 and if you would like to change color or designs of the form fields, have a look here: Form - Look & Feel : https://logabit.atlassian.net/wiki/spaces/DEVEX/pages/1011089441 . More details about the adaptation of the form schema, you will find here: https://logabit.atlassian.net/l/c/7NdsFNrA

  7. Try out your form and add some new person data sets. In the next tutorial you will learn how to display them in a list.

...