Block Anatomy
Last updated
Last updated
NOTE: The information in this section applies to Page Flow and Cloud Flow blocks.
In this section, we will discuss various aspects of a Page Flow/Cloud Flow block including the types of blocks, configuration settings and block parameters.
In the Zingy Page Flow/Cloud Flow editors, you will encounter three distinct types of blocks.
It's important to note that Zingy utilizes color-coded blocks based on their categories, and the example images below are provided solely to illustrate their shapes.
Regular blocks feature notches at the top and bottom, allowing them to be stacked both above and below other regular blocks, as well as on top of terminal blocks.
The image below provides an example of the shape of a regular block.
Terminal blocks have notches only at the top and can be stacked beneath regular blocks, but they do not support stacking below them. These blocks are commonly used to implement the concluding logic of a procedure or flow.
The image below showcases an example of the shape of a terminal block.
Output blocks do not feature top and bottom notches, but they have a distinctive notch on the left side to indicate that they output or send out a value.
These blocks are not designed to be stacked vertically. Instead, they connect to compatible Value Parameters of other blocks.
The image below depicts an example of the shape of an output block.
The Page Flow/Cloud Flow blocks may have configuration settings allowing you to make a selection or type in directly on the block. Configuration settings within a block allow users to input specific data or make selections. They provide a way to customize the behavior of the block.
Configuration settings can be of the following types:
An Input configuration setting enables you to directly input text or numbers within the block, allowing you to specify the necessary information for its operation.
The accompanying image showcases the Set CSS block, emphasizing two Input Configuration settings labeled Add Classes and Remove Classes.
When utilizing this block, you would enter the CSS classes you wish to add or remove into their respective Input Configuration settings.
In Page Flow or Cloud Flow, the Dropdown configuration setting provides a selection of predefined options for customizing the behavior of a block.
The image below highlights a dropdown configuration setting for the Set Content (Mode 1) block where three options are shown: "Set Content of", "Append to" and "Prepend to".
By choosing one of these options, you determine how the block will function on the page.
In the image below, a selectable input is highlighted, which triggers the selection of a page element. The associated input field in the block is automatically filled with the Element ID of the chosen element. Selectable inputs are utilized in various Page Flow and Cloud Flow blocks.
In addition to configuration settings, Zingy Page Flow and Cloud Flow blocks have parameters, which are categorized into the following types:
Value Parameters are used to accept dynamic values and can be connected to other Output Blocks. It is indicated by a slot where values from other output blocks (with compatible output) can be plugged in.
The image below shows examples of value parameters. The example on the left highlights the value parameter slot in the Set Content (Mode 1) block. In the example on the right, the Data Delete Record with ID block is shown with four value parameter slots labelled Table, Dataset Name, Dataset Refresh and Record ID.
The value parameter slots can either be inside the block itself or on the edge of the block spanning multiple lines.
The key difference between Input Configuration Settings discussed above and Value Parameters are:
Their purpose and the type of data they handle: Input Configuration settings are used for capturing specific values directly within the block, while Value Parameters are used for accepting dynamic values or expressions from other blocks.
Input Configuration settings are generally used to configure the behavior a block, while Value Parameters enable data flow and connections between blocks.
The image below shows an example of the Set Content (Mode 1) block's value parameter connected to a Text block. The Text block itself has a Input Configuration setting with the content set to "Hello World!" .
When the page is loaded or previewed this would set the content of the selected element to the text "Hello World!"
Another example using the same Set Content (Mode 1) block as above is shown below. This time the Set Content block is connected to the Variable Value block which has a Dropdown configuration setting and has the variable named mycontent selected.
As a final example the Data Delete Record with ID block is shown below with its Table, Dataset Name, Dataset Refresh and Record ID value parameters all connected to other blocks.
In summary, Value Parameters allow for the flow of dynamic data between blocks. They can be attached to compatible output blocks including compatible Variable Value blocks.
Certain blocks accept a set of Value Parameters. The parameters in the set can optionally have configurable names.
The image below shows two blocks that accept a Value Parameter Set. In this case the value parameters do not have names.
The image below shows two blocks that accept Value Parameter Sets with configurable names.
The number of such parameters in the set varies based on the block's configuration settings. The image above shows the Content from Data Design block with it's Value Parameter Set showing three parameters, based on the selected Data Design element.
You have the option to include or exclude parameters from this set by clicking on the "gear" icon located at the top left corner of the block. An example of this functionality is demonstrated in the image below.
Flow Parameters are used to connect regular and/or terminal blocks. It is represented by a notch or opening in a block where other blocks can be attached.
The image below shows three examples of blocks that have Flow Parameters. From left to right, the Repeat Loop block includes a flow parameter labeled "do". The If Condition block also features a flow parameter named "do". Lastly, the Data Lookup with ID block incorporates two flow parameters: "on Success do" and "on Error do".
Flow Parameters allow for the sequencing and nesting of blocks to create logical flows and control structures.
The image below shows the If Condition block with two flow parameters. The blocks connected to the "do" flow parameter will get executed if the condition (amount is greater than 100) is true.
The blocks connected to the "else" flow parameter will get executed if the condition is false i.e. amount is less than or equal to 100.
Right-clicking on a block will bring up a popup menu with options as shown in the image below:
Each of the options in the block's popup-menu is described below:
Duplicate: Makes a copy of the block and adds it to the Page Flow/Cloud Flow workspace.
Add Comment: Allows you to document what you are doing with the block.
Collapse Block/Expand Block: Allows you to collapse a block to use less space in the workspace or expand a collapsed block back to its original form.
Disable Block/Enable Block: You can disable a block, but keep it in the workspace. Once disabled this option will allow you to re-enable the block.
Delete: Delete's the block and all attached blocks.
Help: Takes you to the Zingy documentation for the block.
A selectable input configuration setting functions similarly to the input configuration setting mentioned earlier, but with an added selection button. This selection button allows you to choose a specific item or element related to the block, such as page elements, database tables, etc. Once the selection is made, the input field is automatically populated with information regarding the selected item.
