Tutorial: Exposing a Custom Field in the UI - SPA

Follow

**Note: This content is intended for system administrators and is technical in nature**

This tutorial will show you how to expose your custom fields in the Practifi UI. 

It's important to first understand a key concept: For most pages, Skuid has a View version and an Edit version. The view page displays information, and if you want to edit the information in a field, you click on Edit to open an editable page. Therefore, when you expose a field in the View page, you need to consider if this field is editable, and if so, you need to make the same changes to the corresponding Edit page. This means you'll need to clone both the pages, add your custom field(s), and change your menu to point to your new pages. 

If you haven't already done so, check out the How to Change an Existing Practifi Page article which takes you through how to clone your pages and change your menu items to point to your new cloned page. 

Now that you've cloned your page, you're ready make changes and expose your fields.

We'll demonstrate how this works using the Service Basics view as an example. 

STEP 1: Identify the Model

In a cloned page of the Service Basics view, you will need to identify the model through which fields of the object are being referenced in Skuid. 

mceclip0.png

  1. Click on one of the Field Editors.
  2. Clicking a Field Editor will then allow you to see what model is used for the Field Editor in the Field Editor Properties container.

STEP 2. Find the model

Now that you know the model being used, you need to find it in the Models tab. 

mceclip3.png

  1. After identifying the model, go to the Models tab in the left pane.
  2. Then select Service within the Models tab.

STEP 3: Find the fields related to the model

Next, you need to find the fields related to the model.

mceclip8.png

  1. Once the model is selected, its properties are displayed in the right container, select Fields from the Service object.
  2. Then select All Fields.

STEP 4: Find your custom field

Now you are ready to search for your custom field.mceclip12.png

  1. Search for the custom field using the search box in the top right corner of the Model Fields container.
  2. Tick the checkbox next to the field.

STEP 5: Move the field

Now that you have found your field you can move it to the position that you want it to be displayed.

  1. Select the field and drag it where you would like it to be displayed.

STEP 6: Save and check

Finally, save your work and check to see that it appears correctly on the page. 

  1. Click Save from the top right corner of the page.
  2. Upon refreshing the page, the custom field will be visible in the UI.

STEP 7: Repeat for the Edit page

If you do not want the field to be editable, you do not need to do this. In most cases however, the field will need to be editable and you will need to add the custom field to the Edit page that corresponds to the View page you've just worked on. Remember to make sure the Edit page has been cloned as well.

  1. Follow steps 1 to 6. Add the custom field in the same position as you did for the Basics view.
  2. Click on Edit and confirm your changes have come through on the Edit page as well. If not, check that your menu is pointing to the correct cloned pages. 

 

 

 

 

 

0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.