Tutorial - Add a pre-filled form component
At the end of this tutorial, you should have a pre-filled form inside the dynamic page.

Form component

Forms help us change information about a specific item.
In this section, we analyze important fields that allow the form to be pre-filled. The form component we use is UiSdlForm. To find more information about UiSdlForm, run c3ShowType(UiSdlForm). Male sure to write it in this format: UiSdlConnected<ComponentName>, when you want to render a component type.

UiSdlForm fields

submitDataSpec

The submitDataSpec is the place you tell your application what data spec the action takes on when the form is valid and the submit button is clicked.
In submitDataSpec, we insert the SDLDemoMachine. The SDLDemoMachine (same one as our tables) is the database we grab information for the SDlDemoMachine from.
We must have actionName and submitArgument in order to submit the changes.
1
"submitDataSpec": {
2
"dataType": {
3
"typeName": "SDLDemoMachine"
4
},
5
"actionName": "merge",
6
"submitArgument": "this"
7
}
Copied!

contextVars and args

Here, we let the form know the specific SDLDemoMachine we want the form to be pre-filled with. The field id must be the same as your route. Previously, we have made the dynamic page route /sdldemoMachine/{{id}}. What is inside the double brackets, must be the same value of the key id.
1
"args": {
2
"this": {
3
"id": "${id}"
4
}
5
},
6
"contextVars": {
7
"id": {
8
"type": "UiSdlPageParam",
9
"path": "id"
10
}
11
}
Copied!

dataPropSpecs

Here is where we fill in the input fields. Inside the inputElement, we add a dataPropSpecs. The dataPropSpecs takes two fields: prop and dataPath. The dataPath takes in the attributes of the SDLDemoMachine. If we want the input to be filled with the SDLDemoMachine name, we must write name in dataPath.
At the static console, we fetched SDLDemoMachine by using c3Grid(SDLDemoMachine.fetch()). If we wanted metric1 to show up in our input field we would place metric1 as the value in our dataPath.
1
"dataPropSpecs": [
2
{
3
"prop": "value",
4
"dataPath": "name"
5
}
6
]
Copied!

Step 1 - Create the pre-filled form

The full code block of the pre-filled form:
1
//uiDemoExample.prefilledform.json
2
{
3
"type": "UiSdlConnected<UiSdlForm>",
4
"component": {
5
"title": {
6
"title": "Edit SDLDemoMachine"
7
},
8
"submitDataSpec": {
9
"dataType": {
10
"typeName": "SDLDemoMachine"
11
},
12
"actionName": "merge",
13
"submitArgument": "this"
14
},
15
"clearOnCancel": true,
16
"dataSpec": {
17
"dataType": {
18
"typeName": "SDLDemoMachine"
19
},
20
"actionName": "get",
21
"args": {
22
"this": {
23
"id": "${id}"
24
}
25
},
26
"contextVars": {
27
"id": {
28
"type": "UiSdlPageParam",
29
"path": "id"
30
}
31
},
32
"fieldSets": {
33
"type": "[UiSdlFormFieldSet]",
34
"value": [
35
{
36
"fields": [
37
{
38
"inputElement": {
39
"type": "UiSdlTextInput"
40
},
41
"fieldName": "name",
42
"label": "SDLDemoMachine.name",
43
"required": true,
44
"dataPropSpecs": [
45
{
46
"prop": "value",
47
"dataPath": "name"
48
}
49
]
50
},
51
{
52
"inputElement": {
53
"type": "UiSdlTextInput"
54
},
55
"fieldName": "category",
56
"label": "SDLDemoMachine.category",
57
"required": true,
58
"dataPropSpecs": [
59
{
60
"prop": "value",
61
"dataPath": "category"
62
}
63
]
64
},
65
{
66
"inputElement": {
67
"type": "UiSdlTextInput"
68
},
69
"fieldName": "location",
70
"label": "SDLDemoMachine.location",
71
"required": true,
72
"dataPropSpecs": [
73
{
74
"prop": "value",
75
"dataPath": "location.id"
76
}
77
78
]
79
},
80
{
81
"fieldName": "status",
82
"label": "SDLDemoMachine.status",
83
"required": true,
84
"inputElement": {
85
"type": "UiSdlRadioButtonGroup",
86
"radioButtons": [
87
{
88
"value": "RUNNING",
89
"label": "RUNNING"
90
},
91
{
92
"value": "NOT_RUNNING",
93
"label": "NOT RUNNING"
94
}
95
]
96
},
97
"dataPropSpecs": [
98
{
99
"prop": "value",
100
"dataPath": "status"
101
}
102
]
103
}
104
]
105
}
106
]
107
}
108
}
109
}
110
}
Copied!
We do not use custom epics to pre-fill forms. If you want to learn how to use custom epics, we do use a custom epic to delete SDLDemoMachines in Custom Epics. .

Step 2 - Render the pre-filled form

In the previous tutorial, we created the uiDemoExample.SDLDemoMachineDetail.json and inside that file, we referred to the uiDemoExample.sdldemocontent.json.
The uiDemoExample.sdldemocontent.json is a layout component that refers to the pre-filled form component.
1
// uiDemoExample.sdldemocontent.json
2
{
3
"type": "UiSdlConnected<UiSdlLayoutBase>",
4
"component": {
5
"children": [
6
{
7
"id": "uiDemoExample.prefilledform"
8
}
9
]
10
11
}
12
}
Copied!

View the Output

Provision and bundle your changes.
Once provision and bundle has been completed, see your changes on UI IDE.