Purpose
You want to show a modal / non-modal dialog styled with header and buttons.
Background
In many applications the user should be able to change some properties of components which can be scripted. For this function you need to create a dialog with input, title, buttons. As I had the same requirement, here is an application with 2 options:
- dialog - create from panels (allows better styling and also positioning in the middle of the application
- popup - styles applied to popup, which can be shown on fix position.
The example is based on standard functionality and does not require any SDK extension.
Show Case (Dialog with Panel)
In the case of dialog with Panel Component, you can use additional css classes for the main panel used as dialog and style them. One part of the styling is the positioning class (in the example, the sizes are fix and connected to the class):
.dialog-frame-680x480 { z-index: 1000010 !important; position: fixed; top: 50%; left: 50%; margin-left: -340px; /* half-width */ margin-top: -240px; /* half-height */ width: 680px; height: 480px;
}the z-index property makes sure this is always in the foreground. the top/left with combination of margin and size are assuring it is always centered.
This is how it looks like.
Show Case (Popup)
In this case of dialog with the Popup Component you can use the standard functionality of popup (eg property modal / non-modal). The only problem is to assure it is centered - but probably also this can be solved by css.
This is how it looks like.
The Dialog Content
This is the main part of the dialog. To make it similar to the known dialogs framework, we have to split it into 3 areas:
- Dialog Top with Title, Description and "X" image
- Dialog Content with the area to self-define
- Dialog Bottom with buttons
The attached CSS is making some styles on all the areas to make the look & feel.
.dialog-design { background-color: #FAFAFA !important; border:1px solid #647b94; box-shadow:rgba(0, 0, 0, 0.4) 0px 0px 2px 1px;
}
.dialog-design-background { background-color: #FAFAFA !important;
}
.dialog-top { background-color: #FFFFFF !important; border-bottom-style:solid; border-bottom-color:#BFBFBF; border-bottom-width:1px;
}
.dialog-bottom { background-color: #FFFFFF !important; border-top-style:solid; border-top-color:#BFBFBF; border-top-width:1px;
}In addition, some design of the title and description can be made:
.dialog-title { font-size: 24px !important; font-weight: normal !important; font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif !important; color: #333333 !important;
}
.dialog-description { font-size: 12px !important; font-weight: normal !important; font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif !important; color: #333333 !important;
}Dialog Shadow
The "Shadow" panel is only needed for the dialog build up with panels, this is simulating the "modal" mode and blocks the UI behind the dialog. From technical perspective it is a simple panel which just has a higher z-index (lower than the dialog itself). This is achieved by the CSS:
.dialog-shadow { z-index: 1000009 !important; background-color: #333333; opacity: 0.1;
}How To Use
In both cases, you need to show the component. This can be done by following scripts. The opening script can be externalized to a hidden button, like "DIALOG_X_OPEN" or "POPUP_X_OPEN".
/* for the dialog with panels */ // show the background (styled for "blocking UI") DIALOG_BACKGROUND.setVisible(true); // show the dilaog frame DIALOG_X.setVisible(true); /* for the popup */ // show background & the popup POPUP_X.show();
A dialog has buttons "CLOSE (X)", "OK" and "CANCEL". Those buttons are again hiding the areas (panels or popup) and in case of "OK" applying the changes from a dialog to the application. This is the corresponding script:
/* for the dialog with panels */ // hide background & dialog DIALOG_X.setVisible(false); DIALOG_BACKGROUND.setVisible(false); /* for the popup */ // hide background & dialog POPUP_X.hide();
Example Application
is available @ GitHub:
Just download the folder into local Repository and Open the BI Application.