Versions Compared

Key

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

...

You can use HTML Code Component to design the layout or code in HTML/CSS/JS.


Image RemovedImage Added

Configure HTML Code

...

NameDescription
HTML

HTML is a page component can be used to achieve advanced form design by putting in any valid -

  1. HTML

    Code Block
    languagexml
    titleSample
    <b>this text is in bold</b>
    Code Block
    languagexml
    titleSample
    <input type="text" id="fname" name="fname" value="">
    Info
    titleThe <input> Element

    Any <input> element in the custom HTML will automatically create a database table column based on the name attribute. 

    To retrieve the value back, you can enable Auto populate saved value? under Advanced Options below.

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

    Code Block
    languagexml
    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
    languagexml
    titleSample
    <style type="text/css">
    body{
     font-size: 100%;
    }
    </style> 
ID

Item link slug. Optional field.

Info

Ensure that value defined here is unique to other userview UI menus in the app, since the first matching/conflicting ID will take precedence in page loading.

...

Figure 4: Configure Event Listening

NameDescription
Component Object

The object that will be listening for an event.

This field will dynamically show selectable options depending on the page components used. e.g: if there is a page component called manage meeting in the page, it will automatically show up in this field's select box.

Image Modified

Event NameCustom Event Name
Matched Action 
  • Hide Component
  • Show Component
Add RowAdds another row for another event