Components

If the Page Variables are active, you can use them in various components such as Title bar, Title, Text panel, Image...

Select the pencil to open Expression Builder..
You can define a default value for page variables as well. This will be applied if the variable does not exist.

To work with Page Variables in your components, select the VARIABLES button in the title bar. This opens a testing dialogue where you can choose the type of connector to retrieve the sample data to display as you create your table components.

  • When the Page Variables are active, the arrow in the icon points to the right: .
  • When the Page Variables are not active, the arrow in the icon points to the left: .
Attention: The Page Variables must only return one object.

Context to test

In the first tab you can set and change the context to test the outcome of the use of Page Variables. Select a connector, define the settings and if needed select to change the key. Select Apply context to test to apply the test context to the page.

  • Connector: Cloudflow Collections (nucleus): if you select this option, Pagebuilder connects to the main CLOUDFLOW mongoDB database.
    • Collection: here you can define the mongoDB collection to retrieve data from.
    • Key: here you can define the unique _id of the key of the document to retrieve. Select to randomly change the _id. A red border indicates that the _id does not exist, a green border indicates that the _id does exist. In case of an existing _id, the available variables of the record are displayed under Preview variables.
  • Connector: Dataconnector: if you select this option, any DATALINK connections setup on your CLOUDFLOW is connected to.
    • Collection: here you can define the name of the DATALINK query you have set up on your CLOUDFLOW.
    • Key: here you can define the unique key of the DATALINK document.
  • Connector: Workflow: if you select this option, a CLOUDFLOW workflow runs to return data as a result.
    Note: When triggering a CLOUDFLOW workflow for data, take the following into account:
    • Use a Start From Web Request node as the starting point of the workflow.
    • Return the data contents as an object using an HTTP Response node as part of your workflow:
    • Workflow name: here you can define the name of the CLOUDFLOW workflow.
    • Workflow input name: here you can define the input name of the workflow.
    • Input: here you can define extra input variables to start a workflow.
      • use cache: if you select this option, the previous data in the jacket is used.
      • Key (path): here you can define the key (path) of the variable that you want to pass to the workflow. You can use dot notation.
      • data type: here you can define the data type to interpret the data.
      • Value: here you can define the value of the key variable that you want to pass to the workflow.
  • Connector: Start from DBIO: if you select this option, the test data is collected from a workable that was created by a workflow that starts with the Start from DBIO node and sets a reply with the Set DBIO Reply.
    • Collection: here you can define the collection created by running a workflow that starts with the Start from DBIO node.
    • Key: here you can define the unique key of the database document.
  • Connector: *Custom*: if you select this option, you can select your own custom object as Pagebuilder context variables to test.
    • Input: here you can define extra input variables.
      • Key (path): here you can define the key (path) of the variable that you want to pass. You can use dot notation.
      • data type: here you can define the data type to interpret the data.
      • Value: here you can define the value of the key variable that you want to pass.
  • Connector: File: if you select this option, you can select a JSON file as Pagebuilder context variables to test.
    • URL: here you can define the URL of the JSON file.
    • ID Key Name: here you can define the name of the ID key in the JSON to retrieve.
    • Key: here you can define the unique _id of the key of the JSON file to retrieve. Select to randomly change the _id.

    Example

    {
    "name": "Brett Pitt",
    "gender": "male",
    "company": "XYLAR",
    "email": "brettpitt@xylar.com"
  },
    In this example:
    • The ID Key Name would be name.
    • The Key would be Brett Pitt.

Context when missing output

In this tab you can define a context variable on a page if no context is defined, in which case no id is available. If you want to provide a default variable in this case, you can define a value in the field Value.

Example

The page mypage.html has a button. When clicking on this button, you will be redirected to a page details.html:
These are the missing context settings for a page called details.html:

In this example, the value defaultName is used when clicking on the button since there is no variables input.