HTML layouts, components, etc.

Check our UI components page for samples

Error and success states

Goerp server returns errors with every response. Errors are available in .Data.Errors variable which is array of strings. So it is possible to go through this array and display errors on page.

Adding small block into the page (or into layout) may look like that:

{{ range .Data.Errors }}
<div class="error-row">
  <span>{{ . }}</span>
</div>
{{ end }}

In addition to errors, response contains success flag which is available only after posting form with POST action and may be found in .Data.FormControl.PostActionSuccessful. So, right after errors block may be reasonable to add success message as well.

{{ if .Data.FormControl.PostActionSuccessful }}
<div class="success-row">
  <span>Success!</span>
</div>
{{ end }}

Note

NOTE When you add the errors and success flag, you are not writing any flags. Goerp editor will check errors and success flag by itself.

Form inputs

Validation

The validation script is already embedded inside the script bundle.js

<script src="https://assets.erply.com/bo-prototype/js/bo-prototype.bundle.js"></script>

In order for the field to be important, it is enough to write in the required in input

<div id="Mobile-error">
  <input type="text" required class="input input-fullWidth"
         id="Mobile" name="Mobile"
         placeholder="(e.g., +1 800 555 5555)"

  <!--It is important to write pattern parametrs-->
  pattern="[\d+\- ()]*">

  <!--It is important to write the notification field in-->
  <p class="text-error text-small" id="Mobile-text" style="display: none;">
    Required and should only contain numbers, plus, dashes, and spaces</p>
</div>

Ready patterns For email

pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"

This pattern checks that an email address starts with one or more alphanumeric characters, which can be followed by any number of dots, hyphens, plus signs, and percent signs. This is followed by the @ symbol followed by the domain name For zipcode

pattern="^\d{5}(?:[-\s]\d{4})?$"

This pattern checks that the Zipcode meets the following criteria: Consists of 5 digits For phone

pattern="[\d+\- ()]*"

Ready patterns Types For string

pattern="^[a-zA-Z\s]+$"

For numbers

pattern="^?\d+$"

Checkbox

The value of the checkbox is set based on the checkbox state. If checked, then it is true, otherwise false. Please note that input should have form-input class.

<input type="checkbox" id="formInputOnlineAppointmentsEnabled" class="form-input"
       name="AccountAdminApi.WarehouseInput.OnlineAppointmentsEnabled"
       {{ if .Data.AccountAdminApi.WarehouseInput.OnlineAppointmentsEnabled }} checked {{ end }}>

<!-- if not checked, passed hidden field, otherwise both but first one have higher priority (FIFO) -->
<input type="hidden" name="AccountAdminApi.WarehouseInput.OnlineAppointmentsEnabled" value="false">
<label for="formInputOnlineAppointmentsEnabled">Online appointments</label>