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 
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 
Step 2.3 – redefine method RENDER copying the source code from CL_ICF_BASIC_LOGIN 
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 ‘ ‘ ‘
‘ ‘ |
%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: 
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: 
I’m sure that in few minutes you will transform in something like the following page: 
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.”
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
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
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 .
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
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
Great weblog. I guess it's exactly the same for WD4ABAP. Can you confirm this?
Thanks,
Peter
it's true for every objects managed by /nSICF.
To be honest this is an old Blog that I updated just for Formatting Issues.
Have a look also to the other: SAP Web AS/HowTo - Customizing the design of System Logon page: new options of the NetWeaver '04s
Sergio
Thanks for the info.
Best regards,
Peter
you are right, I also made use of standard texts but it was too long too explain in the blog and I'm sure that after the this introduction, good ABAPers are able to do more and more.
Regarding the Back Button, you know it's really a nightmare (have a look to BSP / HowTo: BACK Navigation - the nightmare of statefull Web applications ) but I have no good answer to your question.
Post the same question in the BSP (or Web Dynpro ABAP) forums and let me know if you find the solution.
Sergio
window.opener=self ;window.close();
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
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
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
' '
' '
'
'
'
'
" MAIN AREA
''
' '
" LEFT FRAME
' '
" RIGHT FRAME
' ' "%html_right_frame_text% will be replaced
' '
'
' '
' '
' '
' '
' '
' ' "%sapLogonpage% will be replaced
' '
'
'
'
'
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 Bharat,
which kind of application are you logging in?
If BSP or Web Dynpro for ABAP the crucial step is to execute transaction /nSICF then select corresponding node and customize the Login page as in the 4th picture of this blog.
It was long time ago and now the help is also very well mainteined. Check also http://help.sap.com/saphelp_nw04s/helpdata/en/ff/c7de3fc6c6ec06e10000000a1550b0/frameset.htm
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
I'm sorry Bharat, I would suggest to you to ask for support posting a Discussion in the Web Dynpro for ABAP forum