Versions Compared

Old Version 19

changes.mady.by.user Gerryn Goh Jo-Vee

Saved on

compared with

New Version Current

changes.mady.by.user ady

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Introduction

English
Panel
borderColorpurple
bgColorwhite
borderWidth1
titleBGColor#ddccff
borderStylesolid
titleNew Feature

This is a new feature in Joget DX 8.

Button is a page component where App Designers can embed a hyperlink for end users to access other windows (or webpages).

...

  1. Login as Admin and click the Pencil icon on Joget DX 8 Showcase to open the App Composer.
    Image Removed
    Image Added

  2. Click into 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 anywhere you like).

  4. You can name your Label and Menu ID to something meaningful, and write a description in the Content of your Button demo menu



  5. Now that our Button testing environment is all set, we can click into Edit Page Components to check out the Button page component.

  6. Drag and drop the Button page component into the page for editing.



  7. Provide the Button with meaningful Label and ID.

  8. Copy paste the link of App Center window and set is as the Hyperlink.

  9. Select New Window as the Hyperlink Target so that App Center is opened up in a new window when end users click the ButtoButton
    Image Removed
    Image Added

Button Page Component Properties

...

NameDescription

Label

Button label.

ID

Page component ID.

Since Button is not an input field, we can leave it as it is.

Please see Form Element for more information about defining the IDs and list of reserved IDs.

HyperlinkLink of the window to be accessed after Button is clicked.
Hyperlink Target

Available Options:

  • Current Window
  • New Window
  • Top Window
  • Parent Frame
On ClickFunction to be executed when Button is clicked.
Display Type

Available Options:

  • Link Button
  • Primary Button
  • Secondary Button
  • Success Button
  • Danger Button
  • Warning Button
  • Info Button
  • Light Button
  • Dark Button

Event Listening

Image Removed

...

The object that will be listening for an event.

If there is a new Page Component added into the UI, the selection will be displayed under Component Object.

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 Removed

...

Available Options:

  • Hide Component
  • Show Component

AJAX & Events

Events are fundamental to creating interactive and dynamic web pages and AJAX enables the development of more dynamic and interactive web applications without the need to reload the entire page.

Configuration of Ajax & Events

...

.