Creating the product catalog page

Work in progress! The Flow team is working on finishing this…

Please browse the rest of the site.. or click the Help button (bottom-right corner) if we may help you with anything.

Live long and prosper! Thank you.

  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.
  5. The type of data to be provided will be GetMDMProductCatalogue RESPONSE – Object.
  6. We will get the data from a list value.
  7. We will add five columns for data presentation; showing the Name, Description, Active, Category, Code, and Color properties respectively. All the columns will be displayed.
  8. Let’s save the component. This is what the page layout looks like now:
  9. We will create a toggle next. Let’s drag and drop a toggle component to the Product Catalog row under the table. 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 to a Boolean value called OrderNow, and save the component. This is what the page layout looks like now:
  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. We will need to add two Input components in the row.
  15. 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, and save the component.
  20. Next up is configuring the option for the input component for the Delivery By option. For this too, we will drag and drop an Input to the Order Details container.
  21. We will use Deliver By as the Name and Label for the component.
  22. The option for Editable under Settings should be checked.
  23. Let’s go with 25 for the Size and 255 for Maximum characters in the options for Size.
  24. The Save the whole selection option under State should be checked.
  25. We will save the user selection to a new Date/Time value called DeliverBy, and save the component.
  26. Let’s save the page now.

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.