Skuid SFX is now Nintex Apps!

Legacy terminology may appear as we update our documentation.

Basics of the Skuid Mobile Builder

Warning

As of November 2016, the mobile composer has been deprecated. What does this mean?

  • App builders with deployed mobile apps will continue to have access to the mobile composer and able to update pages in those mobile apps.
  • With Skuid v11, new users (and those with no mobile pages) will have no access to the mobile composer. Unpacking a page pack containing Skuid Mobile pages will re-enable the Mobile Composer option.

Skuid strongly advises using the unified Composer.

Return to mobile composer index.

At Skuid we use Skuid to build Skuid. (Confused yet?) The Skuid Mobile Page Builder is itself built with the Skuid Mobile tools. So things are going to be slightly different than the Skuid you have come to know and love, but you’ll get it fast enough…

This also means that you can build and modify Killer Skuid Mobile Pages on your mobile device. How cool is that !!

Overview:

The Mobile Page Builder is has 3 main sections:

  • Builder Navigation Panel
  • Main Workspace Panel
  • Properties Definition Panel

We will describe each in turn….

Builder Navigation Panel

image0

Builder Navigation Panel. You always have access to the basic 4 areas where you will build your mobile page. The four icons at the left will always display. Click on any of the items to expose a list in the left flyout.

  1. Models: The data connections that drive Skuid pages. Expanding the models section shows existing ones so they can be defined by adding fields and conditions. Expanded Models to see the “add” icon and create new models.
  2. Headers and Footers: These components appear glued to the top and bottom of the mobile experience as headers and footers. Expanding this section shows the two components that have been created by default and allows their appearance and function to be defined.
  3. Page Panels: These components are the basic structure of the mobile page. Expanding this section exposes a list of the Page Panels and allows their appearance and function to be defined. A Main Panel and a Left Flyout Panel are created by default, but more can be added.
  4. Resources: Customization resources. This section is the same as standard skuid. Expanding the Resources section enables the ability to include customized labels for internationalization, javascript for additional interactivity and CSS to override the standard look of Skuid.

Main Workspace Panel

Click on items in the Builder Navigation to expose the main panel with details about the model, component or resource. This workspace is where most of your activity will occur. It will show the following:

Models

image1

The workspace shows details of the model you are building. At one glance you can see the list of fields and conditions that make up the model.

  1. Add Fields by selecting the check box. Selected fields are blue. Notice REF fields allow you to link through to related objects, and show how many fields have been selected from those objects.
  2. Selecting the “S” at the top of the fields filters the view to only show selected fields. Search to filter on field name.
  3. Manage the space you need for viewing fields by selecting the carats at the right of the conditions bar
  4. Add new conditions by selecting the plus button

Headers, Footers and Page Panels:

image2

The workspace show the details of what you have built on this panel or header/footer. Because components are often nested - this doesn’t look exactly like the final page, but at one glance it shows you how the panel is put together, and gives you access to details about each component.

Moving Components: Click and hold a component to expose move handles.

image3

Select the move handles and drag the component around on the page:

image4

Resources

image5

The resources list is divided into Labels, Javascript and CSS sections. Selecting any element exposes a workspace where the resource can be defined.

Properties Definition Panel

image6

When you select any elements in the main workspace, properties will be exposed in a left panel fly-out. This fly-out will overlay the builder navigation panel. The element selected in the workspace stays highlighted in blue.

Property panels will display for model fields, model conditions, page components, etc.

In this picture above the Deck has been selected in the main panel (turning it blue). All the available properties for the panel are exposed on the side. Each component will have different properties that can be set. Examples include:

  • Grid properties: Max number of columns, min width etc.
  • Add Components: The items that can be nested inside the current component. Double click on these to automatically add them to the bottom of the currently highlighted component, or drag them into the page.
  • Interactions: Add interactivity to your page by connecting gestures like Tab or Pinch to actions like “reload model” or “redirect to another page”
  • Remove: Generally under the “other” section of properties, you will find the ability to remove the component.