Unable to find LitiumApp while implementing dialogs in litium backoffice

Questions
,
1

Litium version: 6.2.2.0

I went through this topic,
https://docs.litium.com/documentation/previous-versions/litium-6/architecture/back-office/select-dialog

also
Use dialogs in backoffice

I was creating a new pannel where I need to access the litium dialogs,

so inside my pannel I added a script tag

<script type="text/javascript">
    
        var myApp = angular.module('LitiumApp');
        myApp.controller('testController', ['$scope', function ($scope) {
           
            $scope.addGroups = function (param1, param2, param3) {
                console.log(param1);
            }
            
        }]);        

</script>

<div ng-controller="testController">   
	<div style="float: right; margin-top: 11px;">
            <a href="#" select-dialog dialog-callback="addGroups(param1, param2, param3)" dialog-type="group">Add</a>
        </div>
</div>

but when the panel is loaded in back office, inside the panel
I get
Uncaught ReferenceError: angular is not defined

I tried by adding
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

I get this error:
Uncaught Error: No module: LitiumApp

below is the error when I remove reference to angular

ReferenceError: angular is not defined↵ at eval (eval at <anonymous> (http://nf-se6.spotonsolutions.se/Litium/Common/ModulePanelContainer.aspx?ModuleArea=ProductArea&ModulePanelID=b24c243d-e14d-4d16-bfbd-26752ac0e180:4:14), <anonymous>:1:1)↵ at http://nf-se6.spotonsolutions.se/Litium/Common/ModulePanelContainer.aspx?ModuleArea=ProductArea&ModulePanelID=b24c243d-e14d-4d16-bfbd-26752ac0e180:101:14"

I need some help with this.

2

This is nothing that we have tested at all but you can try to use window.app instead of creating var myApp....

3

It can also have a dependency on the order the script is loaded so maybe you also need to add some lazy initialization on your code so the Litium application have possibility to start first.

4

window.app is also undefined

5

I tried with

`$(document).ready(function() {  });`

but still the same errors.
This is the issue inside the panel I created, if I inspect element the left section of the litium bakoffice and
check for
angular.module(‘LitiumApp’);
it returns the right module.

6

The module panel is loaded in an iframe, that is the reason that you not have access to the product created angularjs modules.

I think it is easier to get it working with the iframe-dialog that @ton.nguyen was suggesting in Use dialogs in backoffice then getting it to work between the frames in the current window.

7

Hi,
I was trying to implement the way you suggested, from the below link,
https://docs.litium.com/documentation/previous-versions/litium-6/architecture/back-office/select-dialog

could you please provide some more documentation regarding the
Customers and Media (Angular) part, or any sample code implementation for the same.
it would great help for me.
Thanks.

8

What dialog do you want to have? Then we can suggest the solution.

9

Hi,
I am looking for “image” dialog and “website” dialoag.
I am implementing a panel in products module.

10

Ok, then the best solution is to the iframe to load those dialogs, as Patric pointed this link: Use dialogs in backoffice

Try to open this link: https://[websiteurl]/Litium/UI/frame/EntitySelectorWrapper?entityType=file (remember to change websiteurl as the domain name of your site) then you will see the dialog to select media file.

Change the entityType to page to have a dialog to select page.

11

Hi,
thanks for the reply,
But how should we pass the callback functions when selected?
Is there any sample code other than these two links ?

Litium Dialog

and
Forum.

12

You don’t pass the callback function, you listen for the event as I wrote in the other post:

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.

13

Hi again,

My apologize, Page and File cannot be selected by using EntitySelectorWrapper. Other Url should be used:

Basically the idea of the host an iFrame in the page and listen for the event when the OK or Cancel button is clicked. Here are the list of URL:s 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 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
    • Input: none
    • Output:
      • source: “entitytreeselector”
      • value: an object that contains “items”:
        • items: an array which contains one selected page. The array item has the “systemId” and “channelSystemId” properties.

Example:
<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 >