Main page
Colors
Page list
Page add
Simple page
Alert Window
Pagination
Validation
Animation
Accordion
Autocomplete
Dialogue
Charts

Building a page add with Goerp

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

example2

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

<script src="/assets/js/menu.bundle.js" type="application/javascript"></script>
<script src="//assets.erply.com/bo-prototype/js/bo-prototype.bundle.js"</script>

Step 2 - Create top navigation

example

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

<span class="crumb-active title-main">{{if .Data.DataList.Id}} Edit table {{else}} New table {{end}}</span>

Text that shows which page the user is currently on. The display of the text depends on the conditions in the if-else block.


<div class="layout-row-between">
   <div class="breadcrumbs  margin-left-16 margin-top-16">
    <a href="./data-list-page?AccountAdminApi.DataQuery.PageNo=1&
     AccountAdminApi.DataQuery.RecordsOnPage=5"
   class="crumb"><span class="text title-main margin-left">Page</span></a>
  <span class="icon-Chevron-Right-Small"></span>
  <span class="crumb-active title-main">
{{if .Data.Errors}}Edit page
  {{else if .Data.AccountAdminApi.DataQuery.Id}}
   Edit page{{else}}New page{{end}}
  </span>
  </div>

<div class="layout-row-end margin-left-16 margin-top-32 margin-right-16">
 <a class="button button--outlined margin-right-4" href="./data-list-page">
  Cancel</a>
  <button  type="submit" data-save  class="button  button--green"
  id="save" href="./data-list-page" >Save</button>
 </div>
</div>

Step 4 - Create input form

Note:This attribute is required to wrap all inputs at the beginning of the partial. It has a "POST" method attribute and a "data-btn" attribute with an id of "entity-form". Without this attribute, no data will be sent.

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
<select>
Tag for creating a dropdown list.
{{ range .Data.DatatAdminApi.DataList }}
Template tag used to iterate over a collection.
{{ if eq .ID $.Data.AccountAdminApi.PointOfSale.WarehouseId }}

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 }}
      <option value="{{ .Data }}" {{ if eq $.Data.Api.DataInput.DataID }}
selected {{ end }}>{{ .Data }}</option>
{{ 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>