Building a page add with Goerp

Before creating a website, it may be wise to show a draft of the page layout:

Layout project

If you are working with the application for the first time, you can use the demo source code and see the full version. You can use it or create a new project. To do this, go to the goerp editor and create a new page. Then copy the page source code and save. You are ready to go!

Note: If you don't know how to use the data, we advise you to read our goerp guide

Step 1 - Connect the menu in the base layout

Create a basic layout in the goerp editor and paste the menu top into the body of the template


<div class="menu-container">
  <new-user-menu
          id="main-menu"
          clientCode="{{ .Session.ClientCode }}"
          sessionKey="{{ .Session.SessionKey }}"
          accountLang="eng"
          theme="dark"
          user="{{ .Session.User.FullName }}">
  </new-user-menu>
</div>

Connect also js for menu and general script

Step 2 - Create Subnavigation

We must wrap the top navigation in a partial so as not to duplicate the code on each page.

We also recommend learn partials in more detail in goerp guide

This is a Go template code that defines a partial template named "name-partial". The partial template generates a navigation bar that contains three buttons with links, where the button with the name "Name1" is initially active. The navigation bar is generated based on a parameter named "name" passed to the partial template. The template uses Go's built-in functions, such as "eq" to check for equality between the passed "name" parameter and the button name.

The second part of the code calls the "top-navigation-partial" template and passes it a map with the "name" parameter set to "Name1". This means that the generated navigation bar will have the "Name1" button initially active.



{{ define &quot;name-partial&quot; }}
<div id="navigation" class="navigation layout-row-between">
<div class="tab__head">
    <div class="layout-row-start">
    <a class="button--navigation {{ if eq .name "Name" }} active {{ end }}"
    href="./link">Name</a>
    <a class="button--navigation {{ if eq .name "Name-1" }} active  {{ end }}"
     href="./link">Name</a>
    <a class="button--navigation {{ if eq .name "Name-2" }} active {{ end }}"
    href="./link">Name</a>
    </div>
</div>
{{ end }}

{{ template "top-navigation-partial" (mkMap "name" "locations")  }}

Step 3 - Create header with button


<div class="margin-left-48 margin-top-8 aligner aligner--spaceBetween">
 <div class="layout-row-start">
  <i class="icon-Alert-Circle margin-righ margin-righ-4"
    style="font-size: 25px; color: cornflowerblue;"></i>
    <p class="text-primary">
    When you click the button the system will save the credentials</p>
 </div>
</div>

Step 4 - Create input form

Simple Input

The "value" attribute also sets the initial value of the input field that will be shown to the user the first time the form is displayed.


//simple field
<div class="col margin-8">
<label class="label" for="Data">Data</label>
<div class="input input-fullWidth">
   <input type="text" id="Data" maxlength="5"
   name="Api.DataInput.Data"
   value="{{.Data.Api.DataInput.Data }}">

Dropdawn

For dropdown we use these main attributes

Tag for creating a dropdown list.

Template tag used to iterate over a collection.

A conditional statement that checks if the value of the data matches the value of the selected data in the form. If the value matches, then the item will be selected in the dropdown list.


//dropdawn
<div class="col margin-8">
<label class="data" for="data">Data</label>
<div class="select select-fullWidth">
<select id="data" name="Api.DataInput.DataID">
   <option value="0">Not selected</option>
{{ range .Data.Api.DataList }}
      &lt;option value=&quot;{{ .Data }}&quot; {{ if eq $.Data.Api.DataInput.DataID }}
selected {{ end }}&gt;{{ .Data }}&lt;/option&gt;
{{ end }}
</select>
</div>
</div>
</div>

Checkbox

The "input" field, passes the value "false" for the default option. If the option is already set, then the checkbox displays its current value using the "checked" attribute. When submitting the form to the server, the option will be passed in the request parameters "DataAdminApi.Data.DataEnabled" with the appropriate value.


<input type="hidden" name="DataApi.Data.DataEnabled" value="false">
<input type="checkbox"  id="Data"  class="form-input"
name="DataApi.Data.DataEnabled"
{{ if .Data.DataApi.Data.DataEnabled }}checked {{ end }}>
<label  for="Data">Some text</label>