Button

The Button component in Joget allows App Designers to embed a hyperlink that directs end-users to other windows or web pages. It enhances the app's navigation experience by providing quick access to external resources or different application sections.

How does it work?

Test the Button in the built-in Joget DX 8 Showcase app to see how it works. Follow these steps:

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 Button.
   
3. Drag and drop the Rich Text UI element into the New In DX 8 category (or any desired location).
4. Name your Label and Menu ID meaningfully, and write a description in the Content of your Button demo menu.
   
5. Click Edit Page Components.
   
6. Drag and drop the Button page component into the page for editing.
   
7. Provide the Button with a meaningful Label and ID.
8. Copy and paste the link of the App Center window and set it as the Hyperlink.
9. Select New Window as the Hyperlink Target to open the App Center in a new window when the Button is clicked.
   

Configure button

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

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

• Label: The text displayed on the Button.
• ID: The unique identifier for the Button component. This is not an input field, so it can be left as is.
  See Form Element for more information about defining the IDs and the list of reserved IDs.
• Hyperlink: The URL that the Button will direct to when clicked.
• Hyperlink Target:
  • Current Window
  • New Window
  • Top Window
  • Parent Frame
• On Click: Function to be executed when the Button is clicked.
• Display Type:
  
  • Link Button
  • Primary Button
  • Secondary Button
  • Success Button
  • Danger Button
  • Warning Button
  • Info Button
  • Light Button
  • Dark Button

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.