Apogee v0.8.8 - Getting Started
  • Apogee v0.8.8 - Getting Started
  • Tutorials - Basics
    • Populating a Data Table
    • Data Views in a Data Table
    • Defining Functions
    • Folders and Scope
    • "Immutable" Values Gotcha
    • Debugging
    • Reusing Code
    • The Messenger, and Functional Programming
  • Tutorials - More Components
    • Configurable Form Components
      • Dynamic Form
      • Form Data Table
    • External Libraries and Controls
    • Custom Components
      • Custom Component
      • Custom Data Component
    • Folder Functions
    • Roll Your Own Components
  • Additional Apogee Videos
    • What is Apogee? An Overview
  • Additional Example Workspaces
    • The Grid and Spreadsheets
    • Combined Example
Powered by GitBook
On this page
  • Example Form
  • More Information

Was this helpful?

  1. Tutorials - More Components
  2. Configurable Form Components

Dynamic Form

This tutorial covers the Dynamic Form component.

PreviousConfigurable Form ComponentsNextForm Data Table

Last updated 6 years ago

Was this helpful?

This component displays a form which is dynamically configured by the user. The form acts like a modal dialog box. It is typically used to trigger an action.

Unlike a regular data table, when the user edits the form there is no save bar that appears. There is also no way to save the form content for this component in this component itself. To do that, use the . For the Dynamic Form, there should be a submit button included, for which the programmer must define the action.

This component includes the following views:

  • Form - This displays the form.

  • Code - This should be used to enter a function body returning the form initialization info. For the format of the return falue, see the definition of the form initialization data in the ConfigurableForm documentation.

  • Private - This allows for an private constants or functions needed by the function body initializing this form.

  • Notes - This holds any desired notes for the component.

Example Form

The following example describes the workspace:

The code for this component should return a layout object. The layout object is a javascript/JSON object which gives the list of configurable elements and the initialization of each, defining the form.

The following code defines a form with the following elements:

  • Title

  • Text Field

  • Radio Button Group

  • Submit Element

The submit element is given callbacks that define the submit and cancel functions, which we have labeled "Submit" and "Reset". The functions are defined at the top of the code.

The function onCancel resets the value of the form to the default value, which we defined at the top of the code.

The resulting form looks like this:

To see this in action, see the example workspace listed at the top of this section.

More Information

The function onSubmit uses the to send the value of the form to the table myOutput.

For more information about using the configurable form see the programming guide .

messenger
Configurable Forms
Form Data Table
Example Workspace
To access this code, view the example workspace