Display pre-populated fields in a simple form

This document shows how to configure a form that loads and displays existing data for editing.

How the form fetches and loads data

This form retrieves a WindTurbine record using its ID and displays the values in input fields. The configuration uses the get action, which returns a single record from the backend. The form fetches the correct record by combining three key fields: contextVars, args, and actionName.

The contextVars block defines a variable named id and assigns its value from the page URL. The route must include a matching parameter (for example, /edit-turbine/:myUrlParam). This setup enables the form to dynamically load the correct data record for editing.

If you have not already set up your route, read the topic on how to define routes for navigation.

JSON Configuration for Fetching and Pre-Populating Data

JSON

{
  "type": "UiSdlConnected<UiSdlForm>",
  "component": {
    "title": {
      "title": "Wind Turbine"
    },
    "subtitle": {
      "title": "Update wind turbine data"
    },
    "submitDataSpec": {
      "dataType": "WindTurbine", // Data model where the form submits
      "actionName": "merge", // Updates or inserts based on whether a record exists
      "submitArgument": "this" // Sends full form data as the input to the action
    },
    "clearOnCancel": true, // Restores the form to the initial state on cancel
    "width": 20,
    "dataSpec": {
      "dataType": "WindTurbine", // Source entity used to populate field values
      "actionName": "get", // Retrieves an existing record
      "contextVars": {
        "id": {
          "type": "UiSdlPageParam", // Ties this context variable to a URL param (declares the variable 'id' as a URL parameter)
          "path": "myUrlParam" // Route segment used to extract the value (matches the route segment :myUrlParam)
        }
      },
      "args": { // The args block uses the id from contextVars and injects it into the backend action call. This tells the platform which record to fetch.
        "this": {
          "id": "${id}" // Supplies the dynamic ID as input to the get action (Inserts the resolved value of id into the get call)
        }
      },
      "fieldSets": {
        "type": "[UiSdlFormFieldSet]", // Declares a list of field sets
        "value": [
          {
            "type": "UiSdlFormFieldSet", // A single section of related fields
            "fields": [
              {
                "inputElement": {
                  "type": "UiSdlTextInput" // Text field for editing the location
                },
                "dataPropSpecs": [
                  {
                    "prop": "value", // Binds this property of the input
                    "dataPath": "location" // Source field in the fetched object
                  }
                ],
                "fieldName": "location", // Used when submitting data
                "label": "Location" // Label displayed above the input
              },
              {
                "inputElement": {
                  "type": "UiSdlTextInput" // Text field for editing the manufacturer
                },
                "dataPropSpecs": [
                  {
                    "prop": "value",
                    "dataPath": "manufacturer"
                  }
                ],
                "fieldName": "manufacturer", // Used when submitting data
                "label": "Manufacturer - WindTurbine.Manufacturer" // Example label
              }
            ]
          }
        ]
      }
    }
  }
}

The get action retrieves an existing entity by primary key. In this case, it fetches the WindTurbine whose ID matches the page parameter. The form will populate its fields using the values returned by this action.

Use contextVars to extract values such as id from the route.
Reference the context variable inside args to provide input to backend actions.
Set actionName to "get" to retrieve an existing record for editing.
Use dataPropSpecs to populate form fields from specific fields in the fetched data object.

Copy link to this sectionHow the form fetches and loads data

Copy link to this sectionJSON Configuration for Fetching and Pre-Populating Data

How the form fetches and loads data

JSON Configuration for Fetching and Pre-Populating Data