Create and Customize Skuid Pages

You can create pages in Skuid in several different areas:

  • From the Pages screen:
    1. In the Skuid navigation bar, click Pages.
    2. Click Create.
  • From the Resources screen:
    1. In the Skuid navigation bar, click Help > Resources.
    2. On the Resources page, click Create a page.
  • From a module’s detail screen:
    1. In the Skuid navigation bar, click Pages.
    2. Click a module in the Modules list, on the left side of the Pages screen.
    3. 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 SFX can use letters, numbers, underscores, and dashes. Page names for Skuid NLX 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 principal page: Use this if you are creating a dependent 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 principal and dependent 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 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 principal page (to create a dependent page)[[]]

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

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

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

Note

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

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

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

See an example of creating principal and dependent 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 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

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 SFX

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

Configure Access [[]]

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

From this Salesforce page you can add new sharing rules or view reasons users currently have access.

Properties

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

Page properties

General tab [[]]

  • Page name: The name describing the page.

    Note

    Page names on Skuid SFX can use letters, numbers, underscores, and dashes. Page names for Skuid SFX 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.

  • 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 principal and dependent 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: Limits the number of auto-save revisions that can be generated. These types of revisions are created each time a Skuid page is saved. Once this limit is reached, auto-save revisions are deleted—oldest first.

    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.

  • ARIA role: Determines which type of user interface element the component represents for assistive technology. The available options all refer to standard landmark ARIA roles. For more technical information on each role type, refer to MDN web docs.
    • Banner: Used for defining global site details, such as company name, global search, logos, and similar information.
    • Complementary: Used for content that, while related to the main content area, is not necessary for that main area to stand alone. Typically used for sidebars and other supplementary information.
    • Content Info: Used for footers that appear on each page, which typically contain copyright information, navigation items, or similar content.
    • Form: Used to identify sections that comprise a singular form–even though it may be comprised of multiple components.
    • Main: Used to identify primary focus of the page.
    • Navigation: Used to indicate a section containing links for navigating a site.
    • Region: Used as a more generic landmark in order to indicate an area is relevant, but not categorized under the other available roles.
    • Search: Used to indicate a section contains elements for searching the page or site.
  • Design system: The name of the design system that governs the page’s styling.

    Several options are available in the dots-vertical Open design system options menu:

    • View: Opens the page’s design system in the Design System Studio.

    • Change: Changes the page’s design system. Once a new design system is selected, click Confirm to complete the change.

    • Refresh: Syncs the page’s available design system options with any recent changes made to the design system. Useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

      Note

      It’s also possible to refresh design system options by clicking refresh Refresh style variants beside the Style variant property within a component’s Styles tab.

  • 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 principal page: When checked, the page can be selected as a principal page when creating new pages.

  • 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 Salesforce Classic header and Show Salesforce Classic sidebar: When checked, the page displays the standard Salesforce header or sidebar when viewed in Salesforce classic. (Unchecked by default.)
  • 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 General tab.

To learn more, see Create a principal and dependent page, which employs a custom header and footer in the principal page.

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 then select:

  • Action type: Determines the type of user interaction that triggers the action script.
    • Right-click: The right-click interaction will launch the actions added here. A common pattern is to create a customized context menu by using the Show/hide menu action.
      • Disable the browser’s default menu?: Override the browser’s context menu for the Skuid page, component, or element. If the browser’s context menu is not disabled, then the actions will run while the browser’s context menu appears on screen.

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

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.

    Note

    To refresh available style variant options, click refresh Refresh style variants.

    This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

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

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.