Display dialogs

In Litium 8, all dialogs are built with Angular.

Dialogs using Angular

Universal dialogs

Dialogs using Angular

This describes how to display dialogs using Angular. To display the dialog in the back office, and to select a value, add the following to the template:

<a class="base__fake__link" (click)="showDialog = true"> {{ 'general.action.add' | translate}}</a>
<entity-selector-dialog
    *ngIf="showDialog"
    [entityType]="'group'"
    [entityMultiSelect]="false"
    (onSubmit)="submit($event)"
    (onClose)="showDialog = false">
</entity-selector-dialog>

And add the following to the code file:

showDialog = false;
submit(ids: string[]) {
    // process the list item's id here
}

The anchor tag is for the Add-link, which will open the entity selector dialog when you click on it. The dialog will display a list of groups, in which you can select a single group.

Options:

• entityType: Configure the type you want to select. Check the list below for supported types.
• entityMultiSelect: Configure whether the user should be able to select single or multiple items. Set to true by default.
• onSubmit: Configure the callback for the OK button in the dialog is clicked. In the callback, you receive the list of selected ID's.
• onClose: Configure the callback for the Cancel button in the dialog. Usually nothing is done. Set the value for showDialog to false if you want the dialog to be closed when clicking Cancel.

Supported entity types

Universal dialogs

The approach above need to be executed in Angular context. In case those requirements cannot be fullfilled, then we need another solution. We need a universal way to open the dialog. Note that the universal dialog only supports entity types that are listed in supported entity types section above, plus media files and pages.

In this approach, we use iFrame to show the Angular component. The iFrame can be placed in a DIV tag and by using CSS and JS, we can make it look like a modal dialog. We can use any JS library to create a modal dialog. Note that we don't cover how to create modal dialog in this article.

Basically the idea is to have an iFrame in the page and listen for the event when the OK or Cancel button is clicked. Here are the list of URLs should be set in the SRC attribute of the iFrame:

• Media file: https://localhost/Litium/UI/frame/FileSelectorWrapper?multiSelect=true&type=4
  • Input:
    • multiSelect: a boolean parameter to configure if a single or mutiple items can be selected.
    • type: a number 1, 2 or 4 to configure what type of file should be displayed.
      • 1 (default if omitted): all files.
      • 2: images.
      • 4: video files.
  • Output:
    • source: fileSelector
    • value: an object that contains action and items:
      • action: a string that represents the action. It is closeMediaPopup when OK or Cancel button is clicked. It is doubleClick if user double clicks a file.
      • items: the list of selected file object.
• Page: https://localhost/Litium/UI/frame/EntityTreeSelectorWrapper?entityMultiSelect=1&entityType=page
  • Input: 
    • entityMultiSelect: a numer 0 or 1 to configure if a single or multiple items can be selected.
  • Output:
    • source: entitytreeselector
    • value: an object that contains items:
      • items: an array if entityMultiSelect is 1, otherwise an object of selected page. The object has the systemId and channelSystemId properties.
• Category: https://localhost/Litium/UI/frame/EntityTreeSelectorWrapper?entityMultiSelect=1&entityType=category
  • Input: 
    • entityMultiSelect: a numer 0 or 1 to configure if a single or multiple items can be selected.
  • Output:
    • source: entitytreeselector
    • value: an object that contains items:
      • items: an array if entityMultiSelect is 1, otherwise an object of selected category. The object has the systemId property.
• Other entity types that are listed in the supported entity types: https://localhost/Litium/UI/frame/EntitySelectorWrapper?entityMultiSelect=1&entityType=countries
  • Input:
    • entityMultiSelect: a numer 0 or 1 to configure if a single or multiple items can be selected.
    • entityType: the name of the entity type to configure what type should be selected.
  • Output:
    • source: entityselector
    • value: an object that contains items:
      • items: the list of selected items. Each array item is an object which has name and systemId properties.

Here is a simple snipppet to show the iFrame and to listen for the event:

<html>
<body>
	<script type="text/javascript">
		window.addEventListener("message", receiveMessage, false);
		function receiveMessage(event) {
		    // process the response from the iFrame
			// event.data is the output object
		}
	</script>
	<iframe src="https://localhost/Litium/UI/frame/EntitySelectorWrapper?entityMultiSelect=1&entityType=countries" />
</body>
</html>