Creating the product catalog page

Here is how we are creating the product catalog page of the smart farm app.

  1. We will create a new page layout called Product Catalog.
  2. Let’s rename the Main Container to say Product Catalog as well.
  3. We will be working on a table next.
  4. We can call the table Details. It does not need a label. The table will not be editable.
  5. The type of data to be provided will be of the ProductCatalogMock type.
  6. We will get the data from a list value. The value that holds the data is ProductCatalogMock.
  7. We will add five columns for data presentation.

    The columns will show the Name, Description, Active, Category, Code, and Color properties respectively. All the columns will be displayed. We will use the property names for the Label as well.

    Let’s save the component.
  8. We will create a toggle next. Let’s drag and drop a toggle component to the Product Catalog row.
  9. We can use OrderNow as the Name/Label for the element.
  10. The option for Editable under Settings should be checked.
  11. The Save the whole selection option under State should be checked as well.
  12. We will save the selection made by the user, and create a new Boolean value called OrderNow to save it in.
  13. Let’s add another container in a row to the Product Catalog container.

    We can call it Order Details. This container does not require a label.
  14. Let’s change the Order Details settings from Rows to Columns.
  15. We will add two Input components in the row. One by one, of course! Let’s call the first Input component Qty.
  16. The option for Editable under Settings should be checked.
  17. Let’s go with 2 for the Size and 10 for Maximum characters in the options for Size.
  18. The Save the whole selection option under State should be checked.
  19. We will save the user selection to a new number value called OrdQty.
  20. Save the component.
  21. Next up is configuring the option for the second input. We will use this component for the Delivery By option. For this too, we will drag and drop an Input to the Order Details container.
  22. We will use Deliver By as the Name and Label for the component.
  23. The option for Editable under Settings should be checked.
  24. Let’s go with 25 for the Size and 255 for Maximum characters in the options for Size.
  25. The Save the whole selection option under State should be checked.
  26. We will save the user selection to a new Date/Time value called Deliver By.
  27. Save the component. We will now add page conditions. How exciting is that!
  28. Click the Page Conditions icon on the right-hand-side navigation. We are going to be working with advanced conditions.
  29. Click New Page Condition.
  30. Click New Page Rule. We are going to be creating a page rule now. This is how the configuration will go:
    Select OrderNow as the Left Page Component.
    Select Value as the Metadata Type.
    Select Equal To as the Criteria.
    Select Value as the Metadata Type again.
    Select $True as the Right Value (Click Select or create a new value, and then select the $True value).

    Click Apply Rule when done.
  31. Select And as the Comparison Type.
  32. Click New Page Operation. This is how we are going to configure the page operation:
    Select Qty as the Assignee Page Component.
    Select Visibility as the Metadata Type.
    Select Value as the Metadata Type again.
    The Assignor Value will be $True.

    Click Apply Operation when done.
  33. We will create another page operation. Click New Page Operation again.
  34. This is how the configuration goes:
    Select Deliver by as the Assignee Page Component.
    Select Visibility as Metadata Type.
    Select the second Metadata Type as Value.
    Select $True as the Assignor Value.

    Click Apply Operation when done.
  35. Click Apply Condition.
  36. Click Save Page Conditions.
  37. Save the page!

Check out the glossary for a definition of terms and key concepts that appear in the Boomi Flow website, drawing tool, technical documentation, blogs, and marketing communications.

If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Help button on the bottom right-hand corner of this page to ask.