---
category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend]
keyword: [Extend, Presentation Components, widgets, tags, UI components]
nav: wcp_docs
parent_url: /wcp_docs/
title: >- 
  Concept: Displaying Widgets
layout: subsection
---

## <a id="section_i5c_ffs_kpb"></a>Widget Appearance

The appearance of a widget depends on the type of page:

-   On a view page, a widget displays as a non-editable widget. Example: A text widget on a view page displays as a label.
-   On an edit page, a widget enables a user to enter or change its value. Example: A text widget on an edit page displays as an editable text field.


To display the non-editable version of a widget on an edit page, set the `enabled` attribute of the tag to false.

## <a id="section_tyr_mvk_qjb"></a>Widget Groups and Order

A page displays widgets based on the order of the coded tags in the `presentation` section of the PMD. Because the page loads the widgets sequentially, you must place any dependent tag after its referenced tag.

You can streamline the display of the widgets on a page by grouping the widgets. You can group the tags on a page by using either or both of these container tags:

-   `section` - Vertically (default) or horizontally groups the widgets on the page layout.
-   `fieldSet` - Adds a title to a group of widgets that can be collapsible. Also use `fieldSet` to group related widgets whose values or attributes have dependencies with each other.

    <b>Note:</b> Avoid nested fieldsets and minimize the dynamic visibility of the children widgets. Nested fieldsets can easily introduce complex layers of dynamic visibility that cause inefficient rendering of the widgets.



This snippet demonstrates a combination of vertical and horizontal sections on a page.

```
{
  "type": "section",
  "horizontal": true,
  "sorted": false,
  "children": [
    {
      "id": "charitiesLoop",
      "type": "loop",
      "on": "<% charities.data %>",
      "as": "charity",
      "children": [
        {
          "type": "section",
          "horizontal": false,
          "sorted": false,
          "children": [
            {
              "type": "richText",
              "value": "<h1><% charity.descriptor %></h1>"
            },
            . . .
            {
              "type": "section",
              "horizontal": true,
              "sorted": false,
                "children": [
                  {
                    "type": "button",
                    "action": "PRIMARY",
                    "label": "Donate",
                    "taskReference": {
                      "taskId": "donate",
                      "parameterBindings": {
                        "charityId": "<% charity.id %>"
                      }
                    }
                  },
                  . . .
              ]
            }
          ]
        }
      ]
    }
  ]
}
```

The sample section uses a `loop` tag to display a section horizontally for each charity. Each charity section displays the charity data on vertical widgets, and horizontal buttons for donating and viewing details.

You can override the coded order of tags in the PMD and dynamically reorder the widgets within a `section` or `fieldSet`. To reorder the widgets within a `section` or `fieldSet`, set the `sorted` attribute to true, and set the `sortOrder` attributes of the child tags. The `sortOrder` attribute enables tag dependencies to work when the order doesn't match the order of the tags in the PMD.

## <a id="section_cqh_4vk_qjb"></a>Widget Visibility and Rendering

You can streamline the display of the widgets by controlling their visibility. You can minimize the page load time by rendering widgets only when needed.

To control the visibility of a widget:

1.  Add the tag to a `fieldSet`.
2.  Conditionally set the `visible` attribute of the tag. When you set `visible` to false, the page adds the widget upon rendering the page, but hides the widget and its content from the user. If `visible` is false, other widgets can still reference the hidden widget. Conditionally setting the `visible` attribute is helpful when you want to display a widget only when it's needed to keep the page cleaner and streamlined.

    This sample `text` displays only when there's no data:

    ```
    {
      "type": "text",
      "id": "noCharitiesMessage",
      "value": "There are no Charities available for donation at this time.",
      "visible": "<% empty(charities.data) %>"
    }
    ```



To control the rendering and addition of a widget on a page, you can conditionally set the `render` attribute. When you set `render` to false, the page doesn't add the widget upon rendering the page. Consequently, the widget doesn't exist on the page and other widgets can't reference the unrendered widget. Conditionally setting the `render` attribute is helpful when you want to exclude a data-heavy tag to improve page performance. Example: You have a flow definition in which a user selection on a page determines whether or not the next page needs a grid. Instead of simply hiding the grid from the page, set `render` to false to exclude the grid entirely from the page. The unrendered grid can improve the performance of the page load.

This sample `image` renders only when there's a charity image:

```
{
  "type": "image",
  "sizingHint": "INLINE",
  "endPoint": {
    "url": "charityImages/<% charity.image.id %>",
    "baseUrlType": "app",
    "authType": "sso"
  },
  "render": "<% (!(empty(charity.image))) %>"
}
```

### Related Information

[Concept: Displaying Data](/wcp_docs/qau1572291138966.html)

[Concept: Submitting Data](/wcp_docs/rmd1572291186381.html)

[Tutorial: Build PMD Page Layouts](https://wd5.myworkday.com/workday/learning/course/86148bed8558101562ab17d35ee10000?type=9882927d138b100019b928e75843018d)

[App Catalog: Charitable Donations](/app-catalog/charitableDonations)

[App Catalog: PMD Widget Dictionary](/app-catalog/pmdWidgetDictionary)

[App Catalog: PMD Scripting](/app-catalog/pmdScripting)