Display search results in popup window

[Former Member]

Hallo all,

is it possible to return a list of table entries (search results) from the server and display them in a modal dialog/popup window so that the user can select one of the result rows in order to procede with his work? I assume that I need to invoke the creation of the popup/modal dialog after the search is done on the server side therefore I am wondering how this can be done.

Or is there another solution for my problem that I should consider?

Any input on this would be greatly appreciated!

Thanks in advance.

Best regards,

Helga

[Former Member]

Here's my attempt on the F4 solution.

You can run the default.htm. This page has 2 input fields CARRID and CONNID. These field will be populated from the user selection on the next page (search.htm).

You click the Search - F4 button. This will open a new window. You can type in LH or any CARRID that is available on the system and click Look up button.

The matching entry will be displayed on the table. You click which entry you want and then the window is closed and the data is transferred to the first page.

The opened window is non modal window. This allow the user to enter a selection criteria (just like the regular F4).

I've tried to make the window to be a modal window, but when the user click look up, a third window is displayed instead of using the modal window. If the user do not need further selection criteria, we can use the modal window.

I forgot the JavaScript function to open a modal window, but i believe this is only supported by IE.

Also, you can resize the window, please look up the window.open function details from a JavaScript book.

I hope this will help you a bit.

The 'draft overview' by Brian is very nice solution, but as he said, it is a big implementation by itself.

My solution is a quick and dirty solution that i have to do to get my assignment done, so please be kind if I miss something or the solution is not 'Elegant' enough.

last thing, I also play around with showHelp and onValueHelp attribute from input field. This will give a nice small button for the search f4 button.

<htmlb:inputField id          = "G_ERNAM"
                  showHelp    = "true"
                  onValueHelp = "return htmlbSL(this,2,'helpERNAM:helpERNAMClick');"
                  value       = "//model/G_ERNAM" />

this code will trigger an event helpERNAMClick so you can process the next step on the onInputProcessing or HANDLE_EVENT.

<b>default.htm layout</b>

<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<htmlb:content design="design2002+design2003" >
  <htmlb:page title="multiselect " >
    <htmlb:form id="myTest" >
      <%
        if myF4 = 'X'.
      %>
      <script>
      var result = window.open("search.htm", "helpWindow", "status=no, menubar=no");
      </script>
      <%
        endif.
      %>
      <htmlb:group>
        <htmlb:groupHeader>
          <htmlb:textView text="SFLIGHT Table" />
        </htmlb:groupHeader>
        <htmlb:groupBody>
          <htmlb:textView text="CARRID:" /> &nbsp <htmlb:inputField id="CARRID" /> <br>
          <htmlb:textView text="CONNID:" /> &nbsp <htmlb:inputField id="CONNID" />
          <htmlb:button text    = "Search - F4"
                        id      = "searchF4"
                        onClick = "searchF4" />
        </htmlb:groupBody>
      </htmlb:group>
    </htmlb:form>
  </htmlb:page>
</htmlb:content>

<b>default.htm onInputProcessing</b>

  CLASS cl_htmlb_manager DEFINITION LOAD.

  DATA: event TYPE REF TO if_htmlb_data.

  event = cl_htmlb_manager=>get_event_ex( request ).

  IF event->event_server_name = 'searchF4'.
    myf4 = 'X'.
  ENDIF.

<b>default.htm Page Attributes</b>

myF4	TYPE	STRING

<b>search.htm layout</b>

<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<htmlb:content design="design2002+design2003" >
  <htmlb:page title="HelpSearch" >
    <htmlb:form>
      <% if close_window = 'X'.
          clear close_window.  %>
        <script>
          opener.document.forms["myTest"].CARRID.value = '<%= sel_flight-carrid %>';
          opener.document.forms["myTest"].CONNID.value = '<%= sel_flight-connid %>';
          window.close();
        </script>
      <% endif. %>
      <htmlb:group>
        <htmlb:groupHeader>
          <htmlb:textView text="Search Criteria:" />
        </htmlb:groupHeader>
        <htmlb:groupBody>
          <htmlb:textView text="CARRID:" /> &nbsp
          <htmlb:inputField id    = "CARRID"
                            value = "<%= carrid %>" />
          <htmlb:button id      = "searchButton"
                        text    = "Look up"
                        onClick = "searchButtonClick" />
        </htmlb:groupBody>
      </htmlb:group>
      <hr>
      <htmlb:group>
        <htmlb:groupHeader>
          <htmlb:textView text="Search Result:" />
          <htmlb:button text    = "clear selectedRowIndexTable"
                        id      = "clear"
                        onClick = "clear" />
          <htmlb:button text    = "go"
                        id      = "go"
                        onClick = "go" />
        </htmlb:groupHeader>
        <htmlb:groupBody>
          <htmlb:tableView id               = "tvX"
                           width            = "100%"
                           visibleRowCount  = "8"
                           fillUpEmptyRows  = "X"
                           onRowSelection   = "MyEventRowSelection"
                           selectedRowIndex = "<%= selectedRowIndex %>"
                           selectionMode    = "SINGLESELECT"
                           table            = "<%= sflight %>" />
        </htmlb:groupBody>
      </htmlb:group>
    </htmlb:form>
  </htmlb:page>
</htmlb:content>

<b>search.htm onCreate</b>

clear close_window

<b>search.htm onInputProcessing</b>

  CLASS cl_htmlb_manager DEFINITION LOAD.

  DATA: tv          TYPE REF TO cl_htmlb_tableview,
        table_event TYPE REF TO cl_htmlb_event_tableview,
        event TYPE REF TO if_htmlb_data.
  
  event = cl_htmlb_manager=>get_event_ex( request ).

  IF event IS NOT INITIAL AND
      event->event_name = 'button' AND
       event->event_server_name = 'clear'.
    CLEAR selectedrowindex.
  ELSEIF event IS NOT INITIAL AND
      event->event_name = 'button' AND
       event->event_server_name = 'searchButtonClick'.
    select * from sflight into table sflight where carrid = carrid.
    clear selectedrowindex.
  ELSE.
    tv ?= cl_htmlb_manager=>get_data( request = request
                                      name    = 'tableView'
                                      id      = 'tvX' ).
    IF tv IS NOT INITIAL.
      table_event = tv->data.
      CLEAR selectedrowindex.
      selectedrowindex = table_event->selectedrowindex.
      if event->event_server_name = 'MyEventRowSelection'.
        close_window = 'X'.
        read table sflight into sel_flight index selectedrowindex.
      endif.
    ENDIF.
  ENDIF.

<b>search.htm page attribute</b>

carrid                  AUTO	TYPE	STRING
close_window	          TYPE	STRING
selectedRowIndex        TYPE	STRING
seltext                 TYPE	STRING
sel_flight              TYPE	SFLIGHT
sflight                 TYPE	FLIGHTTAB

[former_member181879]

Hallo Iwan,

I looked tonight in detail at your solution. Impressive! You have shown that once one understands the building blocks, it is not so complex to build a F4 help.

Thanks for posting your example. It will definitely life a long time in this forum, and has now finally started a new chapter in the F4 book!

bye, brian

PS: If the reward system had been active already, I would have given you a number of points! They would have been well deserved!

[Former Member]

Hallo Bernd,

this looks much like what I might need, but still I am wondering what types the variables (lv_page_url...) are so that I can declare and test the code that you have given.

Could you please help me out on this? Thanks in advance.

Best regards,

Helga

[former_member181879]

The example code was:

lv_page_url = runtime->application_url.

The trick is just to look at what type the right hand side is. A quick double click should do the trick. The alternative, very elegant code would be:

DATA: lv_page_url LIKE runtime->application_url.

Then you don't even have to worry that these are all of type STRING.

[Former Member]

You can tell that I am new to BSP programming, regarding my lv_page_url question :).

I want to do the following:

- a button is clicked and an onClick event is invoked

- the controller gets the event source and then calls a function module which selects data from a table into a table structure, which is part of my model

- now I am stuck in the controller because I need to invoke a popup on the client from within the controller which should display the table structure as a result. Yes, I see that I need to build a url in the controller, but I wonder how I can call this url in order to invoke a popup on the client side.

I guess it is just a little step I am missing here. Must be something like runtime->invokeModalDialog(lv_page_url).

Can you please tell me which methode needs to be called here?

Thanks!

Helga

[former_member181879]

> You can tell that I am new to BSP programming

Which is fine. But it also then bring with it the responsibility to read, and read a lot. Which in this case will mean that you need some knowledge on browsers, JavaScript and HTML. And unfortunately, the same as with your drivers license: this is hard work where you will have to do it.

As a first step, the concepts and problems around F4 help has been discussed now a number of times in this forum. Please use the find capabilities (overview page of this forum) to search and read all discussions.

Specifically, you might be interested in a I have given once on this topic. We do not have the resources to build this. If you should find N people for a small group, you can do it. A code review I can still consider.

In principle, the biggest mistake at the moment in your logic is that it is <b>NOT</b> possible to open windows on the browser from the server. Windows can only be opened in the browser, using Javascript window.open().

So the first two steps you will have to follow (let us first get them completed successfully), is to do:

(1) Use you favourite search engine and find everything you can read on window.open.

(2) Program a button that has only an <b>onClientClick</b>. As JavaScript do a window.open sequence on the following URL "f4.do".

(3) Implement this controller in you application. In the doRequest method just do a write "Hello World".

++bcm

[Former Member]

Hallo Brian,

thank you for your kind advices. I guess I need to find the solution myself - that's what the bottom line of the F4 help problem is.

Best regards,

Helga

[former_member181879]

> I guess I need to find the solution myself

Yes, unfortunately. We do not have a finished version to give you, otherwise we would have. We also have a tight development plan, which mandates our commitment to other bits and pieces.

All that we can help with, is guidance. The total road I have now described once before. And because you are still in learning mode, I have made a detailed suggestion for the first two steps.

The road you must travel yourself!

I have hinted a few times that many people have this problem, why not a small group get virtually together and build it? That is what community is about. But maybe this group is not ready yet?

++bcm

[Former Member]

Hallo Rainer,

thank you vm for your quick reply!

I guess I have not explained my problem properly. I have tried the jscript version already without success, because I need to call a function module first. This module will write the search result values to the model (MVC). Now I need to display these values in a new window, but there is no possibility to do that because I don't know how I can invoke a modal browser/popup window from the server side.

Maybe I got it more to the point this time. Any help on this would be greatly appreciated.

BR Helga

[Former Member]

Hello Helga,

in MVC I use code like this to open a popup window with JS

 lv_page_url = runtime->application_url.
.. replace page name by your own...

  CONCATENATE lv_page_url
              '?_opener_id='
              iv_f4_id
              INTO lv_page_url.


  CONCATENATE 'OZ2WINDOW=window.open("'
              lv_page_url
              '","OSIRISNEW","resizable=yes,status=no,scrollbars=yes,menubar=no'
              ',toolbar=no,Width=350,Height=550,top=80,left=320" );'
        INTO rv_window_open.

The application_url contains the mangling code - that prevents the logon popup because now you use the same session To write back the selected data you can use the code I gave in my former answer.

To call the popup I use a flag on the main-view:

    <%-- popup window handling --%>
    <%
  if model->gv_show_popup = 'X'.
    %>
    <%= model->gv_popupstring %>
    <%
  endif.
  "clear global fields
  clear model->gv_popupstring.
  clear model->gv_show_popup.

Hope that helps.

Regards, Bernd

[rainer_liebisch]

Hi Helga,

if you you have problems displaying the result in a new window you can do it the folling way:

<%                                                        
data m_script type string.
m_script = 'window.open("Sample.do par1=123",null,"top=300,left=300,height=200,width=400,status=no,toolbar=no,menubar=no,location=no");'.
%>                                                         

<htmlb:button id = "b1"
              design = "STANDARD"
              onClientClick  = "<%= m_script%>"
              text               = "Button"    />

The only way here is to use Javascript.

Hoping this helps.

Rainer

[Former Member]

Hello Helga,

Rainers example will work if you use stateful mode. Then you do not have to care about the storage of your data.

If you are stateless you can open a new window as Rainer described but the values of the table have to be passed via a server cookie (see class CL_BSP_SERVER_SIDE_COOKIE).

Via a unique session-id you can retrieve the stored data in your popup-window.

To write back the selected line you can use JavaScript-coding in your layout like this:

<%

if pv_f4_value is not initial.

%>

<script type="text/javascript">

window.parent.opener.document.getElementById('<%= pv_f4_cell_id%>').value='<%= pv_f4_value %>';

window.parent.close();

</SCRIPT>

<%

endif.

%>

pv_f4_value is the selected table entry and defined as page attribute.

Regards, Bernd

[rainer_liebisch]

Hi Helga,

if you use the HTMLB extension <htmlb:tableview> you can

choose between different selection modes (for example

singleselect). Please have a look at BSP application SBSPEXT_TABLE. There are some nice examples.

Since the method onLayout comes after on InputProcessing

you don't have to worry about the table entries.

Regards,

rainer