Friday, June 27, 2014

Slide Panel for App Navigation

This feature, on the Design screen, creates a "panel" containing a list of links that slides into view from the left side of the screen. You might use it to create a "table of contents" panel as an alternative to using an entire page as a table of contents, like the one shown below.


Here's a page with a "Show Slide Panel" button.



Tap the button and the slide panel slides into view from the left and contains the table of contents, shown below.



Tapping either of the links opens the target page, as shown below.



The Home icon in the upper left corner of the screen jumps users back to the page where they began.
Creating a slide panel is a simple, two-step process - defining the panel and invoking it.

Defining the Slide Panel


Here's the slide panel properties dialog box.




Slide Panel ID is the name by which ViziApps refers to the field programmatically, such as slide_panel_home_page. This entry is required.

Select Background Color lets you set the panel color.

Page Names To Go To lets you specify the names of pages to open when the user taps the corresponding Menu Names Displayed entry.

Menu Names Displayed is the entries that appear on the panel.

Note: The implication of these two properties is that you've already defined and created the app pages.

Here's the completed Slide Panel Properties dialog box for the sample slide panel at the top of this topic.




Here's the resulting slide panel, with options Neil A and Neil B and a yellow background color.



When you finish creating the slide panel, you'll see the slide panel icon on the canvas, shown below.



Users won't see this icon. It only displays on the canvas during development.

Invoking the Slide Panel


You can invoke a slide panel from a button or image button. Just create the button and set the action to Show Slide Panel and specify the panel. The Button Properties dialog box shown below creates the green Show Slide Panel button on the home page shown at the top of this topic.



All the options are standard button options except for the action, for which you select Show Slide Panel and specify the panel (which means you can create different slide panels for use at different places in your app).

No comments:

Post a Comment