Create and Customize Skuid Pages

You create a Skuid page from navigation bar:

  • Click Pages.
  • On the Pages list, click Create.

Note

You can also make a page by clicking Help > Resources from the navigation bar. On the Resources page, click Create a page.

When you create a new page, Skuid opens the Create New Page dialog, where you define the page:

  • Page name: A practical and descriptive name for the page, so you can find it as the list of pages grows. For example, Account_Details_Page describes both the data used (data from an Account object), and the page’s function (“details”).

    Note

    • Page names on Skuid Platform can contain letters, numbers, spaces, underscores, and dashes.
    • Page names on Skuid on Salesforce can use all of the above except spaces. Page names for Skuid on Salesforce form the basis of a URL; Salesforce allows the use of certain special characters in the page name provided they don’t interfere with the creation of a functional URL. To learn more, consult Salesforce’s documentation.
  • Apply master page: Use this if you are creating a child page.

  • Page API version: Select the API version the page will be 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 any pages called via a Page Include component must match the API version of the host page it is called from.
  • XML options: Use this upload an XML file or use XML from a Skuid page.

Once you’ve made your selection, click Create to begin building your page in the App Composer.

Page Creation Options

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.

Working with Pages

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.)

Note

Any page can be cloned, but if a cloned page is moved to a different org, the models may not work.

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:

From the Page list

  1. From the Skuid navigation bar, navigate to the page you want to delete, and click dots-vertical to open the menu.
  2. Click Delete.
  3. In the delete page modal, click Yes, delete this page.

From the Page itself

  1. Click the chevron-down next to Revisions.
  2. Select Delete.

Skuid will ask you to confirm or cancel the deletion.

Recovering Deleted Pages (Skuid on Salesforce Only) [[]]

If you accidentally delete a Skuid page, it may be possible to retrieve it—provided you are using Salesforce Classic. Since Skuid pages are stored as data records, check Salesforce Recycle Bin to see if you can undelete the page.

Skuid on Salesforce

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

Configure Access [[]]

Click to configure the Salesforce sharing access for this particular Skuid page.

Properties

(Just need to look up a property? Try going directly to the Property Library.)

Basic 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)

Note

This feature has no effect if the page is:

  • 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 [[]]

Skuid on Salesforce only [[]]

  • Tab to override: If creating a Skuid page, but still utilizing the Salesforce header UI, enter the name of your object’s tab here.

  • Owner: The page creator is automatically set as the owner. Select a name from the dropdown list to change a page’s owner. (You can also set a group as a page’s owner.

    Note

    This feature can be useful when employing field-level security to limit certain fields to access by specific end users.

  • Scale for Mobile Devices: Check to visually scale the page’s content and components to display more effectively on mobile devices.

  • Enable feedback on this page: When checked, users may submit feedback about their experience at runtime. (Checked by default.)

Layout tab [[]]

Layout tab [[]]

Note

Once a header or footer is enabled, click on it, and it:

  • can be styled from the Styles tab
  • components can be added to it
  • can be made “sticky” (it remains visible no matter how much a user scrolls through the page) by selecting Sticky in the Basic tab.

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

Skuid on Salesforce only [[]]

  • Show Salesforce Header and Show Salesforce Footer: When checked, the page displays the standard Salesforce Header or footer. (Checked by default.)

Interactions tab [[]]

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:

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.

Voice tab [[]]

  • Voice data source: The Skuid data source connected to the voice processing system to use for this page.
  • Chatbot name: The name of the chatbot to use for any voice commands entered by the end user.
  • Chatbot alias: The specific alias to use for the chosen chatbot (typically used to denote versions).

Native tab [[]]

Native tab [[]]

Skuid on Salesforce only

Skuid on Salesforce only

Skuid on Salesforce includes one additional tab.

Labels [[]]

For each custom label requested, Skuid will determine if there is a translation corresponding to the language of the end user viewing the Skuid page. If there is, Skuid displays the translated text to the user.

Note

It is considered a best-practice to use Custom Labels wherever displaying custom text to your users. Custom labels support effective localization.

To access custom labels:

  1. In the page properties, click the Labels tab.
  2. Click on add Add Label.
    • Label ID: Enter the label’s name as it appears in Salesforce’s Custom Labels page.

Note

To include a custom label in a template, use {{$Label.<LabelName>}}, e.g. {{$Label.Save}}.

For more information about using custom labels in Skuid, see Label Localization.