Skip to content

Master Show

Download ezUI File

In this example, we will show you how you can use the UI Builder API to get and set your Field ID values, Get the Payload as well as Save Pages.

This can be useful, for example, if you need to get or update a specific value from another template or page.

The example UI takes in a Field ID and value. the Field ID is the ID of the UI component you want to get and set. the Value is the new value of the Field ID.

The example UI also can Print the Payload, as well as Save Pages using the UI Builder API.

MasterShow

Getting the value of a Field ID

To get the value of a Field ID, this can be done by calling the code Api.page.getFieldValue('FieldID'), this takes in one parameter, the Field ID.

1
2
3
field.on('change', () => {
  val.value = Api.page.getFieldValue(field.value);
});

Setting the value of a Field ID

To set the value of a Field ID, this can be done by calling the code Api.page.setFieldValue('FieldID', value), this takes two parameters, the FieldID which will be the reference for what is to be updated, and the value which will be the new value of the FieldID.

1
2
3
val.on('change', () => {
  Api.page.setFieldValue(field.value, val.value);
});

Saving Page using the UI Builder API

Users can also save pages using the API. users only need to call Api.page.save() or Api.page.saveAs('PageNumber', 'PageName')

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
btnSave.on('click', () => {
  if (!setNumAndName.value)
    Api.page.save();
  else
    Api.page.save(pageNum.value, pageName.value);
});

btnSaveAs.on('click', () => {
  if (!setNumAndName.value)
    Api.page.saveAs();
  else
    Api.page.saveAs(pageNum.value, pageName.value);
});

Calling the Payload using UI Builder API

To call the Payload, users can call Api.page.payload

1
2
3
btnPrintPayload.onClick = () => {
  console.log("UI Payload", Api.page.payload);
}