How to use a Select Element Block and its Outputs

More into detail how to use a "Select" and "Select with Image" Element Block, and how it can be used to return data

What is a Select Element Block?

With a Select Element Block you get to click on one or multiple of the presented alternatives. It can be presented in two ways, as a text select using "Select", or as images using "Select with Image".

Using in a Form Pipeline

As you can see on the screenshot below the block needs Option Titles and Options. These can be provided as inline values (by clicking the + button), but more common is to use a Table as Tables are easier to alter. Here's a guide on how to make a table.

To use a Table to your Form Pipeline, hover between two blocks in the Form Pipeline, and click Source > Table Columns > Choose a Table

After you've inserted the Table, you can drag the Titles (in this table "food-names") from the Table Block to "Option Titles", and the identifier "row-names" to Options.

Could look like following:


"Option Titles", in this example "food-names", is what is displayed in the Quoting Portal. "Options", is what usually gets passed on to the Yield Pipeline for calculations. This is a secure way to make sure no prices are calculated on your customer's computer.

Most of the time you want to use "row-names" in Options. An explanation and example as to why later in this article.

Quoting portal:

Select with image

Only difference between "Select" and "Select with Image" in a Form Pipeline, is that you you get the ability to insert an image along with the options. You can create a new column for the images in the Table, and insert the Table to the Form Pipeline.

It should look like following in a Form Pipeline:

This is what it will look like in the Quoting Portal.

Output from a Select Element Block

The output is usually the id of a row ("row-name"). This means that the id of the row will be output as an option is selected. 

Note
The "Options" input can accept any data type in form of a list. So you do not have to use row-name. If the "Options" is a list of numbers, for example, it will output a number.

Getting more data about the selected option using the "Table Cells" Source Block

To be able to do more with the data that you get from your Select Element Block, you can use the "Table Cells" source block. We can do this in both the Yield Pipeline, or the Form Pipeline, depending on where you wish to use this data.

To do this, hover between two blocks in the editor and go Source > Table Cells > Choose the Table that you used in a select.

Note
This only works if you used "row-names" as the input for Options, because the row-name is what you are using when you use a Table Cells as mentioned above.

You can now use the other rows data to do various things, usually when calculating price in the Yield Pipeline, but you can also display additional data directly in your Form Pipeline.

In the following example, we get more information about the selected cat:

Using "Table Cells" in a Yield Pipeline

To be able to use data from a Select in your Yield Pipeline (more about Yield Pipelines in this article), you first have to make the selected option an output in your Form Pipeline, and make it an input in your Yield Pipeline. You can then connect the pipelines in your Offering. More into detail in this article about Advanced Offerings.

It could look like following in a Yield Pipeline:

Note that "selected-food" is the row-name that we passed on to the output in the Form Pipeline.

Food prices, in this example image, could for example be used in Sub-rows in your Offering. But you could also use data from Table Cells for more advanced calculations with the help of Process Pipelines.