So we are selling sheet material. So in our case getting the required info is quite easy. We want to ask the customer:

  • What material is it you want? 
  • Cut to what dimension?
  • How many sheets do you want?

Let’s create a form pipeline to gather this data. It’s quite simple in this case, since we are mainly dealing with number data.

In the dashboard, go to Form pipelines > New and give it the slug sheet-material . Paste in the code from here. Now try to save it!

Seeing "This pipeline has invalid dependencies"?

This is due to Smidyo using absolute references to all data. So you need to replace all references to test-salesdomain  to the name of your actual sales domain. This can be done with a simple find-and-replace (ctrl/cmd + f).

Now you should be able to save it! Let’s break it down:

Defining the output of the form pipeline

First, let’s define the output of the form pipeline — everything we want to have gathered from the customer when they are done.

The width, height, and quantity are all of the same data shape; numbers (type number ), that are always provided (non-nullable), and always a single value (not a list). And then we also have the ID of the material which the customer picked (a text type).

The payloadlet for these outputs comes from a pipeline value of the same name (so in order for output width-mm to get its data, we need to set pipeline value width-mm).

You can read more about data shapes and payloadlets in our article about them!

  "outputs": [
    {
      "name": "width-mm",
      "dataShape": {
        "type": "number",
        "nullable": false,
        "list": false
      }
    },
    {
      "name": "height-mm",
      "dataShape": {
        "type": "number",
        "nullable": false,
        "list": false
      }
    },
    {
      "name": "material-id",
      "dataShape": {
        "type": "text",
        "nullable": false,
        "list": false
      }
    },
    {
      "name": "quantity",
      "dataShape": {
        "type": "number",
        "nullable": false,
        "list": false
      }
    }
  ]

Building the form pipeline

Now let's define the actual steps to get the information from the customer! 

This is done in steps.

Step 1 

We need to show the materials available in the form. So let's get the two columns row-names and name  from the materials table. Let's assign column row-names  to the pipeline value material-keys, and name  to pipeline value material-names .

The newly created pipeline values material-keys and material-names are now text lists containing the identifier for the material in question, and it's name.

We are doing the through using an internal source block TABLE_COLUMNS. We should have documentation up about the different types of blocks soon!

{
  "type": "INTERNAL_SOURCE_BLOCK",
  "sourceBlock": "TABLE_COLUMNS",
  "tableSlug": "test-salesdomain.t.sample-materials",
  "out": [
    {
      "outFrom": "row-names",
      "outTo": "material-keys"
    },
    {
      "outFrom": "name",
      "outTo": "material-names"
    }
  ]
}

Step 2

Using the built-in element block select.r.1 we can let the user pick the material through a drop-down menu. We feed its inputs options  and option-titles  with the pipeline values we just assigned. 

The material ID the user picked (an item out of material-keys ) will be assigned to pipeline value material-id  - which is also an output of the form pipeline.

{
  "type": "ELEMENT_BLOCK",
  "elementBlockSlug": "select.r.1",
  "label": "Select material",
  "in": [
    {
      "type": "PIPELINE_VALUE",
      "inFrom": "material-keys",
      "inTo": "options"
    },
    {
      "type": "PIPELINE_VALUE",
      "inFrom": "material-names",
      "inTo": "option-titles"
    }
  ],
  "out": [
    {
      "outFrom": "option",
      "outTo": "material-id"
    }
  ]
}

Step 3, 4 and 5

We gather the width, height and quantity using three element blocks of type number-input.r.1

Let's just take a look at the code for one of them, since they are are all very similar.

We are setting limits for the maximum and minimum values of the input using INLINE_VALUE 's. An inline value lets you define values you do not easily be able to change at a later point, so it's useful for configuration values such as this.

If the data is not a list, it's still provided as [1]. this is because Smidyo payloadlets are always lists. Singular payloadlets just always have a length of exactly one. You can read more about this in our article about data shape and payloadlets.

{
  "type": "ELEMENT_BLOCK",
  "elementBlockSlug": "number-input.r.1",
  "label": "Width",
  "in": [
    {
      "type": "INLINE_VALUE",
      "inFrom": {
        "dataShape": {
          "type": "number",
          "list": false,
          "nullable": false
        },
        "data": [1]
      },
      "inTo": "limit-decimal-places"
    },
    {
      "type": "INLINE_VALUE",
      "inFrom": {
        "dataShape": {
          "type": "number",
          "list": false,
          "nullable": false
        },
        "data": [10000]
      },
      "inTo": "max"
    },
    {
      "type": "INLINE_VALUE",
      "inFrom": {
        "dataShape": {
          "type": "number",
          "list": false,
          "nullable": false
        },
        "data": [1]
      },
      "inTo": "min"
    },
    {
      "type": "INLINE_VALUE",
      "inFrom": {
        "dataShape": {
          "type": "text",
          "list": false,
          "nullable": false
        },
        "data": ["mm"]
      },
      "inTo": "suffix"
    }
  ],
  "out": [
    {
      "outFrom": "number",
      "outTo": "width-mm"
    }
  ]
}

Our form pipeline is done!

Now, if you didn't already do it earlier, all you need to do is click Save.  It's time to make process pipelines in the next step! 

Did this answer your question?