This tutorial is for the new, online project designer. The tutorial for the Desktop Designer is available here .

Button Point

Learn how the button point can be used and see it in action with the sample projects.

What is the Button point?

The Button point can be used to create a link to a page within the open project or to navigate to a website or a Url Scheme . This point is similar to the Link point except that it provides an additional option to specify a background image that will appear under the caption, simulating a pressable button when displayed on a mobile device.

Button points can be used to create an index page for the project which can greatly improve the productivity and experience for a large project. An example can be seen below.

Key Features

  • Can be used to link to a page within the current project.
  • Can be used to link to an external website, opened in the device's default browser.
  • Can be used to link to a URL Scheme to execute actions such as opening, sending, duplicating a session and much more.

Button point index animation ios

Configuration and Settings

The Button point can be configured in the designer to customise the point's appearance and behaviour when pressed. Below is an example of the properties window for a Button point, in the designer.

Button point web properties

Button Properties

This section allows you to change the label that is displayed on the button and set the actions that occur when the button is pressed which can be to go to a page in the project and/or to a URL. A URL can be used to open a website in the device's browser or to execute a URL Scheme which can process actions such as sending, opening, duplicating a session and much more. The button alignment can be set here too which determines if the button is presented on the left, center or right of the page.

Font Settings

The font settings can used to customise the appearance of the button's label, including the font, font size, colour, etc. There is a quick preview of example text to see how the label will appear.


Sample Projects

The following samples demonstrate how the Button point can be added to your projects to create links to pages and URLs. The provided sample project, button_point_sample.ppc , has several sections on the first page that demonstrate the different ways that the Button point can be used. The images used for the background of the Button points have been provided in the sample files.


Sample Projects
You can download the sample files for this tutorial or import the projects directly into your account.

Section 1: Linking buttons to pages

The first section on page one of the sample project demonstrates how multiple Button points can be used to simulate an index for the pages of a project. This can help with navigating through large projects when a session is being created on a mobile device. The Button for the current page is highlighted with blue text and has no linked action while the other Button points have been set to link to pages.

Section 2: Linking a button to a website

The second section of the sample project demonstrates how a Button point can be linked to a website. The Button point, ButtonToWebsite has been configured to link to the URL http://www.google.com which will open in the mobile device's default browser when this button is clicked.

Section 3: Linking to multiple actions

The third section demonstrates how a Button point can be linked to both a page and a website. The Button point, ButtonToPageAndWebsite has been configured to link to Page 4 of the project as well as the URL http://www.google.com .