Versions Compared

Old Version 1

changes.mady.by.user Hugo

Saved on

compared with

New Version 2

changes.mady.by.user Aadrian Zarin

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Table of Contents

...

borderColorgreen
borderWidth1
titleBGColor#ddffcc
borderStylesolid
titleDefinition

Introduction

Custom HTML in Form Builder can be used to achieve advanced form design.

Get Started

The easiest way to see how the Custom HTML works is to use the existing built-in App Expenses Claims. Here are the steps:

StepsScreens (Click to view)
  1. Start the Joget Server and open the App Center.

  2. Log in as admin and click on the pencil icon on the Expenses Claim to open the Design App. (see Figure 1)

  3. Click on Expense Claim Form and you will be directed to the Form Builder.
  4. Hover the mouse over the Custom HTML element on the canvas and click on Edit to open up the Edit Custom HTML properties. (see Figure 2)

Image Added

Figure 1


Image Added

Figure 2


Custom HTML Properties

Edit Custom HTML

NameDescriptionScreen (Click to view)
IDElement ID

Image Added

Custom HTML

Custom HTML in Form Builder can be used to achieve advanced form design by putting in any valid -

  1. HTML

    Code Block
    titleSample
    <b>this text is in bold</b>

  2. JavaScript (jQuery is supported)
    Don’t forget to put in <script type="text/javascript"></script> block

    Code Block
    titleSample
    <script type="text/javascript">
alert("hello world");
</script>

  3. CSS
    Don’t forget to put in <style type="text/css"></style> block

    Code Block
    titleSample
    <style type="text/css">
body{
 font-size: 100%;
}
</style>

Image Removed

Figure 1: Screenshot highlighting a Custom HTML element in sample HR Expenses Claim app

Image Removed

Figure 2: Custom HTML Properties

Image Removed

Figure 3: Custom HTML Properties - Advanced Options

...

Advanced Options
NameDescriptionScreen (Click to view)
LabelElement Label to be displayed to the end-user.

Image Added

Auto populate saved value?Toggle to auto-populate saved value