# View construction (and tools)¶

Although most of our code base is being processed server side, some things just require interaction on the clients machine for a fluent user experience.

In this chapter we will try to explain some of the components we use when designing pages and how pages are usually constructed.

## Layout¶

To ease reading of volt templates, we recommend using a fixed layout when creating templates. The base of our rendered page always contains the standard layout which is hooked via our standard frontend controller.

Below you will find the sections and their order, which we will describe briefly.

{#
#}
<script>
$( document ).ready(function() { {2} UI code }); </script> {3} page html {{ partial("layout_partials/base_dialog",...)}} {4} dialog forms (see getForm())  1. The copyright block, 2 clause BSD with the authors on top 2. Javascript code which belongs to this page 3. HTML code, usually starts with some <div> containers and uses standard Bootstrap 3 layouting 4. When forms are used, these are placed last, these will be generated to the client as standard html code ## ajaxCall¶ ajaxCall(url, sendData, callback) is a wrapper around jQuery’s $.ajax call preset to a POST type request and wrapping the sendData into a json object. The callback function will be called with the data and status received from the endpoint.

example usage
ajaxCall('/api/monit/status/get/xml', {}, function(data, status) {
console.log(data)
});


## saveFormToEndpoint¶

saveFormToEndpoint(url, formid, callback_ok, disable_dialog, callback_fail) is the opposite of mapDataToFormUI() and retrieves the data from the form and sends it to the configured (url) endpoint as json structure.

The response data looks similar to the example data in mapDataToFormUI, but more condensed since selections will be returned as single (separated) values, such as lan,wan if both options where set.