Create and Customize Skuid Pages

You create a Skuid page from navigation bar:

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

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.

The Page Index

The Page Index makes it faster and easier to find components and elements on a busy page. Displaying all page elements in an expandable/collapsible list, the Index allows builders to view components and the elements they contain, including:

  • fields (Table and Form components)
  • buttons (Button Set and Table components)
  • drawers (Table component)
  • images (Image and Masthead components)
  • sections (Form and Accordion components)
  • divisions (Responsive Grid component)
  • tabs (Tab Set and Tab Container components)
  • filters and filter sources, options, and effects (Filter Set and Table components)
  • modals and sliding panels
  • steps (Wizard component), navigation items (Navigation, Vertical Navigation, and Masthead, components), and actions

Navigate the Page Index

Click Index from the App Elements pane to access the Page Index:

|page-index-0|

Organization

Components and elements display in an indented “outline-style” format, with some items nested under the component or element that contains them. Each item includes its associated icon.

  • Use chevron-small-right to expand and chevron-small-down to collapse sections of the list.
  • If the component or element has “title” property, that name is displayed in parentheses next to the component’s label in the index.
  • Components, elements, modals and sliding panels that are part of actions are listed under the action.

Master and child pages [[]]

The Index for a master page only includes items that are present on the master page. This includes any components on the page itself, and the Page Region component (and any components or elements included in that Page Region). It does not include components or elements that are present on child pages.

A child page’s index, however, includes all master page items as well as the items present on the child page itself.

Note

As with all child pages, master page components and elements are read-only, meaning builders can see the item in the Index and on the page, but cannot edit it. To edit master page items, open the master page itself and revise there.

Select items

When you click an item in the Index, that item is selected and Skuid navigates to it on the canvas. Additionally, Skuid displays the item’s properties in the property pane.

  • If the component contains fields, click the field from the Index to navigate to it on the page canvas.

  • For container components/component accessories (such as the Responsive Grid, Tab Set, sliding panels and modals), components or elements nested within the container are listed within their respective division or section.

    • Click the division/section to navigate to the division or section on the canvas.
    • Click components within the division/section to navigate to the item on the page. (If the item isn’t always visible on the page, Skuid opens the container component to display the selected item.)

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

Page properties

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

  • Module: Allows the Skuid page to be added to a module selected from this dropdown list, which displays all modules registered within Skuid. For more information, see modules.

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

  • Show custom header and Show Custom footer: When checked, the page displays a custom header or footer, which are separate page elements than the main canvas.

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

For Salesforce Classic

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

Interactions tab [[]]

Adds interactions—actions from the Action Framework—to the page. Page-level interactions extend to the full page—a click anywhere on the page triggers the interaction.

Styles tab [[]]

  • Background: All Page background properties are the same as the Wrapper background section

Skuid Platform only

Skuid Platform includes two additional tabs.

Voice tab [[]]
  • Enable voice: When checked, the page can accept voice input through voice-triggered sequences. Once enabled, the following options are available:
  • 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 [[]]
  • Ask for user’s location before page load: Skuid will ask for the user’s location on page load. If location services are enabled on the user’s device, then their location may be used for app functionality through either native mobile actions or geolocation merge variables.

Skuid on Salesforce only

Skuid on Salesforce includes one additional tab.

Labels [[]]

Skuid allows you to use Salesforce custom labels, along with the Translation Workbench, to display user-facing text in each users’ preferred language. Learn more about creating custom labels in Salesforce.

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.