Page blocks are the web pages the end-user clicks through in your app. Your app must have at least one page block.
Each page block is presented to the end-user in the order in which you sequence them in the app builder:
Page blocks are the visible "front-end" of your app. Logic blocks are the invisible "back-end." Simple apps may not have any logic blocks, but every app must have at least one page block.
Because Logic Blocks are invisible, it does not matter how you sequence them in the App Builder.
You can toggle between viewing all blocks, only pages, and only logic:
By default, every page block will be displayed to the end-user in the order they are arranged. You can add conditional logic to a page block to display it only under certain conditions.
To add "display if..." logic to a block, simply click the "Conditionally display" toggle:
Clicking this toggle allows you to edit a logical expression. If that logical expression is true (or, as we say, if it "evaluates to true"), then and only then is the page block displayed to the end-user.
Learn more about editing logical expressions here.
A question page allows you to ask the end-user questions. You must add at least 1 question to a question page:
There are question types for any kind of data you wish to collect. Check out our lesson on question types for a full list.
An info page allows you to present the end-user with some information. There is nothing interactive about this page-type, except for the "continue" button which allows the end-user to advance to the next page:
The "continue" button on an info page creates a boolean variable, which resolves to True if the end-user clicks on it (and thereby advances to the next page).
A signature page allows you to collect an e-signature from the end-user:
This page creates an image variable that is equal to whatever image the end-user draws on the signature field provided to them:
The signature page can only collect e-signatures from the end-user, i.e. you can't collect e-signatures from 3rd parties; for that, you should use a HelloSign page (see below).
A HelloSign page allows you to collect one or more e-signatures using HelloSign, a popular e-signing product that creates an audit trail of all signatures.
You can use HelloSign pages to collect e-signatures from the end-user of your app and/or 3rd parties via email. Learn more about HelloSign pages in our e-signature lesson.
A redirect page sends the end-user to another webpage (this is known as a "redirect"). When the end-user reaches the redirect page, they're automatically redirected to the URL you specify:
The webpage you redirect the end-user to replaces the webpage they're currently on; this will close the end-user's current app session.
You can use redirect blocks to string multiple apps together into a seamless user-experience. This allows you to break up large apps into smaller, easier to maintain apps. Check out our FAQ on stringing multiple apps together.
The final page allows you to conclude your app, as it does not have a "continue" button:
Your app may have multiple final pages, each conditionally displayed under different circumstances.
A background page is invisible to the end-user (the page runs "in the background").
Although background blocks are invisible, they otherwise behave like other types of page blocks. Importantly -- and unlike with logic blocks -- the sequence in which you order a background block determines when the function(s) it triggers run.
The purpose of a background page is to perform a function(s) at a specific point in your app; those functions are:
A payment page allows you to collect a credit card payment from the end-user via either Stripe or LawPay (Affinipay):
Learn more about collecting payments in our lesson on collecting payments.
A loop section allows you to collect a set of blocks into a "loop." These blocks will be presented to the end-user over and over, as long they opt to continue the loop. This is how you create a repeating set of questions to collect information about X number of things.
The classic example for a loop is collecting information about an end-user's children. In Afterpattern apps, you can't ask the end-user "how many children do you have?" and then use their response to determine how many times you ask for a child's name and social security number. Instead, you must use a Loop Section.
Loop sections create a list datatype variable. This variable represents every member of your loop (every time the end-user passes through your loop they create a new loop member):
An iterator page is a background page for list variables, where the functions triggered by the iterator page are performed for each list member.
Only question pages can include questions (check out our question types lesson for a full list), but almost every type of page can include elements (the exceptions are background, iterator, signature, and payment pages).
Elements are things you can add to a page and they include images, notes, buttons, and more:
Continue reading for a breakdown of each type of element.
A note element allows to you add a block of text between questions:
A collapsible section is an interactive element made of a label and a block of text that's revealed when the label is clicked:
An image element allows you to display an image on your page. This is useful for transforming an info page into a splashing landing page for your app:
A button allows you to add a link that is styled to look like a button. This is useful for directing end-user's to other web apps. For example, you could use a button to direct someone to schedule a call with you:
These two elements (HTML and Javascript) allow you to add custom code to your pages.
This is useful for creating custom user interfaces for your app. Check out our lesson on custom app styles to learn how to build your own.
This should only be used if you know how to write Javascript.
