Page Logic

As mentioned in the Page Blocks section, each page in a ditto app is comprised solely of a set of blocks. These blocks can range from simply displaying text content to more complex behaviours like data fetching, navigation, AI generation, and authentication.

Because of the wide variety of blocks available, each page in your app can have its own custom logic. However, before using blocks with their own behaviour, it's important to understand how page logic works in ditto.

Flow of Execution

When a user navigates to a page in your app, each block is loaded in order from top to bottom. This means that the order of blocks on a page is important, as the output of one block can be used as input for another block.

Block Holding

Some blocks require interactivity from the user, such as inputting text or selecting an option. In such cases, the block will hold the loading of subsequent blocks until the user interacts with it. Once the user completes the necessary interaction with the block, the page will continue loading the remaining blocks.

Block Inputs and Outputs

Blocks in a page can have inputs and outputs. Inputs are the data required by the block to function, while outputs are the data generated by the block. The output of one block can be used as input for another block, allowing you to create complex logic by chaining blocks together.

Inputs

Even the simplest blocks like the "Text" and "Heading" blocks have an input. The input for these blocks are the text content you want to display. This input is provided by you when you type some text into these blocks.

Outputs

Outputs are more common in blocks that perform actions, such as the "Form" block, which saves the user's responses as page fields. The output of this block are the results of the user's response, which can be used in subsequent blocks.

Using Outputs as Inputs

When chaining blocks together, you can use the output of one block as the input for another block. For example, you can use the output of an "Form" block as the input for the next "Text" block to create a personalized message based on the user's response.

Any block that takes a text input can accept the output of any other previous block on the page as part of it's input. This allows you to create dynamic content that changes based on user interactions or other data sources.

Example

Here's an example of how you can chain blocks together to create a dynamic page:

Add a "Form" block to collect the user's name. Set the "Form" block to save the user's name as a page field.

Add a "Text block" after the "Form" block and use the output of the "Form" block as the input for the "Text" block to create a personalized message. To do this, type the forward slash / key into the "Text" blocks input and select the "name" page field to include the user's name in the message.

Conditional Logic

Each page acts as a single unit of logic, with blocks executing in order from top to bottom. However, you may sometimes wish to show content to users based on some criteria having been met.

This is handled in ditto via the "Goto" block. It allows you to navigate users to a specific page within your app based on conditions you set. You can add up to five conditions which must be met for the navigation to occur. If no conditions are set, the navigation will happen immediately.

This is useful for creating dynamic content that changes based on user interactions or other data sources. A typical use case for conditional logic is showing different content to users based on their responses to a form. Based on the user's response, you can navigate them to different pages.