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

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.

R1.PNG

Consider an IVIew that returns a single row as below:

R2.PNG

This iview can be changed as below:

R3.PNG

R4.PNG

R5.png

R6.PNG

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.

R7.png

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:

R8.PNG

This iview can be changed as below

R9.PNG

R10.PNG

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”)

R11.png