Use dialogs in backoffice

Hi,

I’m trying to use a dialog in backoffice for selection persons.
https://docs.litium.com/documentation/previous-versions/litium-6/architecture/back-office/select-dialog

Add

The dialog opens up fine but how do I implement the callback?
I guess it should look something like this. but where do I implement it?
Do I need to create an angular controller?

$scope.addPerson = function(item, formData, dialogResult) {

}

Litium version: 6

I assume you want to have the dialog to select persons, in Product area where you need to write AngularJS right? Then yes you need to create a controller, with the addPerson for the scope as you wrote. And in the template, don’t forget to set the dialog-callback to point to that scope’s function.

actually it’s in a custom campaign condition I try to use the dialog from a user control. Do you have any sample code for an angular controller?

Oh, WebForms is another story :slight_smile:

Then I suggest you to use the iframe approach, where the Angular (not AngularJS) component is used. The idea is to create a dialog (can be ComponentArt:Dialog or any kind of HTML/JS dialog) which has an iframe as the content. The iframe’s url points to the special page where it can render the selector for different entity types. Here is the url:

https://[websiteurl]/Litium/UI/frame/EntitySelectorWrapper?entityType=person&entityMultiSelect=false

Note the entityType is person, which is the entity name you can find at the very bottom of this page https://docs.litium.com/documentation/previous-versions/litium-6/architecture/back-office/select-dialog

Change entityMultiSelect to true if you want to select multiple items. That Url will show you a person list and the Cancel, Ok buttons. To catch the data when user selects an item and clicks on Ok button, have this JS snippet in your user control:

function onSelect(event) {
    if (event.data.source !== "entityselector")
        return;
    var selectedPersons = event.data.value.items;
}
window.addEventListener("message", onSelect, false);

What it does is, listen to the onMessage event of the iframe, and get the selected person. selectedPersons is an array which contains the list of selected persons. Each item has a Name and a SystemId.

I got it working with the AngularJS component. But it was i bit tricky to get the postback working :wink:

My suggestion is to go with Angular, not AngularJS. All new modules are implemented in Angular.

The iframe approach is a solution for using Angular components outside of the Angular zone, for example, Webform, vanilla Javascript.