Create and Customize Skuid Pages¶

Start with a blank page [[]]¶

Starting with a blank page means that the page will have no associated models and no pre-loaded components.

When creating blank pages:

1. Click Create.

Once the page opens, start building!

Use a Master page (to create a child page)[[]]¶

Create a Skuid page from a master page. Master pages function like templates for their child pages, allowing builders to brand all connected pages with specific colors, images, and content. Master pages can contain two types of content:

• Components, images, and other content that displays consistently in all child pages built from the master page. This content cannot be modified from the child pages.
• A Page Region component. This component identifies the portion of the page that can be modified from the child page, allowing the builder to add page-specific content.

When you create a Skuid page from a master page, the new page—called a “child page”—inherits the models and components that are on the master. You can then add page-specific models and components directly onto the child page.

Note

You must have a previously-created master page available to select this option.

1. Select the master by clicking Apply master page. Skuid opens an entry field. Start typing the name of the master page into this entry field and Skuid begins to autofill a dropdown with selectable options.
2. Click Create.

Want to see the list of child pages associated with a particular master page? Open the master and click add-user Child Pages. Skuid opens a popup window listing of all child pages. You can also create a child page from this popup by clicking add Create New Child Page.

See an example of creating master and child pages.

Paste XML from a prebuilt page [[]]¶

This option allows you to paste the XML from a working page into a new one.

1. Copy XML from the desired source.

2. From the Skuid navigation bar, select Create.

3. In the Create new page modal, click XML options.

4. Click Paste XML.

5. Skuid opens an input field. Paste the copied XML into the field.

6. Click Create

   Note

   If the uploaded XML includes a model attached to a data source that is not present in the current site, Skuid will invite you to Reassign invalid data sources.

   For each invalid data source, Skuid provides the Current (invalid) data source, and allows you to select a possible replacement from a Replacement data source picklist. Select a data source that matches the intent and service of the original page’s as closely as possible.

You can also click Find Sample Pages to search through samples available in Skuid’s Sample Pages GitHub repository. Follow the instructions at that site to open the desired page, copy its XML, and then paste the XML into the entry field.

Upload XML file [[]]¶

If you have a Skuid page saved as an XML file on your machine—perhaps to share with other builders or downloaded from elsewhere—this option allows you to search for that saved XML file and upload it.

1. From the Skuid navigation bar, select Create.

2. In the Create new page modal, click XML options.

3. Click Upload XML file, and then click Browse to search for the saved XML file.

4. Select the file from the list, and click Open.

5. Click Create.

   Note

   If the uploaded XML includes a model attached to a data source that is not present in the current site, Skuid will invite you to Reassign invalid data sources.

   For each invalid data source, Skuid provides the Current (invalid) data source, and allows you to select a possible replacement from a Replacement data source picklist. Select a data source that matches the intent and service of the original page’s as closely as possible.

Edit a Page [[]]¶

There are two ways to open a page for editing.

• Click Pages on the navigation bar to open the page list, then click dots-vertical on the desired page. Select Compose from the menu.
• When a page is open in Preview, click the edit-page Edit Page tab that slides out from the left side.

Preview a Page [[]]¶

To see how a page looks to an end user, click Preview in the App Composer. A runtime version of the page opens in a separate tab. You can also use the keyboard shortcut Ctrl+P, or ⌘ +P to preview the page.

Revisions [[]]¶

Revisions are like “snapshots” of the page, taken at different points in its development. They can be used to rollback a Skuid page to a previous point in the development process. Learn more about Page Revisions.

Clone a Page [[]]¶

Cloning a page makes an exact copy of the page. This can be handy when:

• Experimenting with new features or layouts—try the options out in a clone without affecting live pages.
• Sharing complex pages within an organization.
• Troubleshooting (clone the page, find the problem, and then apply the solution to the original page.)

From the page you’d like to clone:

1. Click the chevron-down next to Revisions.
2. Select Clone.
3. Give the new clone a Page name.
4. Click Create Cloned Page.

After cloning the page, Skuid asks if you want to open the cloned page or stay on the original one. If you choose to open the clone, it opens in a new window, ready to be edited.

Download a Page as an XML file [[]]¶

This option downloads a page’s source XML as a file. Having a page XML file is useful for:

• Maintaining backups of your page.
• Moving pages from org to org.
• Creating new pages.

From the page you’d like to download:

1. Click the chevron-down next to Revisions.
2. Select Download as XML file.

Once the download is complete, you will see it in your downloads folder.

Delete a Page [[]]¶

There are two ways to delete a page:

Skuid on Salesforce¶

If you are using Skuid on Salesforce, there is an option in the Revisions dropdown.

General tab [[]]¶

• Page name: The name given the page when it was created.

• API version: The API version the page is built on.

  Note

  The API version selected at page creation determines the features available to the page. You may only use the components associated with a page’s API version. Also:

  • The API version of both master and child pages must match.
  • The API version of a host page must match the API version of the Page Include component calling that page.

• Page title: The content used in a browser’s title bar or on a tab label. (Optional)

• Max auto-Saves: An auto-save revision is generated each time a Skuid page is saved, allowing builders to undo recent changes. The number of auto-saves a page can generate is limited by the Max auto-saves property. Auto-save revisions are deleted—oldest first—once the page reaches this Max auto-saves limit.

  Note

  Despite the name, Skuid pages do not automatically save as they would in a productivity app, like Microsoft Word or Google Docs. Clicking the Save button generates an auto-save that is available to you as a page revision.

• Design system: The name of the design system that governs the page styling. Choose from the dropdown.

• Warn users if page has unsaved changes: If checked, when a end user tries to close the page when there are unsaved changes, Skuid issues a warning.

  • No
  • Yes (default)

• Personalization mode: Indicates where user personalizations—remembered settings like selected tabs, filter values, etc.—are stored.

  • Client-side: Use for non-authenticated users (visitors to a public-facing website, community and portal users).

    Note

    Even if server-side is chosen for the page, non-authenticated users are defaulted to client-side storage for personalizations.

  • Server-side: Allows Skuid to sync user personalizations across multiple devices. (Default)

• Available as a master page: When checked, the page can be selected as a master page when creating new pages.

Skuid on Salesforce only [[]]

Layout tab [[]]¶

To learn more, see Create a Master and Child Page, which employs a custom header and footer in the master page.

Interactions tab [[]]¶

Click add Add interaction then select:

• Action type: To initialize the display of the record details, choose the interaction:
  • Click: Best for desktop, as well as mobile.

In the dots-vertical More Options menu on the selected interaction, click Add action, then edit the Action Type:

• Action Type: Use the Action Framework to launch actions.

Styles tab [[]]

Styles tab [[]]¶

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

• Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

Skuid Platform only

Skuid Platform only¶

Skuid Platform includes two additional tabs.

Skuid on Salesforce only¶

Skuid on Salesforce includes one additional tab.