-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
DocsUpdate-958: App Platform - Getting Started Docs
- Loading branch information
1 parent
748e87f
commit 2c734b2
Showing
6 changed files
with
440 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
documentation/app-platform-coming-soon/getting-started-1/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| # Getting Started | ||
|
|
||
| #### Welcome to the App Builder Getting Started Guide! | ||
|
|
||
| Welcome, and congratulations on taking the first step toward building your first app on the App Builder platform! In this guide, we will walk you through creating your very first App, starting with a simple "Hello World" project. As we progress, you'll learn how to build powerful workflows, design user-friendly pages, and leverage the platform's in-built components to create your app without needing extensive coding experience. | ||
|
|
||
| **Why App Builder?** | ||
|
|
||
| Whether you're streamlining internal processes, enhancing user experiences, or developing entirely new services, App Builder enables you to create Apps with minimal effort and maximum flexibility. | ||
|
|
||
| With the App Builder platform, you can: | ||
|
|
||
| * Create Apps with ease, using drag-and-drop interfaces and pre-built components. | ||
| * Utilise Rewst workflows and Jinja with a beautiful branded frontend that can be used by your techs and end users alike. | ||
| * Design modern, stylised pages with built-in tools, eventually expanding to full CSS customisation for a professional, polished finish. | ||
|
|
||
| **What We'll Accomplish** | ||
|
|
||
| In this guide, we’ll focus on: | ||
|
|
||
| 1. **Creating Your First App**: A simple "Hello World" to introduce the basics. | ||
| 2. **Building Your First Page**: Learn how to add structure to your app. | ||
| 3. **Designing a Workflow**: See how workflows bring your app to life. | ||
| 4. **Utilising Built-in Components**: Make your app functional with ready-made building blocks. | ||
|
|
||
| As we move through these steps, we’ll gradually evolve our project into a fully-functional Forms Portal—a complete system that your users can interact with. Later on, we’ll add CSS styling to ensure that your app not only works well but also looks great. | ||
|
|
||
| **What’s Next?** | ||
|
|
||
| We’ll start with the basics to get you comfortable with the platform. You’ll soon see how easy it is to build and scale your Apps. Each section of this guide will build on the last, taking you from a simple "Hello World" to a professional, end-user-friendly portal. | ||
|
|
||
| Let’s dive in and start building your first app! |
45 changes: 45 additions & 0 deletions
45
documentation/app-platform-coming-soon/getting-started-1/add-your-first-page.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| # Add your first page | ||
|
|
||
| *** | ||
|
|
||
| ## Hello World - Create your first page | ||
|
|
||
| *** | ||
|
|
||
| #### 1. Navigate to the newly created App | ||
|
|
||
| You'll see two default pages that we create for every App, `home` and `login` - you can customise both of these pages....later! | ||
|
|
||
|  | ||
|
|
||
| #### 2. Click on Create New Page | ||
|
|
||
| The bottom pane will consist of all non-default pages | ||
|
|
||
|  | ||
|
|
||
| #### 3. Choose a name | ||
|
|
||
| Give your page a name - remember that we'll create the url slug based off this name | ||
|
|
||
|  | ||
|
|
||
| #### 4. Choose a Page Preset | ||
|
|
||
| To make it easier to create pages, we give you some default templates to use for your new page. For now, go ahead and just choose `Blank` | ||
|
|
||
|  | ||
|
|
||
| > #### 💡 Experiment | ||
| > | ||
| > Curious what the other pages look like? Experiment by creating new pages with each preset to have a look! | ||
| #### 5. Click on Create | ||
|
|
||
|  | ||
|
|
||
| #### 6. Click on the arrow | ||
|
|
||
| Once the page has been created, you can navigate to that page's builder by clicking the arrow under the `Actions` column | ||
|
|
||
|  |
201 changes: 201 additions & 0 deletions
201
...tform-coming-soon/getting-started-1/create-a-workflow-to-utilise-in-your-app.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,201 @@ | ||
| # Create a Workflow to utilise in your App | ||
|
|
||
|
|
||
|
|
||
| *** | ||
|
|
||
| ## Hello World - Workflow Creation | ||
|
|
||
| *** | ||
|
|
||
| > #### 💡 The Power | ||
| > | ||
| > One of the most powerful aspects of Apps in Rewst, is that the data within can all be made dynamic by utilising Workflows and Jinja as the backend. If you have no idea what these are, make sure you go run through the Cluck U - Foundation series to get a basic understanding. When you come back, we'll make a simple workflow that utilises Rewst's API! | ||
| #### 1. Navigate to the Rewst Platform | ||
|
|
||
| Start pretty simply, load up the Rewst platform and you'll see the dashboard | ||
|
|
||
|  | ||
|
|
||
| #### 2. Click on Automations | ||
|
|
||
|  | ||
|
|
||
| #### 3. Click on Workflows | ||
|
|
||
|  | ||
|
|
||
| #### 4. Click on Create | ||
|
|
||
|  | ||
|
|
||
| #### 5. Give the workflow a name | ||
|
|
||
| Give the workflow a name, something that you'll understand. You can also give it a tag, which we recommend doing to ensure your workflows are grouped together. | ||
|
|
||
|  | ||
|
|
||
| #### 6. The Start | ||
|
|
||
| We'll start by creating a noop action, which is an action that does nothing. | ||
|
|
||
|  | ||
|
|
||
| #### 7. Click on the noop, then the pencil on the right hand menu | ||
|
|
||
| Change the name of the action to BEGIN, which allows other users reviewing the workflow to clearly identify the "top" of a workflow. | ||
|
|
||
|  | ||
|
|
||
| #### 8. List Forms with Granular Permissions | ||
|
|
||
| Next, grab the "List Forms with Granular Permissions" action, which you caan search for. This action is a prebuilt Rewst action that utilises our GraphQL backend to return the requested data. | ||
|
|
||
|  | ||
|
|
||
| #### 9. Connect the BEGIN > list\_forms action | ||
|
|
||
| Connect the two actions together from BEGIN > the new action | ||
|
|
||
|  | ||
|
|
||
| #### 10. Publish Result | ||
|
|
||
| In the new 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. | ||
|
|
||
|  | ||
|
|
||
| #### 11. Code Editor | ||
|
|
||
| Under the params on the action, click the "Edit Code" icon highlighted in the image below | ||
|
|
||
|  | ||
|
|
||
| #### 12. Enter Jinja referencing the running user | ||
|
|
||
| In Jinja, we can use \{{ [CTX.user.id](http://ctx.user.id) \}} which uses the ID of the running user, ensuring we always get the right forms based on the logged in user. | ||
|
|
||
|  | ||
|
|
||
| #### 13. Advanced Tab | ||
|
|
||
| On the Advanced tab, we can amend the "Run as Org" which works in the same way as the Run As User, and ensures that we always run as the org we are logged into. If you have a form that is only enabled for certain orgs, this is how we return the correct ones. | ||
|
|
||
|  | ||
|
|
||
| #### 14. Jinja in Run as Org | ||
|
|
||
| We add \{{ [ORG.ATTRIBUTES.id](http://org.attributes.id) \}} into the Run as Org box under the Advanced tab. | ||
|
|
||
|  | ||
|
|
||
| #### 15. And another noop... | ||
|
|
||
| Let's add another noop and connect our list\_forms action to it. We can name this one `set_form_output` to make it clear what we're going to do. | ||
|
|
||
|  | ||
|
|
||
| #### 16. Add a Data Alias | ||
|
|
||
| On the noop, we're going to create a new data alias called `form_output` | ||
|
|
||
|  | ||
|
|
||
| #### 17. Code Editor | ||
|
|
||
| Once again, click the code editor icon next to your new data alias | ||
|
|
||
|  | ||
|
|
||
| #### 18. The Jinja | ||
|
|
||
| We wont go fully into the Jinja here, but feel free to reach out to the ROC if you'd like to understand more what's happening here. The jist of it is that we are looking at all the returned forms, and creating a new key/value dict 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 our case, to go directly to the form. The Jinja can be copied below. | ||
|
|
||
| ``` | ||
| {#- 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 | ||
| ] }} | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| #### 19. Final Noop | ||
|
|
||
| Add one more noop into the workflow and call it "END", and connect it to the 3rd action as per the image. | ||
|
|
||
|  | ||
|
|
||
| #### 20. Set Workflow Outputs | ||
|
|
||
| Next, we need to ensure that the data alias we created actually gets output when the form runs. Click the pencil in the top right of the Workflow Builder, as shown in the image below | ||
|
|
||
|  | ||
|
|
||
| #### 21. Add Output Configuration | ||
|
|
||
| Click the + next to the Output Configuration and call it `form_output` (we can call this whatever we want). In the Jinja, enter \{{ CTX.form\_output \}} - this references the Jinja we made earlier on in the 3rd noop. Remember that one we called `set_form_output` ? | ||
|
|
||
|  | ||
|
|
||
| #### 22. Click on Submit | ||
|
|
||
|  | ||
|
|
||
| #### 23. Click on Publish | ||
|
|
||
| Save the workflow! | ||
|
|
||
|  | ||
|
|
||
| #### 24. Marvel in Rewsty | ||
|
|
||
| Click the Rewsty Robo-head and marvel at how we utilise AI to identify the changes made in the Workflow Builder to generate the commit notes. | ||
|
|
||
|  | ||
|
|
||
| #### 25. Click on Submit | ||
|
|
||
|  | ||
|
|
||
| #### 26. Click on Test | ||
|
|
||
| Finally, let's make sure it actually works! | ||
|
|
||
|  | ||
|
|
||
| #### 27. Click on Test | ||
|
|
||
|  | ||
|
|
||
| #### 28. Click on View Results | ||
|
|
||
|  | ||
|
|
||
| #### 29. Click on END | ||
|
|
||
|  | ||
|
|
||
| #### 30. Click on output | ||
|
|
||
|  | ||
|
|
||
| #### 31. Click on form\_output | ||
|
|
||
|  | ||
|
|
||
| #### 32. Click on ... | ||
|
|
||
| You'll see very similar to the below, where you'll see a list of the forms that have been output! You may not have three, that's fine as it just shows what you have access to. | ||
|
|
||
|  | ||
|
|
||
| > #### ⚠️ Ooooft! | ||
| > | ||
| > Okay, that was a lot. Building a workflow can be daunting, but if you ever have a problem know that everyone at Rewst wants to help you succeed! If you have had any issues with this, make sure you utilise your Discord private channel and tag ROC Support. |
41 changes: 41 additions & 0 deletions
41
documentation/app-platform-coming-soon/getting-started-1/create-your-first-app.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| # Create your first App | ||
|
|
||
| *** | ||
|
|
||
| ## Hello World - App Creation | ||
|
|
||
| *** | ||
|
|
||
| #### 1. Navigate to the Rewst Platform | ||
|
|
||
| Start pretty simply, load up the Rewst platform and you'll see the dashboard | ||
|
|
||
|  | ||
|
|
||
| #### 2. Click on App Builder | ||
|
|
||
| Expand the App Builder menu on the left nav menu | ||
|
|
||
|  | ||
|
|
||
| #### 3. Click on Apps | ||
|
|
||
| Navigate to the Apps section under App Builder, where you'll find all of your created apps! | ||
|
|
||
|  | ||
|
|
||
| #### 4. Click on Create New App | ||
|
|
||
|  | ||
|
|
||
| #### 5. Enter a Name | ||
|
|
||
| Give your new app a name, we'll use "hello-world" in our examples. Note how it automatically creates a URL based on your org name and the [rew.st](http://rew.st) domain. Once created, you can even assocate a custom domain! | ||
|
|
||
|  | ||
|
|
||
| #### 6. Click on Create | ||
|
|
||
|  | ||
|
|
||
| **Congratulations! You just created your first Rewst App!** |
Oops, something went wrong.