--- 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, App Builder, Page Builder] nav: wcp_docs parent_url: /wcp_docs/ title: Add Pages in Visual Mode layout: subsection --- ### Prerequisites Create or open an Extend app in App Builder. ### Context App Builder's Visual mode enables you to create pages for your app by adding tags and adjusting their attributes in an intuitive graphical interface. You can also use Visual mode to create scripts for your pages. This method is faster and less potentially error-prone than manually entering PMD code. All of the tags that are available in Code mode are also available in Visual mode. ### Steps 1. In App Builder, use the toggle switch in the upper right of the interface to ensure that App Builder is in Visual mode. 2. Click Add Component in the components panel. Select the Page type and provide a Name. Each page has Presentation, Page Load, Page Submit, Scripts, and Advanced tabs. When you create page elements on these tabs, App Builder creates the appropriate PMD code in the background. To view the code, use the toggle switch to return to Code mode. 3. On the Presentation tab, select the required Page Type, View, Edit, or Confirm. See [Concept: Page Types](/wcp_docs/zrd1553321160092.html). 4. The Presentation tab has divisions for the page's Title, Body, Tabs, and Footer. To add a tag, click the appropriate plus symbol. Body and Tabs tags have various types. Select the appropriate one. Examples: click the plus symbol to add a Body tag, then select the Section type. Note: When you create a new page, App Builder automatically adds Text and Rich Text children to the Body and Footer tags, respectively. 5. Each tag's attributes are displayed beneath it. Adjust them as required, adding child tags where necessary. See [Reference: PMD Tags](/wcp_docs/dyg1528862158582.html) for detailed information. By default, App Builder displays populated attributes for a tag in a condensed view. You can edit, add, and remove attributes from this view. To expand the view and see all of the tag's available attributes, click the chevron icon on the top left of the card. The Show all attributes toggle switch enables you to view all of the attributes associated with a tag or just those that you have populated. 6. On the Page Load tab, click Add Inbound Data and select REST Endpoint or Graph Endpoint as a source for incoming data. You can add multiple inbound endpoints. 7. Provide a Name to serve as an alias for referencing the endpoint's data. 8. Select the HTTP Method you want to use. The available methods are: - `Get` - `Post` - `Put` - `Patch` - `Delete` 9. Provide a complete URL or combine a Base URL Type, as defined in your App Metadata component, and a partial URL. 10. Use the tabs to configure your HTTP request to the endpoint, as described in this table:

Tab	Description
Query	(Graph endpoints only) Reference a Graph Query Component by providing its Query ID. Provide Parameters as key/value pairs. The key is a static string containing the parameter name, which should match the name in `parameters[]` inside the Graph Query component. The value is an object containing the parameter value, which can be a native JSON map or a script that returns a map. Provide Variables as key/value pairs. The key is a static string containing the variable name, which should match the $placeholderVariable in the query. The value is an object containing the variable value, which can be a native JSON map or a script that returns a map.
On Send	Provide a script for execution before the HTTP request is sent.
Authentication & Headers	Specify the endpoint authentication scheme by the ID defined in the Site Metadata, and provide headers for inclusion in the request.
Body	(REST Endpoints only) Specify variables, using the Value field to provide a value and the Outbound Path field to provide a name.
Error Handling	Response Error Detail Enables the display of error messages returned by endpoints. In the Errors field, provide a list binding of the error details from the endpoint. In the Error Summary field, provide a string binding of the endpoint response field containing the summary of the error. Fail On Status Codes Provide an HTTP status Code that must be treated as an error and routed to an error page. Optionally, provide a reference Code Name. Ignore Failures Provide an HTTP status Code that should be ignored and not routed to an error page. Optionally, provide a reference Code Name.
Settings	Optionally add attributes that have these effects when selected: Deferred: Endpoint not called on page load but can be invoked from a script. Exclude: Endpoint isn't called on page load and can't be invoked from a script. Best Effort: Page doesn't throw an error when a widget encounters an error but continues to load without that widget. Is Collection: Calls the endpoint with a page size of 100, and creates a data collection with iterative endpoint requests until the data collection contains the total number of rows. Assumes that the endpoint has the `limit` and `offset` parameters for pagination Search: Attaches query parameters to the URL. Select only if you use the endpoint for a faceted search.

11. In the On Load box, enter script text that executes when the page loads and the incoming data is consumed. 12. On the Page Submit tab, to ensure that the OK and Cancel buttons don’t display on the page, select the Standard Edit Buttons Hidden check box. 13. By default, the Cancel button on an edit page navigates to the previous page. To define an alternative, select a page from the Task ID drop-down list. In the Parameters field, provide a binding to a map object containing parameters sent to the specified page. In the Parameter Bindings field, provide key/value pairs where the key is a static string that identifies the parameter value in the destination page and the value is binding string that contains the parameter value. 14. In the On Submit box, enter script text that executes in response to user interaction. 15. Click Add Outbound Data and select REST Endpoint, Outbound Variable or Graph Endpoint as a target for outgoing data. You can add multiple outbound endpoints. 16. For an Outbound Variable, provide a Name and select a Variable Scope, Flow or Session. Flow variables are available during the lifecycle of a page flow. Session variables are available during the lifecycle of a user session. 17. For a REST Endpoint or Graph Endpoint, follow the instructions in steps 9 and 10 above. 18. On the Scripts tab, from the Include drop-down menu, select scripts from your app to include in your page. 19. In the Script box, enter the script text for functions that can be called within other script blocks in this PMD. See [Reference: PMD Scripting](/wcp_docs/jab1582081565510.html) for detailed information. App Builder automatically encloses your scripts within `<% %>` notation in the background. You don't need to add the symbols here. 20. On the Advanced tab, select up to 3 Security Domains to secure your page. See [Steps: Secure the Pages of an Extend App](/wcp_docs/sfv1677268046417.html) for detailed information. 21. Select a Preferred Label Position for your widget labels: - Atop: The labels display on top of the widgets. - Aside: The labels display on the left of the widgets. - Amiss: The labels don't display. 22. If you want your page to display as a popup window, select the appropriate check box in the Micro Popups section: - Micro: The page displays as a popup window in the edit flow. - Micro First Page Only: The first page displays as a popup window. The next page in the edit flow displays in full. - Micro Conclusion: Displays a confirmation window at the end of an edit flow. 23. In the Application Exceptions section, configure a custom error or warning message to display if the page encounters an exception during page load. ### Related Information [Tutorial: Advanced Pages with Visual Mode](https://wd5.myworkday.com/workday/learning/course/fd85e31bcb1010009eef3a82128a0000?type=9882927d138b100019b928e75843018d)