Skip to Content
author's profile photo Former Member
Former Member

Opening a new window by clicking icon on the tableview

I would like to open a new popup window to show data by clicking an icon on one tableview. This data is kept in an internal table passed by a parent controller. Is there any example provided? (I am not familiar with the javascript language)

Add a comment
10|10000 characters needed characters exceeded

Related questions

5 Answers

  • author's profile photo Former Member
    Former Member
    Posted on Oct 12, 2005 at 05:07 AM

    To open the popup window use this java script

    <script >

    function popitup(url)

    {

    newwindow=window.open(url,'name','height=700,width=700,resizable=yes');

    if (window.focus) {newwindow.focus()}

    return false;

    }

    </script>

    <htmlb:button id = "POPUP"

    text = "POPUP"

    tooltip = "Click to Open Window "

    onClientClick = "return popitup('<page.htm>')"

    design = "standard"

    />

    and onclient click event of the button u can use this function like.

    If u are using this popupwindow on click of table icon

    <htmlb:tableViewColumn columnName = "myicon"

    type = "user"

    title = "Image"

    horizontalAlignment = "center" >

    <htmlb:link id = "$TVCID$"

    onClientClick = "return popitup('<page.htm>')"

    tooltip = "$CARRNAME$" >

    <htmlb:image src = "$TVCVALUE$"

    alt = "$TVCVALUE$"

    tooltip = "$CARRNAME$" />

    </htmlb:link>

    Hope This will solve ur problem, if not, do revert back....

    </htmlb:tableViewColumn>

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Oct 12, 2005 at 07:17 AM

    Thank you for your answer. From the above code, I change it a little bit like this.

    I put your java script after <htmlb:page ...>

    <script >

    function popitup(url)

    {

    newwindow=window.open(url,'name','height=700,width=700,resizable=yes');

    if (window.focus) {newwindow.focus()}

    return false;

    }

    </script>

    Then, at the table view, I change your code to be like this.

    <htmlb:tableView headerText = "Stock Overview"

    headerVisible = "true"

    id = "tv_display"

    width = "100%"

    visibleRowCount = "60"

    selectionMode = "SINGLESELECT"

    onRowSelection = "onRowSelection"

    filter = "server"

    sort = "server"

    design = "alternating"

    table = "<%=t_display%>">

    popup.htm>')">

    Did I make any mistake? If not, why does it not open a new window?

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Oct 12, 2005 at 07:43 AM

    I honestly do appreciate your contribution.

    From your source code, I can open a new window successfully. However, I still have some questions.

    1) Can the popup window be a view? From your javascript, I pass a view name "popup.htm", but it shows BSP error on the popup window.

    2) I have to manage data to be shown on the popup window. For example, if a user clicks the link at the first line, the data shown in the popup window is different from data when the user clicks at the second line. Is it possible to detect the line of a clicked link? Or, is it possible to detect that after a user clicks a link, my program will trigger a controller by one particular event?

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hai warot,

      1.The popup window can not be a view,either that should be a controller or a page with the flow logic,

      2.For the second what I suggest is go for a link in each each row of the tableview, and you can do it with the tableview iterator.

      Refer the blog for tableview iterator.

      /people/brian.mckellar/blog/2003/10/31/bsp-programming-htmlb-tableview-iterator

      and on each link call ur javascript function,

      But now with a change,

      Append the keyfields to the your URL,

      say key and its value keyvalue,it looks like

      reference="javascript:popitup('url?key=keyvalue')"
      

      these key fields u can retrive form the called applcation and present the corresponding data in the popup.

      ex:

      lv_key = request->get_form_field( 'key' ).
      

      This is one way you can differentiate each click on the tableview.

      Regards,

      Venkatesh.

  • author's profile photo Former Member
    Former Member
    Posted on Oct 12, 2005 at 11:18 AM

    Thank you everybody. I follow the last instruction, and it works well. However, I have one problem. When a user click the icon on my tableview, how can I know that which line is clicked?

    <htmlb:tableViewColumn columnName = "MAT_MVT"

    title = "Mat. Movement"

    type = "user"

    horizontalAlignment= "center"

    onCellClick = "onCellClick">

    <htmlb:link id = "link"

    onClientClick = "return popitup('mat_move.do?key=11')">

    <htmlb:image src = "@36@"

    alt = "Material Movement Report for this line"/>

    </htmlb:link>

    From the source code, I tried to call the javascript to open a new window, and tried to detect 'onCellClick' event to get the line that is clicked. Nevertheless, after the icon is clicked, the program triggers the javascript before triggers the event 'onCellClick'. As a result, I cannot know the selected line before opening a new window.

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member

      You will not be able to get the index of the row which is being clicked by this method. As the OnClientClick Event is processed on the client side, and the index is selected on the server side.

      For this you need to do some changes.......

      in the table tag populate this event <b>onSelect = "<OnSelect>" </b> this event.

      Now use a flag, let it be SHOW_POPUP.

      Now in the event handling capture the selection event of the table.

      IF EVENT->EVENT_NAME = 'tableView' AND

      EVENT->EVENT_SERVER_NAME = 'onSelect'.

      TV ?= CL_HTMLB_MANAGER=>GET_DATA( REQUEST = REQUEST

      NAME = 'tableView'

      ID = '<tableID' ).

      IF TV IS NOT INITIAL.

      TABLE_EVENT = TV->DATA.

      ROWINDEX = TABLE_EVENT->ROW_INDEX.

      READ TABLE <Table Name> INDEX ROWINDEX into WA.

      Key = WA-<VALUE>.

      clear SHOW_POPUP.

      IF Key IS NOT INITIAL.

      SHOW_POPUP = 'X'.

      ENDIF.

      ENDIF.

      ENDIF.

      Now in the LayOut Page Write This Script In Between Form Tag in the begning only.

      <%

      if SHOW_POPUP EQ 'X'.

      %>

      <script>

      function call_help(name)

      {

      var result = window.open(name,"helpWindow", "status=no, menubar=no width=730,height=550");

      result.moveTo(100,40);

      }

      </script>

      <%

      endif.

      %>

      And in between <FORM> Tag Call This Function Like

      <script>

      call_help(" Name.htm>?Key=<%= Key %>");

      </script>

      Do not use these code as u were using earlier

      onCellClick = "onCellClick"

      <htmlb:link id = "link"

      onClientClick = "return popitup('mat_move.do?key=11')">

      </htmlb:link>

      Do Remember to clear the SHOW_POPUP Flag on request of the page at each time.

      I think This will definitely help you , If you find any problem do revert back....

  • author's profile photo Former Member
    Former Member
    Posted on Oct 13, 2005 at 05:34 AM

    I'm Warot. From your suggestion above, there is no event onSelect in the <htmlb:tableView>. Did you means onRowSelection? If yes, it seems that users have to select that line instead of clicking the icon on the tableview.

    Moreover, where should I call the script function?

    <script>

    call_help(" Name.htm>?Key=<%= Key %>");

    </script>

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member

      hi Warot

      Sorry for the late reply

      Let me tell you...

      <b>

      You can Use OnRowSelection.....It will solve the purpose..

      What I am trying to do is , On click of the table control i will trigger a server event.

      i the server event i will set the flag SHOW_POPUP and navigate the data that is required on the popup window through navigate->setparameter().

      now when the layout will be refreshed it will check the SHOW_popup Flag. If it is set, it will define the javascript fuction, otherwise skip that code.

      I have used this concept in BSP with Flow logic, and it works there. So i am well assure that it will deinitely work in the MVC scenario. You just call the right thing at right place.

      If it does not work let me know.........</b>

      Mithlesh Kumar Jha

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.