Joget Workflow v6 Beta 2 Released

Check out the latest Joget Workflow v6 Beta for many new features and improvements in user experience (UX), app maintainability and performance.

Skip to end of metadata
Go to start of metadata

Previous step

Make sure that you have first completed the previous tutorial - Designing a New App

  1. In the App design page, click on the Create New Form button along the top.
  2. Key in the details of the new form.
    Form ID: A short and unique ID for each form (no spaces) e.g. travelRequestForm
    Form Name: A descriptive name e.g. Travel Request Form
    Table Name: The database table name to store the form data e.g. travel_requests. Note that different forms can share data by pointing to the same table name.
  3. Click on Save to save the form and launch the Form Builder in a new window. If your browser blocks the popup, click on the form name to launch it.
  4. The first step in the Form Builder is the Design Form page. On the left is the palette containing available form elements. In the middle is the canvas containing one or more sections, and each section may contain one or more columns.
  5. When you mouseover a section header (or any form element), buttons appear giving you options.
  6. Click on Edit Section. This opens a Property Editor showing properties that you can modify. Each form element has different properties that can be configured.
  7. Click on the OK at the bottom to save the property changes.
  8. You can add sections using Add Section, and move sections around by dragging.
  9. Drag form elements from the palette into any section.
  10. Hover any form element to see the Edit and Delete options. Click on Edit to modify the form element properties.
  11. At any time, you may preview the form by clicking on the large Preview button at the top.
  12. Once you have finished designing the form, click on the large Save button at the top and you will receive confirmation that the form is saved. You may then continue to design the form, or close the Form Builder window.
  • No labels