User Interface

The architecture of the CoolCalc applications permits the use of multiple variations of static HTML. Essentially, any static HTML that contains the required DOM elements for a given REST resource can be used to render that resource.

For example, if you had a REST resource with the following structure:

{ "dog" : {
        "breed": "Mutt",
        "favoriteActivity": "Sleep"
    }
}

Then the CoolCalc user interface libraries can render this resource in any static HTML that contains at minimum the following elements. Labels, wrapper divs, styles or other HTML details will not affect functionality:

<form name="dog">
    <input type="text" name="breed">    
    <input type="text" name="favoriteActivity">
</form>

Even replacing the INPUT elements with SELECT elements will still work:

<form name="dog">
    <select name="breed">
        <option>Mutt</option>
        <option>Not a mutt</option>
    </select>
    <input type="text" name="favoriteActivity">
</form>

Given this flexibility the CoolCalc MJ8 application may be configured "out of the box" to use one of two user interface variants available on the CoolCalc CDN:

• A user interface implemented using the Unkuna front end framework. This user interface is designed as a fixed layout.
• An alternate user interface implemented using the popular Bootstrap front end framework. This user interface is designed as a fluid layout.

Your choice of user interface variant (skin or flavor if you wish) is entirely aesthetical. The fluid Bootstrap layout is generally considered a more appropriate solution if you have larger branded headers and footers whereas the fixed Unkuna layout was designed for optimum use of visible space with little or no headers and footers.

A local JavaScript library contains configurations for your specific installation as well as code to initialize the CoolCalc user interface on page load. In most cases the configuration on the script side is relatively trivial, requiring only a few configuration attributes related to domain names and URLs of the CoolCalc installation.

The local JavaScript library also implements the script side of a few utility features that must be implemented by the client, specifically HTML to PDF conversion and MJ8 report email/share functionality. See the section on customizing CoolCalc for details.

On page load, the CoolCalc UI normally opens on the end user's project list. If any of your applications are integrating directly with the CoolCalc API it may be desirable to open the UI on a specific REST resource. This can be accomplished by providing the HATEOAS "self" link of that resource as a "hateoasLink" URL query param.

For example, the "self" link of an MJ8 project with id 2029 may be:

{ "href":"https://stagingapi.coolcalc.com/staging/dealers/1626443386/MJ8Projects/2029",
    "rel":"self",
    "resourceName":"MJ8Project",
    "title":"Project",
    "description":"95 Shorrey Place",
    "status":"Complete"
}

To open the user interface on that resource, open the HTML page where the UI renders with a URL query param "hateoasLink" which contains a JSON stringified representation of the link:

• https://my-domain.com/coolcalc/ui/mj8/v-bootstrap/current/restui.html?hateoasLink= { JSON string here }

When your own applications create projects directly in the CoolCalc API by making a POST request to the project list URL, the output of the API will be the updated project list, not the newly created project. The URL of the newly created project will be specified in the HTTP "Location" header in the response to the POST request. Since the HTTP "Location" header is only a URL, opening the user interface on the newly created project requires building the HATEOAS link JSON string manually. You do not need to build all of the attributes, for the purposes of the hateoasLink URL query param the "href" attribute is the only required attribute.

For example, if the HTTP "Location" header in response to a POST request is:

• "https://stagingapi.coolcalc.com/staging/dealers/1626443386/MJ8Projects/2029"

You can build the HATEOAS link object as:

• { "href":"https://stagingapi.coolcalc.com/staging/dealers/1626443386/MJ8Projects/2029" }

Then you can open the CoolCalc user interface with a stringified representation of the HATEOAS link object:

• https://my-domain.com/coolcalc/ui/mj8/v-bootstrap/current/restui.html?hateoasLink= { JSON string here }

Keep in mind that opening the UI on any resource requires that the current session user is the owner of that resource. In the example above, the account nr. of the currently logged in user should be "1626443386"