Skip to main content

Recipe Cards

Last updated 17/05/2023

Cards contain content and actions about a single subject. Elements like text and images can be on them. Cards are usually entry points to more complex and detailed information.

In this Recipe card demo, multiple recipe cards will be added using Five's custom form plugin API integrated with Material UI components. A custom form gives you maximum freedom, supplying a blank slate for your plugin, you are not just confined to a field on a form. The form can be configured to be displayed in two ways, it can occupy the space of a form, with a list of records remaining on the left, or it can use the entire available screen. For this demo, we are going to use the entire screen.

Users will be able to see an image and description of each recipe on a card and click a button that will take them to the recipe. If you are working in The Cloud, the recipe will open in a new tab. If you are working in Local, the recipe will open in a new window.

This demo is created in the Local version of Five. If you are working in the Cloud, you will need the role of Administrator to create the Recipes application and all other procedures will require the role of Developer.

Workflow

  • Create Recipes application
  • Create the Recipes custom action
  • Create a menu item for the Recipes custom action
  • Prepare your work environment
  • Copy the code for the Recipe cards using Five's CustomForm.tsx
  • Zip your code and attach in Five's Custom Actions views for production distribution