Agile-Developer

Custom User Interface For Reports

Axpert 11

TStructs (Forms)

IViews

Scripts

Axpert Jobs

Axpert Cards

HTML Plug-ins

Users & Roles

Workflow

Axpert API

Application Var/Params

Publish Axpert Apps

Axpert Mobile

Settings

Utilities

Customization

WebServices

Axfast

Custom User Interface For Reports

The user interface of IViews can be customized to change the look and feel. This is done by doing the following steps.

  1. Create HTML using Handlebars expression format. Refer Handlebars reference website.
  2. Handlebars template will refer iview column names as expressions.
  3. Handlebars will add flexibility of writing expressions, conditions and loops in html.
  4. This Template may be repeated for every row.
  5. Once the HTML is ready, open the templates open form menu in Axpert dot net
    1. Enter the iview name,
    2. Copy the HTML into the text box and save. Select “All” in the Events field.

Agile developer lowcode User Interface

Consider an IVIew that returns a single row as below:

Agile developer lowcode User Interface

This iview can be changed as below:

Agile developer lowcode User Interface

Agile developer lowcode User Interface

Agile developer lowcode User Interface

Agile developer lowcode User Interface

Copy this jS file to the webcode root\<projectname>\js\ThisFile.js. The <projectname> is the actual project name.

A reference to this file should be added in custom.cs as below

AddCustomLinkToIView(“ivname”, “js/MyProfileView.js”);

ATTACH CUSTOM CSS TO IVIEW

You can now attach a CSS file to an Iview. In this example you can attach CSS to position the controls appropriately, hiding the tool bar and making this HTML responsive. A sample CSS is provided below that is relevant to this example.

Agile developer lowcode CSS Iview

The CSS should be saved into a file with any name. In this case let us consider the name as MyProfileView.CSS. This file should be copied to webcode root\<projectname>\css\ folder.

A reference to this file should be added in custom.cs as below

AddCustomLinkToIView(“ivname”, “Css/MyProfileView.css”);

CUSTOM IVIEWS WITHOUT HANDLEBAR TEMPLATES

Consider an Iview as below that needs to be changed as given in the pic below:

Agile developer lowcode User Interface

This iview can be changed as below

Agile developer lowcode User Interface

Agile developer lowcode User Interface

Steps:

  • Create a new javascript file that contains a function named axAttachExternalCustomPlugin. The required custom code should be written within this function.
  • Copy this jS file to the webcode root\<projectname>\js\ThisFile.js. The <projectname> is the actual project name.
  • A reference to this file should be added in custom.cs as below
    • AddCustomLinkToIView(“ivname”, “js/MyProfileView.js”);
  • IfaxAttachExternalCustomPluginfunction is referred then existing iview table will not be drawn instead developer have to append generated data/html to $(“#GridView2Wrapper”)

Agile developer lowcode