# Unable to find LitiumApp while implementing dialogs in litium backoffice

**URL:** <https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359>\
**Category:** Questions\
**Tags:** litium-6, litium-5\
**Created:** [November 13, 2018, 9:52am UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359 "2018-11-13T09:52:19Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![firozmohamed](https://avatars.discourse-cdn.com/v4/letter/f/5f9b8f/32.png) [@firozmohamed](https://forum.litium.com/u/firozmohamed)\
**Post date:** [November 13, 2018, 9:52am UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/1 "2018-11-13T09:52:19Z")

</div>

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](http://select-dialog)

also  
[Use dialogs in backoffice](https://forum.litium.com/t/use-dialogs-in-backoffice/324)

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.

---

<div class="post-metadata">

**Author:** ![patric.forsgard](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.litium.com/patric.forsgard/32/10_2.png) [@patric.forsgard](https://forum.litium.com/u/patric.forsgard)\
**Post date:** [November 13, 2018, 10:15am UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/2 "2018-11-13T10:15:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![patric.forsgard](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.litium.com/patric.forsgard/32/10_2.png) [@patric.forsgard](https://forum.litium.com/u/patric.forsgard)\
**Post date:** [November 13, 2018, 10:29am UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/3 "2018-11-13T10:29:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![firozmohamed](https://avatars.discourse-cdn.com/v4/letter/f/5f9b8f/32.png) [@firozmohamed](https://forum.litium.com/u/firozmohamed)\
**Post date:** [November 13, 2018, 10:58am UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/4 "2018-11-13T10:58:12Z")

</div>

> [@patric.forsgard](#):
>
> window.app

window.app is also undefined

---

<div class="post-metadata">

**Author:** ![firozmohamed](https://avatars.discourse-cdn.com/v4/letter/f/5f9b8f/32.png) [@firozmohamed](https://forum.litium.com/u/firozmohamed)\
**Post date:** [November 13, 2018, 11:00am UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/5 "2018-11-13T11:00:32Z")

</div>

I tried with

```auto
`$(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.

---

<div class="post-metadata">

**Author:** ![patric.forsgard](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.litium.com/patric.forsgard/32/10_2.png) [@patric.forsgard](https://forum.litium.com/u/patric.forsgard)\
**Post date:** [November 13, 2018, 6:00pm UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/6 "2018-11-13T18:00:33Z")

</div>

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](https://forum.litium.com/t/use-dialogs-in-backoffice/324/4) then getting it to work between the frames in the current window.

---

<div class="post-metadata">

**Author:** ![firozmohamed](https://avatars.discourse-cdn.com/v4/letter/f/5f9b8f/32.png) [@firozmohamed](https://forum.litium.com/u/firozmohamed)\
**Post date:** [November 28, 2018, 10:59am UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/7 "2018-11-28T10:59:31Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![ton.nguyen](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.litium.com/ton.nguyen/32/989_2.png) [@ton.nguyen](https://forum.litium.com/u/ton.nguyen)\
**Post date:** [November 28, 2018, 12:48pm UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/8 "2018-11-28T12:48:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![firozmohamed](https://avatars.discourse-cdn.com/v4/letter/f/5f9b8f/32.png) [@firozmohamed](https://forum.litium.com/u/firozmohamed)\
**Post date:** [December 3, 2018, 12:33pm UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/9 "2018-12-03T12:33:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ton.nguyen](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.litium.com/ton.nguyen/32/989_2.png) [@ton.nguyen](https://forum.litium.com/u/ton.nguyen)\
**Post date:** [December 5, 2018, 3:12pm UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/10 "2018-12-05T15:12:40Z")

</div>

Ok, then the best solution is to the iframe to load those dialogs, as Patric pointed this link: [Use dialogs in backoffice](https://forum.litium.com/t/use-dialogs-in-backoffice/324/4)

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.

---

<div class="post-metadata">

**Author:** ![firozmohamed](https://avatars.discourse-cdn.com/v4/letter/f/5f9b8f/32.png) [@firozmohamed](https://forum.litium.com/u/firozmohamed)\
**Post date:** [December 6, 2018, 10:51am UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/11 "2018-12-06T10:51:50Z")

</div>

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](https://docs.litium.com/documentation/previous-versions/litium-6/architecture/back-office/select-dialog)

and  
[Forum.](https://forum.litium.com/t/use-dialogs-in-backoffice/324/4?u=firozmohamed)

---

<div class="post-metadata">

**Author:** ![ton.nguyen](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.litium.com/ton.nguyen/32/989_2.png) [@ton.nguyen](https://forum.litium.com/u/ton.nguyen)\
**Post date:** [December 6, 2018, 12:23pm UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/12 "2018-12-06T12:23:37Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![ton.nguyen](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.litium.com/ton.nguyen/32/989_2.png) [@ton.nguyen](https://forum.litium.com/u/ton.nguyen)\
**Post date:** [December 6, 2018, 1:50pm UTC](https://forum.litium.com/t/unable-to-find-litiumapp-while-implementing-dialogs-in-litium-backoffice/359/13 "2018-12-06T13:50:58Z")

</div>

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](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](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` `>`