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.
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.
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.
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.
By choosing one of these options, you determine how the block will function on the page.
In addition to configuration settings, Zingy Page Flow and Cloud Flow blocks have parameters, which are categorized into the following types:
The value parameter slots can either be inside the block itself or on the edge of the block spanning multiple lines.
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.
When the page is loaded or previewed this would set the content of the selected element to the text "Hello World!"
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.
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.
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.
These blocks are not designed to be stacked vertically. Instead, they connect to compatible of other blocks.
The accompanying image showcases the block, emphasizing two Input Configuration settings labeled Add Classes and Remove Classes.
The image below highlights a dropdown configuration setting for the block where three options are shown: "Set Content of", "Append to" and "Prepend to".
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.
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 of the chosen element. Selectable inputs are utilized in various Page Flow and Cloud Flow blocks.
Value Parameters are used to accept dynamic values and can be connected to other . 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 block. In the example on the right, the block is shown with four value parameter slots labelled Table, Dataset Name, Dataset Refresh and Record ID.
The key difference between discussed above and Value Parameters are:
The image below shows an example of the block's value parameter connected to a Text block. The Text block itself has a with the content set to "Hello World!" .
Another example using the same block as above is shown below. This time the Set Content block is connected to the Variable Value block which has a and has the variable named mycontent selected.
As a final example the block is shown below with its Table, Dataset Name, Dataset Refresh and Record ID value parameters all connected to other blocks.
The number of such parameters in the set varies based on the block's configuration settings. The image above shows the block with it's Value Parameter Set showing three parameters, based on the selected element.
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 block incorporates two flow parameters: "on Success do" and "on Error do".
