Bootstrap modal

[Teemu Simolin]

Hi,

How to open a page as a modal dialog instead of a normal page even if it is not defined as window?

Best,

Teemu

[alek...@openlegacy.com]

Hi Teemu,

You can find modal implementation with angularjs and bootstrap here http://angular-ui.github.io/bootstrap/. Or using only bootstrap http://getbootstrap.com/javascript/#modals.

Also you can find already used implementation(angularjs+bootstrap) example in as400-menus-rest project in controllers.js file.

[alek...@openlegacy.com]

More detailed description:

1. You should be sure that you've include ui.bootstrap module. To use it be sure you've include ui-bootstrap-tpls-0.11.2.min.js file in index.jsp

var module = angular.module('controllers', ["ui.bootstrap"]);

2. Pass $modal param to the controller from which you want to open a modal view.

module = module.controller('someCtrl', function ($rootScope, $scope, $modal, $state) {...}

3. Here's example how to init and open modal window. Also you can pass custom data to the specified modal controller. Use resolve param to pass custom data.

$scope.openModalWindow = function() {

  var modalInstance = $modal.open({

    templateUrl: "modalViewTemplate.html",

    controller: "someModalCtrl",

    resolve:{

      someCustomParam: function() {

        return returnData;

      } 

    }

  });

}

4. Here's a controller which handle modal window.

module = module.controller('someModalCtrl', ['$scope', '$modalInstance','messages', function($scope, $modalInstance, someCustomParam) {  

  $scope.close = function() {

  $modalInstance.close();

};

[Teemu Simolin]

Hi,

Thanks for the instructions. However, could you create a simple example project showing how to open a normal screen entity as a modal window using a table action, please? I haven't been able to implement that even if I tried something like system messages window functionality.

-Teemu

[to...@openlegacy.com]

Hey,

I attached a demo project with an example for opening a costume modal from a table action.

You can run it, then go to Warehouses from the menu, in the Select, pick Revise and a modal will open.

You can see I generated a View and a Controller of Warehouses.java. You can generate the view and controller by right clicking the model -> Open Legacy -> Generate View/Controller.

In the View I created a normal modal (you can find in the Bootstrap documentation).

Then in the Controller.js, you can see that Openlegacy generated a controller (starting from line 344).

Each table action goes to the $scope.doActionNoTargetEntity function (line 368) so i added two things.

1) I created a costume variable called 'warehouseDetailsCopy' (line 360) that will hold the WarehouseDetails data.

2) I added an 'if' statement before the statement that leads the app to another page (line 376). If the app is redirected to 'WarehouseDetails', I copy the model.entity into my new variable and 'show' the modal i created in the view.

All that left, is mapping the angular variables however you wish to in the modal. In my example I created labels and showed the data in spans, for example:

<div class="col-xs-12">

       <label>Warehouse Number: </label>   

       <span>{{warehouseDetailsCopy.warehouseNumber}}</span>    

</div>

Tom

[Teemu Simolin]

Hi Tom,

Thanks for the example project. It is just what I asked for. However, there seem to be some problem because I cannot open the modal window after I have opened it once. I get error "Current screen entity class com.modal_demo.openlegacy.WarehouseDetails$$EnhancerByCGLIB$$f31bb496 wasn't matched to the requested screen entity:class com.modal_demo.openlegacy.Warehouses" and application does not work anymore.

-Teemu 

[Roi Mor]

Hi Teemu,

This is not a real problem.

The demo recording doesn't enable multiple drill-down, but this is just a recording issue.

It should work fine with real online application once navigation is properly configured.

[Teemu Simolin]

Hi Roi,

I could implement modal window also in my application with help of the example but application does not work right after opening the modal window. Somehow table actions are in multiple rows and I get same kind of error than in the example application.

12|*K*1. KEITTIÖ                                                     ^ ^0100000000^|

13|*T*1.1. Mitoitus                                                  ^ ^0101000000^|

14|*T*1.9. Pöytäkaapit                                               ^ ^0109000000^|

-Teemu

[Roi Mor]

Hi Teemu,

Please be more specific.

What do you mean not work right after opening? Is the screen navigated correctly in the API?

Table actions sounds like a CSS layout issue.

What is the error you are getting?

[Teemu Simolin]

Hi Roi,

Here's more details:

1. I select table action for the first row and the modal window opens correctly with Eclipse console showing correct navigation.
2. After closing the modal window preloader icon is still spinning.
3. I select table action for another row but the modal window opens for the first row again. The console show table action is in the first row and the selected row.
4. After closing the window I select another table action but get "Current screen entity class com.tuoteluettelo.openlegacy.Lisatiedot$$EnhancerByCGLIB$$f7e56b2d wasn't matched to the requested screen entity:class com.tuoteluettelo.openlegacy.TuotekuvastonHakemisto". The console shows that navigation is to the Lisatiedot entity (modal window).
   

[Roi Mor]

2. Aleksey will check it

4. Seems like a wrong navigation. When you close the popup, it's not closing the host window (can't be done), but when selecting another row, the window should step back (F3?) using the window @ScreenNavigation exit action, and navigate to another row as before.

Please attach the app with a proper trail if you can't overcome this.

[Teemu Simolin]

The Eclipse console shows that F3 is used but the problem is the table action not cleared from the first row.

[Roi Mor]

It means that you need to write a custom navigation action for the window API entity.

The perform method of the custom action gets the key, and should iterate through the rows, reset the selection field of all, and mark the selection of the row with the matching passed key.

I believe I sent you an example before.

[Teemu Simolin]

Thanks for your help again, Roi! I have an example.

[alek...@openlegacy.com]

On Monday, March 2, 2015 at 4:17:45 PM UTC+2, Teemu Simolin wrote:

Hi Roi,

Here's more details:

1. I select table action for the first row and the modal window opens correctly with Eclipse console showing correct navigation.
2. After closing the modal window preloader icon is still spinning.
3. I select table action for another row but the modal window opens for the first row again. The console show table action is in the first row and the selected row.
4. After closing the window I select another table action but get "Current screen entity class com.tuoteluettelo.openlegacy.Lisatiedot$$EnhancerByCGLIB$$f7e56b2d wasn't matched to the requested screen entity:class com.tuoteluettelo.openlegacy.TuotekuvastonHakemisto". The console shows that navigation is to the Lisatiedot entity (modal window).

 About point 2.

Just put $rootScope.hidePreloader(); into "else if" part like in example:

} else if (data.model.entityName == 'WarehouseDetails') {

  $scope.warehouseDetailsCopy = angular.copy(data.model.entity);

  var element = angular.element('#warehouseDetailsModal');

  element.modal('show');

  $rootScope.hidePreloader();

}

[Teemu Simolin]

Hi,

Thanks, that solves the preloader problem. However, if the solution needs custom navigation, does it also mean that doActionNoTargetEntity cannot be used? Could you complete the example project so that it can handle also the table action problem, please?

-Teemu

[Roi Mor]

Teemu,

This is 2 different issues, and the solution I suggested with custom navigation is what needs to be done to overcome cleanup of previous selection.