Skip to Content

BSP/HowTo – Customizing the design of System Logon page in NetWeaver ’04

Introduction

The standard Basic Authentication pop-up works fine but if you are publishing your BSP application in Internet you will need a well designed Logon Page where users can choose the language, change the password, etc… NetWeaver’04 propose a new way to do that; it is called System Logon. The BSP application System (used in SAP Web AS 6.20) with its html pages is still supported but I think that the new way is better engineered and easier to be customized.

STEP 1 – Switching on System Logon

Call transaction SICF, locate your BSP Application and perform the following steps:

  • double click on your BSP application
  • choose the Error Pages Tab
  • In the Logon Errors Tab select the System Logon option
  • Click on the Settings button
  • In the new page, select the Define Service-Specific Settings option
  • Now it’s important to choose on of the SAP Implementation with the preferred SAP Motiv
  • Type Enter and then SAVE your work. You are ready to test the System Logon just calling your BSP application
  • I think you’ll test now other SAP implementations and the behavior of each available option
  • I’ll describe the User-Specific – Class in the next chapter; please wait a while…

I like so much the Check for multiple Logon option (Logon on to your application from different computers in the same time to test it).

STEP 2 – Adapting System Logon to your Visual Identity

System Logon support everything a Logon page needs. But what about the design? Everybody needs to adapt it to the company identity Ok now its time to involve an ABAP Object programmer. In NW’04 SP11, she/he should perform the following steps: Step 2.1 – create a new ABAP class Z_ICF_BASIC_LOGIN that inherits from CL_ICF_BASIC_LOGIN image Step 2.2 – define a new attribute called CO_ID_DEFAULT_BUTTON Type Constant, Visibility Private ,Type STRING, value ‘sapSL_DEFAULT_BUTTON’. You can copy it from class CL_ICF_BASIC_LOGIN image Step 2.3 – redefine method RENDER copying the source code from CL_ICF_BASIC_LOGIN image As you can see, the last statement of the method RENDER refer to the variable lv_content_html where all the HTML staff has been previously prepared. Without being too much invasive, I suggest to insert same lines of code before the last statement in order to manipulate the lv_content_html variable. For example you can write something like:

‘ ‘ ‘ ‘ ‘ “%title% will be replaced ‘ ‘ ‘ ‘ ‘

%title% Insert your Logo–>’ ‘ ‘ ‘

‘ ” MAIN AREA ” ‘ ‘ ” LEFT FRAME ‘ ‘ ” RIGHT FRAME ‘ ‘ “%html_right_frame_text% will be replaced ‘ ‘ ‘

‘ ‘ ‘ ‘ ‘ ‘ ‘ ‘ ‘ ‘ ‘ ‘ ‘ “%sapLogonpage% will be replaced ‘ ‘ ‘

%sapLogonpage%

‘ ‘

%html_right_frame_text%

‘ INTO lv_outer_outer_html. * Insert Your TITLE DATA lv_title_html TYPE string. lv_title_html = ‘Your Title’. * lv_title_html = cl_bsp_runtime=>get_otr_text( alias = ‘ZSDN/PortalTitle’ ). REPLACE ‘%title%’ WITH lv_title_html INTO lv_outer_outer_html. * Insert Your right fram text DATA l_html_right_frame_text TYPE string. l_html_right_frame_text = ‘Your Free Text’. * l_html_right_frame_text = cl_bsp_runtime=>get_otr_text( alias = ‘ZSDN/PortalRightFrameText’ ). REPLACE ‘%html_right_frame_text%’ WITH l_html_right_frame_text INTO lv_outer_outer_html. * Insert System Logon staff REPLACE ‘%sapLogonpage%’ WITH lv_content_html INTO lv_outer_outer_html. * Move back to the std variable lv_content_html = lv_outer_outer_html.  Now we are going to activate the customized class: call again transaction SICF, locate your BSP Application and in the System Logon Configuration choose User-Specific option at the right button area and type the ABAP class name just created (eg. Z_ICF_BASIC_LOGIN) SICF screen shot: image That’s it! Perform a new login to your BSP application to see that your ABAP is generating the page.

Previews of the resulting page…

Here is what you can easily obtain: image I’m sure that in few minutes you will transform in something like the following page: image

Some more customizations….

Title In add, I found out that the window’s Page Title can be set redefining method RENDER_PAGE (copying the source code from CL_ICF_BASIC_LOGIN) where I added also a link to my stylesheet file. Theme Unfortunately, via SICF, the theme selection is allowed only for the SAP standard implementation method. To set the preferred theme in our customer CLASS you can redefine method INIT_UR (copying the source code from CL_ICF_BASIC_LOGIN) and adjust the CASE lv_theme_root. Language I got also trouble with the language dropDownListBox where only English and German are present. I fixed it redefining method CREATE_LOGIN_FORM (copying the source code from CL_ICF_BASIC_LOGIN) and adding some lines of code before the statement “if lines( m_languages ) > 0.”

23 Comments
You must be Logged on to comment or reply to a post.
  • Hallo Serio,

    Glad you liked the logon application. And that it helped you achieve your goals of having a customized logon application. In the next service pack (or one thereafter) we will add additional customizing options so that typical changes, such as new images and a new stylesheet can be used with simple customizing, instead of having to program a new handler class. We are also adding a list of links (eg: Register, Need Password, Help, etc.), which can be set to point to public pages.

    bye, brian

  • Thats exactly the way we intended the customizing: Just redefine the base class CL_ICF_BASIC_LOGIN and redefine the "RENDER" method to get a custom look. Please reuse the login form and buttons as Sergio does.

    If there are languages missing from the selection box then there is probably a problem with language installation.

    Thanks for writing this excellent WebLog!

    Best Regards
    Uwe

  • Sergio , Thanks for this excellent Weblog .

    Can you give some idea regarding the Custom Logon Screen Elements ( like what should be they named etc ) and how the Custom Button Events are trigerred .

    • Dear Sukant,
      I experienced that it is really important to customize the look-and feel but the features delivered in the standard class are already enough.

      In details: 
      - In the top and right frames you can add any html element (eg. external links).
      - If you intend to add new features to the login frame (eg. htmlb:button that is processed by the your abap class) I can just "redirect" you to the standard docu.
        The page title is " User-specific Changes" and the url is http://help.sap.com/saphelp_nw04/helpdata/en/3e/70de3f68d48f15e10000000a155106/content.htm
       
        When you will find the way you are welcome to extend this weblog...

      Sergio

  • Hello,

    I installed the code as suggested and my logon page did not render at expected.  After I made a few adjustments I still can change the position of the SAP login screen.  It always appears in the middle at the bottom.  No matter what I do.  Please advise.

    Thanks,
    alisa

  • Hi - great blogg.  I also redefined RENDER_PAGE to add additional styles and held HTML and CSS in Standard Texts so that messages could be altered on each system without the need for transports (e.g. Welcome to Dev, QA, Prod etc.).  One thing I am struggling with is launching the browser without the toolbar as users will insist on pressing the back button.  I know how to do this from another page using javascript but we are not happy with two pages being open or the pop up warning when using window.close(). Any ideas anyone?
  • Hello,

    at first a very good weblog. Because i am designing my applications into a public and a protected area, i want to point to the public login page (with no authorization) on the login page, just like other applications too.

    I have found out to redefine the ADD_CUSTOM_LINKS method like this:
    * Local declarations.
      data:
        pagename            TYPE o2pagename,
        url                 type string,
        count               type i,
        link                type t_custom_link.

    * Public login.
      pagename-applname = '/euh/cer'.
      pagename-pagekey  = 'public/default.htm'.
      pagename-pagename = 'public/default.htm'.

      CALL METHOD cl_o2_helper=>generate_url_for_page
        EXPORTING
          p_page        = pagename
          p_secure_http = ' '
        IMPORTING
          p_url         = url
        EXCEPTIONS
          OTHERS        = 1.

      link-text = 'Public Login'.
      link-href = url.
      append link to links.

    So one little problem does occur? I want to use also the language box, to steer in which language
    the public area does appear. It seems, that this
    is only possible to fetch the language selection via javascript and also modify the link afterwards. Or any other suggestion?

    Best regards,
    Stefan Riedel-Seifert

    • Hi Stefan, I tried to understand your question and to provide an answer to but I'm not able.
      Maybe if you try to make use of the sap-language parameter (e.g. &sap-language=I) you will solve your issue.
      But do you see the language dropdownlistbox?
      Which language is contained in the DDLB?
      Sergio
  • During the migration process problems have been reported for this blog. The blog content may look corrupt due to not supported HTML code on this platform. Please adjust the blog content manually before moving it to an official community.
  • Hi,

    The whole concept is pretty good and is useful. Can you please tell me what should we write in the code. I have manipulated my existing code with yours which looks like the one below.

    method RENDER.
    data lr_gridlayoutcell type ref to ifur_d2_gridlayoutcell.
    data lr_gridlayoutrow type ref to ifur_d2_gridlayoutrow.
    data group type ref to ifur_d2_group.
    data lr_grid_outer type ref to ifur_d2_gridlayout.

    data lv_content_html type string.
    data lr_renderer type ref to ifur_d2.
    data lr_system type ref to ifur_d2_system.

    data main_ml type ref to ifur_d2_matrixlayout.
    data main_mr type ref to ifur_d2_matrixlayoutrow.
    data main_mc type ref to ifur_d2_matrixlayoutcell.

    lr_grid_outer = clur_d2_factory=>gridlayout( width = '100%'
    height = '100%' ).

    lr_gridlayoutrow = clur_d2_factory=>gridlayoutrow( ).
    lr_grid_outer->rows_add( lr_gridlayoutrow ).

    lr_gridlayoutcell = clur_d2_factory=>gridlayoutcell( halign = ifur_d2=>cellhalign_center
    valign = ifur_d2=>cellvalign_middle ).
    lr_gridlayoutrow->cells_add( lr_gridlayoutcell ).

    *** Inner grid with the content stuff

    group = clur_d2_factory=>group( width = '300px'
    title = iv_title
    istexttitle = abap_true
    design = ifur_d2=>groupdesign_sapcolor
    hascontentpadding = abap_false
    ).
    lr_gridlayoutcell->content = group.

    group->titlecaption = clur_d2_factory=>caption( text = iv_title ).

    main_ml = clur_d2_factory=>matrixlayout( width = '100%' ).
    group->content = main_ml.

    * Messages row
    if ir_messages_control is bound.
    main_mr = clur_d2_factory=>matrixlayoutrow( ).
    main_ml->rows_add( main_mr ).

    main_mc = clur_d2_factory=>matrixlayoutcell( halign = ifur_d2=>cellhalign_left
    valign = ifur_d2=>cellvalign_top
    cellseparation = ifur_d2=>layoutcellsep_small
    colspan = 2
    content = ir_messages_control ).
    main_mr->cells_add( main_mc ).

    * Row adding some vertical space
    main_mr = clur_d2_factory=>matrixlayoutrow( ).
    main_ml->rows_add( main_mr ).

    main_mc = clur_d2_factory=>matrixlayoutcell( colspan = '2' height = '115px' ).
    main_mr->cells_add( main_mc ).
    endif.

    * System Info row (spans over content cell on the right side)
    if ir_system_info_control is bound.
    main_mr = clur_d2_factory=>matrixlayoutrow( ).
    main_ml->rows_add( main_mr ).

    main_mc = clur_d2_factory=>matrixlayoutcell( ).
    main_mr->cells_add( main_mc ).

    main_mc = clur_d2_factory=>matrixlayoutcell( halign = ifur_d2=>cellhalign_left
    valign = ifur_d2=>cellvalign_top
    cellseparation = ifur_d2=>layoutcellsep_largewithline
    width = '100%'
    rowspan = 2
    content = ir_system_info_control ).
    if ir_buttons_control is bound.
    add 1 to main_mc->rowspan.
    endif.
    main_mr->cells_add( main_mc ).
    endif.

    * Content cell
    main_mr = clur_d2_factory=>matrixlayoutrow( ).
    main_ml->rows_add( main_mr ).

    main_mc = clur_d2_factory=>matrixlayoutcell( halign = ifur_d2=>cellhalign_left
    valign = ifur_d2=>cellvalign_middle
    cellseparation = ifur_d2=>layoutcellsep_small
    width = '100%'
    content = ir_content_control ).
    main_mr->cells_add( main_mc ).

    * Buttons cell
    if ir_buttons_control is bound.
    * Add some vertical space below of the content
    main_mr = clur_d2_factory=>matrixlayoutrow( ).
    main_ml->rows_add( main_mr ).

    main_mc = clur_d2_factory=>matrixlayoutcell( height = '15px' ).
    main_mr->cells_add( main_mc ).

    * Add buttons row
    main_mr = clur_d2_factory=>matrixlayoutrow( ).
    main_ml->rows_add( main_mr ).

    main_mc = clur_d2_factory=>matrixlayoutcell( halign = ifur_d2=>cellhalign_left
    valign = ifur_d2=>cellvalign_middle
    cellseparation = ifur_d2=>layoutcellsep_small
    width = '100%'
    content = ir_buttons_control ).
    main_mr->cells_add( main_mc ).

    * Add empty cell to fill up the row
    main_mr = clur_d2_factory=>matrixlayoutrow( ).
    main_ml->rows_add( main_mr ).

    main_mc = clur_d2_factory=>matrixlayoutcell( ).
    main_mr->cells_add( main_mc ).

    endif.

    * Render
    init_ur( importing er_renderer = lr_renderer
    er_system = lr_system ).

    lr_renderer->render( exporting _control = lr_grid_outer
    changing _html = lv_content_html ).

    rv_html = render_page( iv_javascript = iv_javascript
    iv_hidden_fields = iv_hidden_fields
    iv_title = iv_title
    iv_form_name = iv_form_name
    ir_system = lr_system
    ir_renderer = lr_renderer
    iv_content_html = lv_content_html ).

    DATA: lv_outer_outer_html TYPE string.
    * Build the page layout
    CONCATENATE " TOPAREA
    ''
    ' '
    ' ' "%title% will be replaced
    ' '
    ' '
    '

    %title% Insert your Logo-->'
    ' '
    '

    '
    " MAIN AREA
    ''
    ' '
    " LEFT FRAME
    ' '
    " RIGHT FRAME
    ' ' "%html_right_frame_text% will be replaced
    ' '
    '

    '
    ' '
    ' '
    ' '
    ' '
    ' '
    ' ' "%sapLogonpage% will be replaced
    ' '
    '

    %sapLogonpage%

    '
    '

    %html_right_frame_text%

    '
    INTO lv_outer_outer_html.

    * Insert Your TITLE
    DATA lv_title_html TYPE string.
    lv_title_html = 'Your Title'.
    * lv_title_html = cl_bsp_runtime=>get_otr_text( alias = 'ZSDN/PortalTitle' ).
    REPLACE '%title%' WITH lv_title_html INTO lv_outer_outer_html.

    * Insert Your right fram text
    DATA l_html_right_frame_text TYPE string.
    l_html_right_frame_text = 'Your Free Text'.
    * l_html_right_frame_text = cl_bsp_runtime=>get_otr_text( alias = 'ZSDN/PortalRightFrameText' ).
    REPLACE '%html_right_frame_text%' WITH l_html_right_frame_text INTO lv_outer_outer_html.

    * Insert System Logon staff
    REPLACE '%sapLogonpage%' WITH lv_content_html INTO lv_outer_outer_html.

    * Move back to the std variable
    lv_content_html = lv_outer_outer_html.

    endmethod.

    What should i write in the place of %sapLogonpage%

  • Hi Sergio,

    I am trying to develop customize logon page for one of ITS service but the problem is that customize class assigned under the system logon configuration is not triggering.

    System always defaulting the same logon page. I tried to assign the example class also under that configuration but still not working.

    Could you please let me know what else is required to trigger the customize class?

    Note- The SICF service is under the tree ITS and i am using the standard theme '99'.

    Thanks,

    Manish

  • Hi Sergio,

    I have done the same thing that you told but am still getting the SAP logon screen not my customized one. Can you please tell me what additional things that I have to do.

    Thanks,

    Bharat

      • Hi Sergio,

        I have created webdynpro application and in SICF service for this application I have entered the class as you have shown .

        I have also redefined the RENDER method and added the code as you have told.

        Also when I check the checkbox for ' Do Not Display Warnings ' then nothing is displayed in browser.

        Can you please let me know what I have to do

        Thanks,

        Bharat