Formatting the Page

So, we have a page with a title. Let's open it in a new browser window by entering the address: https://<account.domain>?/chtm/plugin/

For now, we see a "bare" page with the text "BMI Chart."

Let's add GetCourse styling around this page.

We'll return to the IDE to edit the code. Import the PluginLayout component from the @html/layout package and replace the <html> tag with it. In the parameters for the tag, we'll add ctx={ctx}.

import {jsx} from '@app/html-jsx'
import {PluginLayout} from '@html/layout'

app.html('/', async(ctx,req) => {
  return <PluginLayout ctx={ctx}>
    <h1>BMI Chart</h1>
  </PluginLayout>
})

Save it, and let's see what has changed in the preview on the right.

Adding PluginLayout

We can see that a bar and a menu appeared at the bottom, and the font of the title has changed.

Now, let's import another component, Container, from the @html/ui package and wrap all our content inside the PluginLayout with it, adding the parameter padding with the value xl.

import {jsx} from '@app/html-jsx'
import {PluginLayout} from '@html/layout'
import {Container} from '@html/ui'

app.html('/', async(ctx,req) => {
  return <PluginLayout ctx={ctx}>
    <Container padding='xl'>
      <h1>BMI Chart</h1>
    </Container>
  </PluginLayout>
})

Let's return to our separate page and refresh it.

We can see that our page now looks like a standard page within GetCourse, with a left menu and the font of our account.

Next, let's add a form to our template. For simplicity, we'll import three more tags from the html/ui package:

FormRow (form row)
Input (input text field)
Button (button)

We could do without them, but they will immediately add the necessary styles and reduce the amount of code we need to write. We'll use the standard HTML <form> tag.

Let's insert the form and a few lines to create the following code, while also adding the property width="sm" to the Container tag so that the form isn't too wide.

import {jsx} from '@app/html-jsx'
import {PluginLayout} from '@html/layout'
import {Container, FormRow, Input, Button} from '@html/ui'

app.html('/', async(ctx,req) => {
  return <PluginLayout ctx={ctx}>
    <Container padding='xl' width="sm">
      <h1>BMI Chart</h1>
      <form>
        <FormRow label='Height' description='in centimeters'>
          <Input name='height'/>
        </FormRow>
        <FormRow label='Weight' description='in kilograms'>
          <Input name='weight'/>
        </FormRow>
        <FormRow>
          <Button type='submit' primary>Add Entry</Button>
        </FormRow>
      </form>
    </Container>
  </PluginLayout>
})

Now let's go to the page preview and see what we've got.

So, we have a page with a form inside the GetCourse account layout. In the next lesson, we will add a handler for this form and start recording everything the user submits.