---
nav: wcp_docs
parent_url: /wcp_docs/
title: Display Information on a View Page
layout: subsection
---
Module length is approximately 30 minutes
## Before You Begin: Create an Account on the Workday Build Platform
To do this activity, you must have an account on the Workday Build platform and a development tenant. If you’ve already created an account and a tenant, you can go to the first task of this activity.
If you haven’t already created an account, you can do so now. It’s free!
1. Go to the [Workday Build Platform](https://developer.workday.com) and create an account with your personal email address.
2. Once you have created an account, sign in to the [Workday Build Platform](https://developer.workday.com).
3. In the upper-left corner, select the hamburger menu, and under Console, select Tenants.
4. On the Tenants page, select Create Tenant. It will take 1 to 2 minutes for the development tenant to be created.
5. Check your personal email for a link to change your tenant password.
Note: Remember the password. You’ll need to sign in to the tenant while you do this activity.
6. Sign in to the tenant with the username lmcneil and the password that you just created.
Note: When you sign in to the development tenant with the username lmcneil, you’re signing in as the persona Logan McNeil. Logan is one of several user accounts that you can use to test the agents and app that you create and deploy to your development tenant.
## Task #1: Create an App
Let’s start by creating an Extend app and examining the presentation components that you’ll configure to define the app’s user interface (UI).
1. Download the [changeWorkLocationStarterCode.zip](GUID-700468c6-0c57-485e-9152-cf98480ad54c.zip) ZIP file.
2. Navigate to the [Workday Developer Site](https://developer.workday.com/) and select Build an Extend App.
3. Select Upload a Zip File.
4. In the Name field, enter Change Work Location App. You’ll see that the Reference ID is populated automatically based on the name you give the app.
5. Select, or drag and drop, the [changeWorkLocationStarterCode.zip](GUID-700468c6-0c57-485e-9152-cf98480ad54c.zip) file that you downloaded.
6. Select Create and Edit. This will open App Builder.
Using the starter code, you’ve created a new app that includes three presentation components: App Metadata (AMD), Site Metadata (SMD) and a page called changeWorkLocation. In the following tasks, you’ll use Extend presentation components to create a functional user interface for the app.
## Task #2: Add a Home Page
In this task, you’ll add a home page to the app. This will be the first page users we’ll see when they launch the app, so you’ll need to set it as the root page of the app.
1. In the Main Content panel, select Add Component:
1. In the Type field, select Page.
2. In the Name field, enter home.
3. Select Done.
2. In the left-hand Component panel, select the AMD component.
3. Near the top of the AMD component, find the “tasks”: [ ] array. The tasks array contains page declarations and their corresponding URL routing pattern. You’ll see there are two tasks that correspond to the pages in your app: changeWorkLocationand home.
4. In the home task, change the `routingPattern`to “/”. This makes the home page the root page of the app.
5. In the left-hand Components panel, under the Pages section, select the home page.
6. In the Page Type field, select View. A View page displays read-only information.
7. To preview the home page, select the App Preview icon, which is located to the right of the Visual toggle. This will open the App Preview Window.
8. You’ll see a simple page with a Title widget that displays “Workday Extend” and a Text widget that displays a Label (“Hello World!”) and underneath, a short string of text (“Welcome from Workday”).
9. At the top of the App Preview window, select MOCK DATA, select your development tenant, select Connect, and sign in to the tenant. This enables App Preview to display data from data sources in the tenant.
10. At the top of the App Preview window, to the left of the close icon, select the App Preview Pop-Up icon. This opens a new browser window and enables you to quickly toggle to a preview of the page to test your code changes.
11. Return to App Builder and select Save to App Hub to save your changes so far.
App Preview Pop-Out enables you to preview and test your code changes in a separate, resizable browser window directly from App Builder. By decoupling the preview from the main workspace, it enables faster iteration, side‑by‑side comparisons, and more realistic validation of how the app will look and behave for end users.
## Task #3: Add Buttons for Navigation
Now that you have two pages in your app, you need to create a way for your users to navigate between them. You can do this with the button tag.
1. Select the home page.
2. In the main content panel, hover over the area below the Text tag, and when it appears, select + Add Tag in Section.
3. Search and select button.
4. Expand the Button tag to show all attributes.
5. In the ID field, enter navToChangeWorkLocation.
6. In the Label field, enter Change Work Location.
7. In the Action field, select Primary. Primary is the type of button used for navigation.
8. Return to the button tag on the home page and select + Add Task Reference.
9. In the Task ID field, enter changeWorkLocation. Remember that task ID references the task in the AMD that defines the routing pattern for the changeWorkLocation page routing.
10. Select the changeWorkLocation page, hover over the area below the Rich Text tag, select + Add Tag in Field Set, and select Button.
11. In the button tag:
1. Set the ID to returnHome.
2. In the Label field, enter Return Home.
3. In the Action attribute, select Link.
4. Select + Add Task Reference, and in the Task ID field, enter home.
12. Refresh the App Preview and test the navigation:
1. On the home page, select the Change Work Location button. It should display the changeWorkLocation page.
2. On the changeWorkLocation page, select the Return Home link,
13. Select Save to App Hub.
## Task #4: Edit the Home Page
When you created the home page, App Builder generated PMD tags to define the layout and content of a simple page. PMD tags define:
- What appears on the page (examples: sections, titles, text, buttons, form fields).
- How those elements are laid out.
- How elements behave (examples: as read‑only on a View page. as editable on an Edit page).
1. On the upper-right corner of the home page, select the Visual mode toggle and switch it to Code mode. This will enable you to view and edit the JSON code.
- The presentation is a schema area where layout and content tags define the page structure and display content. In Visual mode, these tags appear under the Page tab.
- The body tag defines the main content area; it holds the core UI elements (text, form fields, buttons, sections, etc.) that users interact with.
- The footer tag defines the page’s bottom region, used for secondary or persistent elements such as action buttons (Submit, Cancel, Return Home), helper links, or legal/disclaimer text.
2. Look at the “title” tag and notice that it has two attributes:
- The type attribute specifies what kind of widget or layout element that tag represents. It tells the Extend rendering engine to render a page title.
- The label attribute defines the content to be displayed in the page title.
3. In the Title’s label field, replace Workday Extend with Change Work Location App.
4. Find the Text tag with id hello, select Text to change type, and search for, and select, Rich Text. A Rich Text tag enables you to format text using HTML tags.
5. In the Rich Text tag’s Value field, copy and paste the text below.`Welcome to the Work Location App. Select the Change Work Location button to get started.`
6. Hover over the Button tag, select and hold the waffle icon, and drag the button below the Rich Text tag, and drop it.
7. Refresh the App Preview icon and verify that your changes appear as shown in the image below.
8. Select Save to App Hub.
## Task #5: Add a Logo to the Home Page
In this task, you’ll use the Image tag to display a logo on the home page. The Image tag references a uniform resource identifier (URI) that points to a server where the image is stored.
You can display images via a Workday API endpoint that points to a standard or custom (Extend) business object that stores attachments, such as worker photos.
Alternatively, you can display images that are hosted on a third server. In this example, you’ll display an image hosted on [Wikimedia Commons](https://commons.wikimedia.org/wiki/Main_Page).
1. On the home page, hover over the area above the Rich Text tag, select Add tag in section, search for and select Image tag.
2. Expand the tag to show all attributes.
3. In the ID attribute field, enter logo.
4. In the Image Uri attribute field, enter the address where the logo is stored in Wikimedia Commons: [https://upload.wikimedia.org/wikipedia/commons/8/80/Workday_logo.svg](https://upload.wikimedia.org/wikipedia/commons/8/80/Workday_logo.svg).
5. In the Sizing Hint field, enter Thumbnail.
6. Refresh App Preview to check your code changes. The home page should look like the one in the image below.
7. Select Save to App Hub.
## Task #6: Get Data from a Workday API Endpoint
So far, you’ve used PMD tags to display static text and images. However, for the best user experience, you’ll want to create an app that dynamically displays data that is up-to-date and relevant to the user.
You can do this by calling a Workday or external API data source and bind it to a PMD tag.
In this task, you’ll add an Inbound Endpoint to the home page that will get the current user’s name. In the next task, you’ll dynamically display the user’s name in the home page’s welcome message.
1. At the top of the home page, select the Page Load tab and select Add Inbound Endpoint > REST endpoint.
2. Enter a name for the endpoint: getUserName.
3. The HTTP Method should be set to GET, which is the default.
4. In the Base URL Type, enter staffing. Staffing is the key of a data provider that is already declared in the AMD component.
Note: In the AMD component, the dataProviders array contains the base URL paths of the REST endpoints. When you create a key-value pair in the AMD’s dataProviders array, you can use the key to reference the base URL path from other components in your app.
5. In the URL field, enter /workers/me, where the key word me is used to indicate the current user’s id.
6. Select Authentication & Headers, and in the Auth Type field, enter sso.
7. Select Save to App Hub.
Note: Use [REST API Explorer](https://developer.workday.com/rest-api-explorer/overview) to create and test API endpoints.
## Task #7: Test the Endpoint with App Preview Pop-Up
App Preview Pop-Up enables you to quickly test the performance of a page, including API endpoints.
In this task, you’ll use App Preview Pop-Up’s Page State feature to verify that the getUserName inbound endpoint is returning the data that you want.
1. Open App Preview, if it isn’t already. Make sure App Preview is connected to your tenant. Select MOCK DATA and sign in to your tenant.
2. Select the App Preview Pop-Up icon to launch App Preview in a separate browser window.
3. At the bottom of the App Preview Pop-Out window, notice two tabs:
1. Scripts Console: Displays any console logs from any PMD script on the page. You can write and execute any PMD scripts against your current preview page for Edit Page Types.
2. Page State: Enables you to explore different values and data from variables, endpoints, and tags.
4. Select the Page State tab.
5. Select > endpoints and then select > getUserName. This shows you information about the Inbound Endpoint results. In this case it returns a worker object with fields containing the worker’s information.
If the getUserName endpoint worked correctly, you’ll see one object with a “descriptor” field containing the workers name. In this example, the worker is Logan McNeil.
## Task #8: Dynamically Display User’s Name on the Page
Let’s edit the hello Rich Text tag on the home page so that it welcomes the user by name:
1. Return to App Builder, select the home page, and select the Presentation tab.
2. In the hello Rich Text tag’s Label field, delete Home Page, and select the icon to change the field to a scripted value.
3. In the Label field, enter: 'Hello ' + getUserName.descriptor + '!'
4. Refresh the App Preview window to check your code changes. You should see a personal greeting, similar to the one in the image below.
5. Select Save to App Hub.
