hub.eb?material_id=328
Login
Back

Multi Page Component

A Multi Page Component consists of entire pages that are intended for re-use across an application.

A Multi Page Component doesn't have its own Presentation Template, instead each form's Presenation Template dertmines the style of its Components. When designing a Multi Page Comonent, you can select a Presentation Template to see what it will look like when inserted into a form.

Use cases for Multi Page Components include:

  • Shopping Checkout Pages eg:
    1. confirm basket
    2. confirm address
    3. make payment
    4. payment confirmation
  • Leaving Review Pages eg:
    1. rate product/service
    2. leave comments
    3. thankyou.

You can add Multi Page Components from the Pages tab.

Adding a Multi Page Component

You can test a Multi Page Component without inserting it into a form by clicking the Test button from the Component editor.

 

Steps

1

Create a new Multi Page Component called myPaymentScreens with First Page: Payment.

Add one more page: Confirmation.

2

Add Text Control to the Payment page with the text: Please pay.

Add a Button Control with the text Pay.

Attach a script to the button's On Click event with the following code:

form.gotoPage(pages.Confirmation);
3

Add Text Control to the Confirmation page with the text: Thank you for your payment.

4

Create a new form and add the myPaymentScreens Multi Page Component in the Pages tab as a linked Component.

Give it the prefix pay_.

5

Add a Button Control to the first page of the form.

Attach a script to the button's On Click event with the following code:

form.gotoPage(components.pay_myPaymentScreens.pages.Payment);
6

Run the Form and click through the buttons to "make a payment".

Related

Component with Bootstrap navbar
view
Part Page Components
view
Component Context
view
Form-Component Programming Interaction
view
Accessing a Server-side Component Context from outside of a Client-side Component Context
view
JavaScript API: Pages
view
Page Basics
view
Introducing Forms and Pages
view
Introducing Components
view