Get started with App Builder

As an example, we'll show you how to create a simple Hello World in App Builder. If you need help with App Builder and your issue isn't resolved by our documentation, reach out to Rewst in your dedicated Discord support channel.

Create an app

  1. In Rewst, navigate to App Builder > Apps.

  2. Click Create New App.

  3. Enter the name of your app into the Name field. We'll use hello-world in our example. Note how it automatically creates a URL based on your org name and the rew.st domain.

  4. Click Create.

Create a page in an app

1. Navigate to the newly created app by clicking on it in your Apps list. Every app's info page will contain a Pages section where all the default pages made by Rewst for that app will be listed. Every app you create will have both a home and login page. Both are customizable.

2. Click Create New Page.

The bottom section of the Pages menu will consist of all non-default pages created by you.

3. Give your page a name. Remember that Rewst will create the url slug for that page based off this name. Choose something that makes sense, but is appropriate to be seen by the eventual audience of the page.

4. Choose a page type from the Page Preset drop-down selector. For this example, choose Blank. Other default templates include Basic, Blank, Grid, Home, and Pricing Template.

5. Click Create.

6. Click > to the right of your page's record, under the Actions column. This will take you to the builder screen for that page.

Create a workflow to use in your app

Add workflow actions

  1. Navigate to Automations > Workflows.

  2. Click Create.

  3. Give the workflow a name that relates to your app. Here, we're using hello-world.

  1. Add a noop action to the workflow builder canvas by clicking on the action in the left action menu and dragging and dropping it on the canvas.

  2. Click on the action.

  3. Click the in the action's menu.

  4. Change the name of the action to BEGIN, which allows other users reviewing the workflow to clearly identify the top of a workflow.

  5. Add a List Forms with Granular Permissions action to the workflow builder canvas. Find the action under the Rewst actions submenu. This is a prebuilt action that uses the platform's GraphQL backend to return the requested data.

9. Connect the Begin action to the List Forms with Granular Permissions action.

10. In the List Forms with Granular Permissions action, add all_available_forms as the Publish Results As variable name. This ensures that the output of the action gets added to this variable.

  1. Under the Parameters tab for the action, click to open the Jinja code editor.

  2. Enter {{ CTX.user.id }} , which uses the ID of the running user, ensuring we always get the right forms based on the logged in user.

  3. Return to the action's menu. Click the Advanced tab. Scroll down to the Run as Org field. Enter {{ ORG.ATTRIBUTES.id }} into the Run as Org box under the Advanced tab. This ensures that the workflow always runs as the organization that you are logged into. If you have a form that is only enabled for certain orgs, this is how you ensure that you return the correct ones.

  4. Add another noop action to the workflow builder canvas. Rename the noop set_form_output .

  5. Click a data alias in this new action. Name the data aliasform_output .

  6. Click next to your new data alias.

  7. Copy the Jinja code below. Here, we're looking at all returned forms, and creating a new key with name, tags, view, and triggerId key. Eventually we'll display the name and tags to the user and use the view key to allow an action for the user - in the case of this example, go directly to the form.

{#- Assumes single trigger per form -#}
{{ [
    {
      "name": form.name,
      "tags": form.tags,
      "view": "https://app.rewst.io/form/"~form.id,
      "triggerId": form.triggers[0].id | d
    } for form in CTX.all_available_forms
] }}
  1. Add a final noop action to your workflow builder canvas. Rename the noop action END.

  2. Connect END to the Set Form Outputs action.

  3. Click in the top right of the workflow builder.

  4. Click next to Output Configuration.

  5. Name the output configurationform_output.

  6. Click next to the output configuration to open the Jinja editor. Enter {{ CTX.form_output }} .

  7. Add notes to your workflow, or use RoboRewsty to do documentation for you.

  8. Click Submit.

  9. Click Publish.

  10. Click Test. Click Test again.

  11. Click View Results.

  1. Click End, then output.

  1. Click form_output. You'll should see a record similar to the below, with a list of the forms that have been output.

Add components to your app

App Builder's component library contains many pre-built components that you can drag and drop onto the App Builder canvas. Detailed information for what each component does and how to use it in your apps can be found in individual pages, in the Components section of App Builder's documentation.

A detailed example of one such component can best be found for our Data table component.

  1. Navigate to App Builder > Apps. Click on your relevant app.

  2. Click in the left side menu of the App Builder canvas. This will open the full component library.

  3. Click on any component to drag and drop it into your App Builder canvas.

Last updated

Was this helpful?