Skip to Content

In the Business Server Pages forum there were several posts regarding usage of Modal Dialog in a BSP page. Still these posts remain unsolved yet. This weblog provides a possible solution for this issue.

Introduction

In one of our assignments, we had a requirement of showing a popup from the main page and upon some action in the child window, processing is carried out in the main
page. Say something similar to a simple value help for an input field. Once a child window i.e. popup is opened the focus should be completely on the child window and the parent window should be disabled.

Walk through towards the solution

My trails went on with using window.open( ) to open up the child window, and set focus on the child window using onload=”window.focus()”. To my disappointment that didn’t work for me, and as usual I went for a search in the BSP forum. Initially I could find out many threads relating to this subject but the solution was still unsolved.

My only option was to use Modal Dialog to achieve this functionality. Using Modal dialog we can make the user to access the child window alone disabling the parent window.
Initially we faced many problems implementing this, but finally came up with a solution.

Working with Modal Dialog

JavaScript features several built-in dialog boxes: window.alert(),+ window.confirm()+, and window.prompt(). When a dialog box pops up, the user cannot focus on the original page until the box is terminated. In other words, a dialog box is always focused.

Internet Explorer supports a few methods that enable you to apply this feature to any new window. One of which is:

The syntax for this method is:

vReturnValue = window.showModalDialog(sURL[, vArguments][, sFeatures]);

The first argument is a string that specifies the URL to load and display in the new window. The second argument, vArguments, is a variant that specifies the arguments to use when displaying the document. This parameter can be used to pass a value of any type, including an array. The dialog box can extract the values passed by the caller from the dialogArguments property of the window object.

When a new window is opened by this method, the window object of the new window (the dialog box) features the

dialogArguments</b>  property, which holds the value that was assigned to the vArguments  parameter of the calling method. Take a look at the following statement:

window.showModalDialog(“modalurl.htm”, window);


Refer to this Handling child window with parent session too.

  • event handler for checking and processing user input and
  • for defining navigation

DATA: tv TYPE REF TO cl_htmlb_tableview.
tv ?= cl_htmlb_manager=>get_data(
                      request      = runtime->server->request
                      name         = ‘tableView’
                      id           = ‘tab01’ ).
IF tv IS NOT INITIAL.


  DATA: tv_data TYPE REF TO cl_htmlb_event_tableview.
  tv_data = tv->data.


  IF tv_data->selectedrowindex IS NOT INITIAL.


    FIELD-SYMBOLS:


     

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Guillaume GARCIA
    Hi,

    Good work.
    Few remarks nonetheless:
    A good practise is to test the browser type so as to offer at least a Popup to users that have Firefox, Opera…

    Also, check standard application : bsp_valuehelp/main.htm

    Best regards,
    Guillaume

    (0) 
    1. Ravikiran Chittum Post author
      Hi Guillaume,

      Thanks for your valid comments!
      window.showModalDialog() is method supported by Internet Explorer alone.
      The Mozilla based browsers (Netscape 6+, Firefox, etc) use a completely different method to declare that the window that is opened should stay in front . They use the normal window.open and just add an extra attribute modal=yes to the list of atributes that define the appearance of the window but it still doesn’t actually make it modal. It just forces it to stay in front which is the best that you can do with these browsers.
      So, we can change our ShowDialog() method mentioned in the blog to the below.

      function ShowDialog() {
      if (window.showModalDialog) {
      window.showModalDialog(‘wrapper.htm’,window,’dialogHeight=420px,dialogWidth=600px’);
      } else {
      window.open(‘wrapper.htm’,’name’,
      ‘height=420,width=600,toolbar=no,,status=no,
      menubar=no,scrollbars=no,resizable=no ,modal=yes’);
      }
      }

      Hope I am clear.

      Thanks & Regards,
      Ravikiran.

      (0) 
  2. Marcus Raath
    i have implimented your solution, however it only work up to showing the dialog.
    When i want to pass data back to the calling window, the javascript function does not get executed.
    Please advise on what to do.
    Thanks
    (0) 

Leave a Reply