| 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.
Configure HTML Code
Image Removed
Image Added
| Name | Description | Custom 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. |
HTMLHTML 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
| Name | Description |
|---|
| Component Object | Main Menu Component |
| Event Name | Custom Event Name |
| Matched Action | - Hide Component
- Show Component
|
| Add row | Adds another row for another event |