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

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.

principal and dependent pages [[]]

The Index for a principal page only includes items that are present on the principal 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 dependent pages.

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

Note

As with all dependent pages, principal 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 principal page items, open the principal 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.)