Knowledge Base
  • Select Role
  • English
  • Login

HTML Code

The HTML Code component allows users to design the layout or code directly using HTML, CSS, and JavaScript. This component provides advanced customization options for creating a tailored user interface within the Joget platform.

How does it work?

The HTML Code component in Joget enables users to design and customize the layout directly using HTML, CSS, and JavaScript. This component offers advanced customization options for creating a tailored user interface. Here's how to use and configure it:

  1. Login as Admin and Click the Pencil icon on Joget DX 8 Showcase to open the App Composer.
  2. Click the Joget DX 8 Showcase UI to create an environment for testing the HTML Code.
  3. Select an UI element into any category you like. For example, Accordion.
  4. Click Edit Page Components.
  5. Drag and drop the HTML Code component from the component palette onto your page.
  6. Configure HTML Code:
    • Enter your HTML, CSS, and JavaScript code directly into the component.
    • Utilize the flexibility to create custom layouts and interactive elements.

      Code Example:
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #e8f5e9;
            margin: 0;
            padding: 0;
        }
        .header {
            background-color: #2e7d32;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .container {
            padding: 20px;
        }
        .button {
            background-color: #388e3c;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
        }
        .button:hover {
            background-color: #1b5e20;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Welcome to Joget</h1>
    </div>
    <div class="container">
        <p>This is an example of using the HTML Code component in Joget.</p>
        <button class="button" onclick="showMessage()">Click here</button>
        <p id="message" style="display:none;">You have clicked the button!</p>
    </div>

    <script>
        function showMessage() {
            var message = document.getElementById('message');
            message.style.display = 'block';
        }
    </script>
</body>
</html>

  7. Click Preview to see how your code renders on the page. Make any necessary adjustments to ensure functionality and design

By using the HTML Code component, you can leverage advanced coding techniques to create a unique and interactive user interface within the Joget platform.

Configure HTML Code

To configure the HTML Code component properties, in UI Builder, drag and drop the Rich Text UI element into any category to enable the button Edit Page Components, click on it, and Drag and drop the HTML Code page component into the page for editing.

When adding the HTML Code component, you will see the following fields available for configuration:

  • HTML
    • HTML:
      • Description: Use this field to input any valid HTML code.
      • Example: <b>this text is in bold</b>

        Input Elements: Any <input> element included in the custom HTML will automatically create a corresponding database table column based on the name attribute.
      • Example: <input type="text" id="fname" name="fname" value="">
      • Retrieving Values: To retrieve the value back, enable Auto populate saved value? under Advanced Options.
    • JavaScript: Don’t forget to put in <script type="text/javascript"></script> block
      • Description: You can include JavaScript (jQuery is supported) within the <script> tag.
      • Example:
        <script type="text/javascript">
alert("hello world");
</script>
    • CSS: Don’t forget to put in <style type="text/css"></style> block
      • Description: CSS styles can be added within the <style> tag to style the HTML elements.
      • Example:
         
        <style type="text/css">
body{
 font-size: 100%;
}
</style>
  • ID: Item link slug. Optional field. This value must be unique to ensure the correct element is referenced during page loading.
    The first matching/conflicting ID will take precedence when the page loads.

AJAX & events

Events are fundamental to creating interactive and dynamic web pages, and AJAX enables the development of more responsive web applications without reloading the entire page. In the context of the Accordion component, AJAX & Events can be configured to enhance interactivity and user experience.

Created by Julieth Last modified by Aadrian on Dec 13, 2024
Tags:
Previous Horizontal Rule NextImage