Set Page info from Code

Download ezUI File

In this example we will show you how you can use the UI Builder Studio API to set the name and description of a Page

This can be useful, for example, if you want dynamically change the Name and Description of your Page using Javascript.

In the example below, we can navigate to the page by entering the Page ID and clicking "Read Page". this was done by utilizing the Playlist API. Upon clicking the "Read Page" button, the Name and Description textboxes are automatically filled. To replace the Page name and Description, click the "Set Page Name and Description" button, the existing Page name and description will be replaced with the content from the textboxes.

// Display the Page name and Page Description in the textboxes
function displayPage(){
  tb_pageName.value = Api.page.name;            // Get the current selected Page Name
  tb_description.value = Api.page.description;  // Get the current selected Page Description
}

// on Button Read Page is clicked
bt_readPage.onClick = () => {
  Api.playlist.readPage(tb_pageID.value);       // Read the Page specified in the Read Page textbox
  displayPage();                                // Display the Page Name and Description
}

bt_setPage.onClick = () => {
  Api.page.name = tb_pageName.value;            // Set the name of the currenlly selected Page
  Api.page.description = tb_description.value;  // Set the description of the currently selected Page
}

We can also set the page name and description on the onChange function of fields in the user interface. When the operator saves the page, these values will be set as the page name and description, allowing for a fast and automated workflow for the operator.

In the example below, we prefix the page name with an identifier, indicating to the operator the type of graphic, and the value from the "title" field.

// Set the Page name when the text field 'txt_title' is changed
txt_title.onChange = () => {
  Api.page.name = `L3 - ${txt_title.value}`; 
}

// Set the Page description when the text field 'txt_subTitle' is changed
txt_subTitle.onChange = () => {
  Api.page.description  = txt_subTitle.value; 
}