Designing Custom Popup by using thtmlbx:overlay

[former_member210661]

Purpose

This page shows how to design your own custom popup by using thtmlbx tag. This is just i want to introduce this functionality who are actually looking for this kind of requirements.

Overview

I have seen so many queries in scn in which they were mentioned like how to add custom button’s in conformation popup or I don’t want cancel, ok buttons. Or I want radio buttons check boxes in a popup along with custom buttons…etc like not only for this I want to introduce this functionality for design our own popup.

Detailed explanation about Popup in crm web ui.

We all are knowing how to call conformation popup in crm . We have no of ways to display popup. Here I am talking about conformation popup not for other popup methods. First of all I will explain our standard conformation popup functionality.

In standard if we want to call popup we have to create popup reference variable with the type of IF_BSP_WD_POPUP. Based on that we have to raise the popup with the combination of buttons and close the popup and again initialize the popup to be open.

As the same way in crm we have a tag thtmlbx:overlay this will give popup empty layout template ex:

Step 1 : Create global variable.

Step 2 : Design popup template.

Step 3 : Create events for buttons, check box, radio button..etc.

Step 4 : Handle events according to your requirement.

Step 1 : create global variable.

       Declare one static/instance variable in impl class of that view.

Whenever user click on ok or cancel we have to close that popup so I restrict that by using this condition flag.

Step 2: Design popup template.

       Go to view.htm declare below tag.

<btf:overlay           id     = "Popup"
                width  = "500px"
                height = "100px"
                top    = "300px"
                left   = "300px"
                title  = "OverlayTemplate"
                usage  = "BULLETIN" />

this will give a empty popup template as below

By using this empty template we can design popup according to your requirement but here we have to write the code in  .htm for every refresh on web ui this code will trigger so the popup will call every time so we have to restrict according to your convenient way.

Now I want to display radio buttons and checkboxs along with buttons in to this empty template.

<%

   if controller->gv_show = abap_true.

%>

<btf:overlay id     = "overlay"

              width  = "350px"

              height = "100px"

              top    = "300px"

              left   = "300px"

              title  = "OverlayTemplate"

              usage  = "BULLETIN" >

   <thtmlb:radioButton id      = "key_all"

                       groupid = "myRadioButtonGroup1"

                       key     = "key_all"

                       text    = "All"

                       checked = "<%= all %>"

                       onClick = "RADIO" />

   <thtmlb:radioButton id      = "key_none"

                       groupid = "myRadioButtonGroup1"

                       key     = "key_none"

                       text    = "None"

                       checked = "<%= none %>"

                       onClick = "RADIO" />

   <thtmlb:checkbox id      = "key_male"

                    key     = "key_male"

                    onClick = "CHECK"

                    text    = "Male"

                    checked = "<%= male %>" />

   <thtmlb:checkbox id      = "key_female"

                    key     = "key_female"

                    onClick = "CHECK"

                    text    = "Female"

                    checked = "<%= female %>" />

</btf:overlay >

<%
endif.
%>

Now we can see the popup layout as below.

Buttons has to display into center of the window so design as below after check box code.

<br />

   <table cellspacing="0" cellpadding="0" border="0" style="table-layout:fixed; width:100%;">

       <tbody>

       <tr>

       <th <td style="text-align:center; padding:5px;"><thtmlb:button id = "OK" text = "OK"

                  enabled = "true"

                  design  = "EMPHASIZED"

                  onClick = "OK"

                  tooltip = "ok" /></td>

            <th <td style="text-align:center; padding:5px;"><thtmlb:button id = "Cancel"

                  text    = "CANCEL"

                  enabled = "true"

                  design  = "EMPHASIZED"

                  onClick = "CANCEL"

                  tooltip = "cancel" /></td>

            </tr>

            </tbody>

            </table>

</btf:overlay>

now we can see the popup along with buttons and radio check box.

In radio and checkbox we have to handle the events so that we have to create event handler and handle according to our requirement as the same way buttons also.

Here the drawback is in every .htm coding will trigger every time whenever page has refreshed so the code which is reside in .htm also will trigger every time and closing of this popup is possible only we have to provide some check pints.

Step 3 : create events for buttons, checkbox, radiobutton..etc.

go to view create event To handle the closing popup we have already declared global variable so I have used that variable in EH_ONOK AND EH_ONCANCEL events.

Step 4 : Handle events according to your requirement.

In simple i have populated flag for closing popup whenever ok button or clear button pressed. based on your requirement you can manipulate according in ok and cancel events.

method ok and cancle.

me->gv_show = abap_false.

endmethod.

i have attached doc for checkbox and radio button and .htm coding below.

i know this is not recommended way but in some cases if we don't have any alternatives for achieve this kind of requirements then we can use this approach.

i will explain my next blog by using class that might help you to achieve all kind of requirements related to popup.

Thanks & Regards,

Srinivas K.