Container

The Page Component Container in Joget is designed to help organize and manage other page components within a layout. Users can place containers on a page and insert additional components or nest other containers within them. This feature enhances the structural flexibility and maintainability of complex page designs.

How does it work?

The Page Component Container in Joget is used to organize and manage other page components within a layout, enhancing the structural flexibility of complex designs. Here’s how you can 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 Container.
   
3. Select an UI element into any category you like. For example, Component Layout.
4. Click Edit Page Components.
   
5. Drag and drop the Container component from the component palette onto your page.
6. Insert Components:
   • Place additional components or nest other containers within the Container.
   • Arrange and organize components to create a clear and maintainable layout.
7. Adjust properties such as size, style, and alignment to fit your design requirements.
   
8. Click Preview to see how the container organizes your components and make adjustments as needed.
   

By using the Container component, you can efficiently structure your page, making it easier to manage and update complex designs.

Configure container

To configure the Container 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 Container page component into the page for editing.

When adding the Container component, you will see the following field available for configuration:

• ID: Optional custom ID for the container. This ID must be unique within the page components to ensure correct referencing.

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.