Create and Customize Skuid Pages

You can create a Skuid page from three different locations:

  • From Skuid Central, click Create a page.
  • From the Pages screen, click Create New Page.
  • From the Navigation bar, hover over Compose and click fa-plus-circle New Page.

No matter which entry point you use, when you create a new page, Skuid opens the Create New Page dialog, where you define the 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.
  • Skuid 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.
  • Starting Point: There are several starting points for Skuid pages. (These options are covered in detail in the sections below.)

    • Start with blank page
    • Use a page template (Not available in Skuid Platform.)
    • Use a Master Page
    • Paste XML from a prebuilt page
    • Upload XML file

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

Page Starting Points

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 fa-check Create Page.

Once the page opens, start building!

Start with a page template [[]]

Creates a Skuid page using a Skuid-provided page template. Each template has a set of pre-filled components designed for the template’s purpose, described in more detail below.

Note

This feature is not available in Skuid Platform.

  1. From the Create new Page (Page Setup) dialog , select Use a page template.

  2. Click fa-arrow-right Select Page Template.

  3. In the Create new Page (Use a Page Template) dialog, under Select Page Template, select one of the following:

    • Object list / tab page, e.g. list of Opportunities: This template creates a page pre-populated with Page Title and Table components displaying fields from a model on the selected object from the selected data source. (Intended to serve as a record overview page.)
    • Record detail page, e.g. Account Detail: This template creates a page pre-populated with Page Title and Field Editor components displaying fields from a model on the selected object from the selected data source. (Intended to display more details for individual records than an overview page.)
    • Page for creating a new record, e.g. a new account or new contact record: This template opens a page pre-populated with Page Title and Field Editor components displaying fields from a model on the selected data source. (Intended as a page exclusively for creating single, new records in the chosen object’s data.)
  4. In the Create new Page (Use a Page Template) dialog, under Data Source, select:

    • Data Source Type: A picklist of available types of data sources.

    • Data Source: A picklist of data source’s on the org that match the data source type.

    • Primary Object: A picklist of the objects available from the selected data source.

      Note

      The template will be built around this object.

  5. Click fa-check Create Page.

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 typing in the field next to Master Page. Skuid begins to autofill a dropdown with selectable options.
  2. Click fa-check Create Page.

Want to see the list of child pages associated with a particular master page? Open the master and click 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 Compose > New Page.

  3. Select Paste XML from a prebuilt page, and then click fa-check Paste XML.

  4. In the Create new Page (Paste XML from pre-built Page) dialog, paste the copied XML into the Page XML field.

  5. Click fa-check Create Page.

    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 users or downloaded from elsewhere—this option allows you to search for that saved XML file and upload it.

  1. Select Upload XML file, and then click fa-check Upload XML.

  2. In the Create new Page (Upload XML) dialog, click fa-cloud-upload Upload to search for the saved XML file.

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

  4. Click fa-check Create Page.

    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.

  • Use the navigation bar (Compose > All Pages) to open the page list, then click fa-cogs Edit Page next to the desired page.
  • When a page is open in Preview, click the fa-sliders Edit Page tab that slides out from the left side.

Preview a Page [[]]

To see how a page looks to a 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.

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 fa-caret-down next to More Page Actions.
  2. Select Clone.
  3. 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.

Delete a Page [[]]

There are two ways to delete a page:

From the Page list [[]]

  1. From the Skuid navigation bar, click Compose > All Pages to open the page list.
  2. Navigate to the desired page and click the checkbox at the head of the line containing that page to select it.
  3. Click the fa-caret-down next to fa-pencil-square-o Mass Update Selected Rows and select fa-times-circle Flag Selected Rows for Deletion.
  4. Click Save.

From the Page itself [[]]

  1. Click the fa-caret-down next to More Page Actions.
  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.

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.

Skuid on Salesforce

If you are using Skuid on Salesforce, there are two additional options in the More Page Actions dropdown.

Share a Page [[]]

Click to set the Salesforce sharing permissions for this particular Skuid page.

Generate Support File [[]]

Need to create a support file for the page? Click Generate Support File.

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.

  • Theme: The name of the theme that governs the page’s styling. Choose from the dropdown. All pages are initially set to the Default theme upon creation, which is set from Design > Theme Assignments in the the Skuid navigation bar.

  • Warn users if page has unsaved changes: If checked, when a 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 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 module.

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

Click add Add Interaction and then select:

  • Action Type: To initialize the action, choose from three possible interactions:
    • Click: Best for desktop, as well as mobile.
    • Swipe: Best for mobile. Direction options include:
      • Either (direction)
      • Left
      • Right
    • Press: Best for mobile.

Then, click add Add action to the selected interaction and configure.

Styles tab [[]]

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 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 two additional tabs.

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 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 fa-plus-circle 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.

Caching [[]]

When caching is enabled, Skuid caches the generated HTML source for the page, which can speed up page load time.

  • Enable Page Caching: When checked, caching is enabled.
  • Page Cache Longevity (in seconds): How long before the cached version expires and needs to be refreshed. The default is 600 seconds (10 minutes).

Note

If you are actively developing this page, your changes will not take effect until the cache is updated. Skuid recommends you don’t enable page caching until you’re done developing the page.

If you do enable page caching, you should set your models to be processed client-side to prevent stale data and metadata from being presented to users. Skuid recommends you confirm this option.

To check that caching has been enabled on the model, click the model and navigate to the model’s Advanced tab in the Properties pane. Process Model client-side should be checked.