Skip to content

Commit

Permalink
Fixed typos in example paths and made minor improvements (#1698)
Browse files Browse the repository at this point in the history
  • Loading branch information
simplykatsa committed Feb 15, 2024
1 parent b246179 commit f1afb08
Show file tree
Hide file tree
Showing 8 changed files with 22 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ layout_name: 1col
hCaptcha can be configured to run in the "invisible" mode. Invisible mode means no checkbox is used, and the challenge will be displayed when the user attempts to submit the form.
To use the invisible mode, you must add `invisible: true` to the spam_protection tag as below.

#### app/view/pages/form_with_captcha.liquid
#### app/views/pages/form_with_captcha.liquid

```liquid
{% raw %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,9 @@ Now, when you go to your instance URL, you should see the application title that

Let’s assume you would like to add an About me page to your application that will show some personal information, and you would like this page to be available under the `/about` URL.

On platformOS, this is a straight-forward operation. When you add a new file called `about.liquid` and save it in `app/view/pages/` folder, it will automatically be visible under the /about URL on your instance. The file name basically becomes the URL.
On platformOS, this is a straight-forward operation. When you add a new file called `about.liquid` and save it in `app/views/pages/` folder, it will automatically be visible under the /about URL on your instance. The file name basically becomes the URL.

As described above, create a new file called `about.liquid` in the `app/view/pages/` directory:
As described above, create a new file called `about.liquid` in the `app/views/pages/` directory:

#### app/views/pages/about.liquid

Expand Down Expand Up @@ -161,7 +161,7 @@ li {

You still need to **link the CSS file on your page**. The proper place for this would be the `app/views/layouts/application.html.liquid`:

#### app/view/layout/application.liquid
#### app/views/layouts/application.liquid

{% raw %}
```liquid
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Run the `pos-cli gui serve <environment>` command to start the administration in
pos-cli gui serve dev
```

Then, go to [http://localhost:3333](http://localhost:3333) in the browser and click the _Go to GraphiQL_ link.
Then, go to [http://localhost:3333](http://localhost:3333) in the browser and click the _GraphiQL_ link.

In the GraphiQL tool, paste your mutation in the left text area, and then expand the bottom section called Query variables where you can pass the ID of the item you want to remove. Assuming you have a database record with the `id` equal to `1`:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,15 @@ To test the query, you are going to use one of the tools built in the `pos-cli`.
pos-cli gui serve <environment>
```

When the application is running, go to [http://localhost:3333](http://localhost:3333) in your browser and choose _Go to GraphiQL_. Paste the GraphQL query you’ve just written to the text area on left. Pressing the big play button on top should result in the output of the query being presented in the right column.
When the application is running, go to [http://localhost:3333](http://localhost:3333) in your browser and choose _GraphiQL_. Paste the GraphQL query you’ve just written to the text area on left. Pressing the big play button on top should result in the output of the query being presented in the right column.

<img loading="lazy" src="{{ 'images/get-started/todo/gui_graphiql_query.jpg' | asset_url }}" alt="GraphiQL running the test query for our To do app">



## Rendering the data on a page

Assuming you have a page that you want to present the data on, and the query that will get the data, request it using Liquid’s `graphql` tag as follows:
Assuming you have a page that you want to present the data on, and the query that will get the data, request it using Liquid’s `graphql` tag as follows in your `app/graphql/item/search.graphql` file.

{% raw %}
```liquid
Expand All @@ -73,9 +73,9 @@ Assuming you have a page that you want to present the data on, and the query tha
```
{% endraw %}

You don’t have to use the full path to the GraphQL query as the platform knows where to look for those. That simple line will run the query (placed in `app/graphql/item/search.graphql`) and assign the results to the variable `items`.
You don’t have to use the full path to the GraphQL query as the platform knows where to look for those. That simple line will run the query and assign the results to the variable `items`.

The results are in the form of a _hash_. If you are comming from the JavaScript or PHP world you might name those _objects_.
The results are in the form of a _hash_. If you are coming from the JavaScript or PHP world you might name those _objects_.

```javascript
"records": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -230,9 +230,9 @@ endif

If you have never seen Liquid before, don’t worry, the syntax will become familiar after a little bit of using it.

The last thing left for you to do before testing would be to add the URL to your newly created page in the `<form>` so that when the user submits the form, it will redirect to the page that controlls the process of saving the data. Let’s get back to `app/view/pages/index.liquid` and update the code:
The last thing left for you to do before testing would be to add the URL to your newly created page in the `<form>` so that when the user submits the form, it will redirect to the page that controlls the process of saving the data. Let’s get back to `app/views/pages/index.liquid` and update the code:

#### app/view/pages/index.liquid
#### app/views/pages/index.liquid

```html
<form action="/item/create" method="post">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ As a first step, you need to **enable sending emails** on the _staging_ instance

To set the test email, log in to the [Partner Portal](https://partners.platformos.com/) and choose the instance from the [Instances](https://partners.platformos.com/instances) list.

Click on the _Update Configuration_ button, then click on _Switching to edit mode_. Edit the desired values.
Click on the _Update Configuration_ button, then click on _Switching to edit mode_. Provide your credentials if asked (email address and password), then edit the desired values.

Look for a section of the configuration called `attributes` and change the value of the `test_email`. It needs to be set to the test email address to which all the emails for the instance will be sent to:

Expand All @@ -37,9 +37,9 @@ Remember to save the updates by clicking the _Update Instance configuration_ but

platformOS treats emails similarly to standard HTML pages. You can create a separate layout for the emails and use Liquid to pass any data to it. Start by creating the layout.

Assuming, for the purpose of this tutorial, that you would like an independent HTML structure for all of your emails, you can create a new layout in the `app/views/layout/` folder, in a file called `mailer.liquid`. The name can be anything you want.
Assuming, for the purpose of this tutorial, that you would like an independent HTML structure for all of your emails, you can create a new layout in the `app/views/layouts/` folder, in a file called `mailer.liquid`. The name can be anything you want.

#### app/views/layout/mailer.liquid
#### app/views/layouts/mailer.liquid

{% raw %}
```liquid
Expand Down Expand Up @@ -92,7 +92,7 @@ The topmost part of the code, between the dashed lines (`---`) is the page confi

For the email page, you need to configure the recipient email address (`to:`), the sender (`from:`), and the `subject` of the message.

You’ve created a new layout file specifically for this occasion, so line 5 tells the platform to use the file stored in `app/views/layout/mailer.liquid` as a scaffolding for the email content.
You’ve created a new layout file specifically for this occasion, so line 5 tells the platform to use the file stored in `app/views/layouts/mailer.liquid` as a scaffolding for the email content.

The last line is just the content of the email you’re going to send. Since you would like to pass the title of the item added to the list, you output the content of `data.title`. The `data` will be the name of the variable you are going to use in the GraphQL _mutation_ that will trigger sending the email.

Expand Down Expand Up @@ -158,7 +158,7 @@ method: post
graphql result = 'item/create', title: context.params.title
if result.record.id
+ graphql email = 'item/email/created', data: context.params
graphql email = 'item/email/created', data: context.params
redirect_to '/'
else
echo 'Something went wrong'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,9 @@ sign_in user_id: result.user_create.id
If the email provided by the user will be incorrect, a 500 error will be thrown - platformOS expects that the input validation will be done on Liquid level, and if GraphQL receives invalid input, it will thrown an error, which the developer will be able to see via `pos-cli logs` or `pos-cli gui serve` -> http://localhost:3333/logs. The error log should be self descriptive, and will look like this: `"Liquid error: [{\"message\":\"GraphQL Error: Email is not a valid email address\",\"locations\":[{\"line\":2,\"column\":3}],\"path\":[\"user_create\"],\"extensions\":{\"messages\":{\"email\":\"is not a valid email address\"},\"codes\":{\"email\":[{\"error\":\"email\"}]}},\"query\":\"create_user\"}]\n url: <your url>/user/create\n page: user/create"`


The last thing left to do is to create a Page to render a registration form to the User, allowing them to provide their email and password. Let’s create a file `app/view/pages/sign-up.liquid` with the following code:
The last thing left to do is to create a Page to render a registration form to the User, allowing them to provide their email and password. Let’s create a file `app/views/pages/sign-up.liquid` with the following code:

#### app/view/pages/sign-up.liquid
#### app/views/pages/sign-up.liquid

```liquid
<form action="/user/create" method="post">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ converter: markdown
---


There are three key steps for starting development on platformOS: [signing up on the Partner Portal](#sign-up-on-partner-portal), [creating an instance](#create-an-instance) and [installing the platformOS command line interface](#install-pos-cli).
There are three key steps for starting development on platformOS:
- [signing up on the Partner Portal](#sign-up-on-partner-portal),
- [creating an instance](#create-an-instance)
- [installing the platformOS command line interface](#install-pos-cli).


## Sign up on the Partner Portal
Expand Down

0 comments on commit f1afb08

Please sign in to comment.