Agile-Developer

Custom HTML In Forms

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 HTML In Forms

Consider a Tstruct that shows a form as below which needs to be changed as in pic given below this pic.agile developer lowcode HTML Form

This tstruct can be changed as below

agile developer lowcode HTML Form

STEPS:

  • Go to inspect elements in chrome(recommended) or any other modern browser.
  • Change the html or css in that form iframe as desired.
  • Go to body of same iframe and copy the complete html
  • Go to design mode of that same tstruct.
  • Click HTML button.

agile developer lowcode HTML Form

  • Save copied html:
    • paste html in Custom HTML panel
    • click on Ok
    • Close Popup
    • Go to Run Mode

agile developer lowcode HTML Form

CUSTOM CSS AND JS IN TSTRUCTS

Consider changing a form given below to the one show below this pic and display it as a popup from an IVIew named ThisView.

agile developer lowcode HTML Form

This tstruct can be changed as below:

agile developer lowcode HTML Form

agile developer lowcode HTML Form

STEPS:

  • Create a HTML file along with required CSS & Java Script and save into a file with the name of tstruct.
  • This file should copied into the webcode root folder\<projectname>\tstruct\css\<transid>.css
  • Go to developer options in Axpert, add a key with following settings
    • Property name = Custom CSS
    • Property value = true
    • Form name = Select the caption of this form
    • Role name = Select “ALL”. You may select the role name if the need is to apply the special css only for certain roles.

CODE BLOCK:

The HTML code for achieving this kind of an interface. This code is general HTML, CSS code and has nothing related to Axpert.

agile developer lowcode HTML Form

Use this Java script to popup the form from an IView

Create a javascript file with the function given below and save it into ThisFile.JS. 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(“ThisIView”, “Js/ThisFile.js”);

agile developer lowcode HTML Form

Consider another example as below

agile developer lowcode HTML Form

This tstruct can be changed as below

agile developer lowcode HTML Form

agile developer lowcode HTML Form

STEPS:

  • Write the required Java Script code and store into a file named as <transid>.js. (Trans id is the name of the tstruct).
  • This file should copied into the webcode root folder\<projectname>\tstruct\JS\<transid>.js
  • Go to developer options in Axpert, add a key with following settings
    • Property name = Custom Java Script
    • Property value = true
    • Form name = Select the caption of this form
    • Role name = Select “ALL”. You may select the role name if the need is to apply the special Java script only for certain roles.

The code for the above Javascript is given below:

agile developer lowcode HTML Form