Panel |
---|
borderColor | purple |
---|
borderWidth | 1 |
---|
titleBGColor | #ddccff |
---|
borderStyle | solid |
---|
title | New Feature |
---|
|
HTML Code is a new feature in Joget DX 8 Page Components. |
Introduction
You can use HTML Code Component to design the layout or code in HTML/CSS/JS.
![](/community/download/attachments/208703617/html%20page%20component.png?version=1&modificationDate=1660119875000&api=v2)
![](/community/download/attachments/208703617/image2022-8-23_23-37-24.png?version=1&modificationDate=1661287045000&api=v2)
Name | Description |
---|
HTML | HTML is a page component can be used to achieve advanced form design by putting in any valid - HTML Code Block |
---|
| <b>this text is in bold</b> |
Code Block |
---|
| <input type="text" id="fname" name="fname" value=""> |
Info |
---|
| 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. |
JavaScript (jQuery is supported) Don’t forget to put in <script type="text/javascript"></script> block Code Block |
---|
| <script type="text/javascript">
alert("hello world");
</script> |
CSS Don’t forget to put in <style type="text/css"></style> block Code Block |
---|
| <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 menus in the app, since the first matching/conflicting ID will take precedence in page loading. |
|
Event Listening
Image Added
Figure 4: Configure Event Listening
Image Removed
Name | Description |
---|
Component ObjectMain Menu Component | 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 Added
|
Event Name | Custom Event Name |
Matched Action | - Hide Component
- Show Component
|
Add row Row | Adds another row for another event |