Scribd Logo
Upload

Welcome to Scribd!

  • BSP

    Uploaded by

    prasad_5517718
    115 views59 pages
    BSP Application can be built using transaction SE80. You can observe the 'pages with flow logic' and under that you can find 'default.htm' page in the BSP Application tree. Change the code in the layout as shown in the image below or copy and paste the code given below in the layout window.

    Original Description:

    Original Title

    bsp

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    BSP Application can be built using transaction SE80. You can observe the 'pages with flow logic' and under that you can find 'default.htm' page in the BSP Application tree. Change the code in the layout as shown in the image below or copy and paste the code given below in the layout window.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    115 views59 pages

    BSP

    Uploaded by

    prasad_5517718
    BSP Application can be built using transaction SE80. You can observe the 'pages with flow logic' and under that you can find 'default.htm' page in the BSP Application tree. Change the code in the layout as shown in the image below or copy and paste the code given below in the layout window.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 59

    Building a simple BSP Application

    By Phani

    This document describes the how to create and execute the BSP Application. Step1: SE80 is the transaction where you can build the BSP Application. Select BSP Application as shown below and provide the name of the BSP Application name and press enter.

    Step2: Provide the description of the BSP Application and click create button.

    Activate the BSP Application. Step3: Create the page as shown below.

    Step4: You will get the following screen there you provide name page and its description.

    Step5: Application automatically generates the some code as shown below.

    Step6: To execute the BSP Application, we use URL (Uniform Resource Locator). We can find the URL of the BSP Application as shown below.

    Step7: Now go to SAP Logon Pad and note down the application server.

    Building a simple BSP Application to retrieve Material information


    By Vakada Raghava, Mouri Tech Solutions

    Go to transaction SE80. Select BSP application and input the name of the BSP application that you want to create.

    Save and activate the application. Right click on the application name and click createpage.

    The resultant window appears as follows. Enter the name of the page that you want to create. In this case it is the default.htm that I am creating.

    Enter the description of the page and click on continue.

    Click save.

    You can observe the pages with flow logic and under that you can find default.htm page in the BSP application tree.

    Change the code in the layout as shown in the image below or copy and paste the code given below in the layout window.

    <%@ page language="abap" %> <html> <body BGCOLOR="#B5E1D2" > <h2> <B> MATERIAL DETAILS </B> </h2> <form method="post"> Material Number <input type=text name="matnr" value="" > <input type=text name="matnr2" value="" > <p> <input type=submit name="onInputProcessing(select)" value="Get Details"> <p> <input type=submit name="onInputProcessing(materials)" value="Get All"> <p> <center> <table border=1> <% data: wa_mara type mara. %> <% if i_mara is not initial. %> <tr> <td><b>MATNR</b></td> <td><b>ERSDA</b></td> <td><b>LAEDA</b></td> <td><b>VPSTA</b></td> </tr> <% loop at i_mara into wa_mara. %> <tr>

    <td> <%= wa_mara-matnr %> </td> <td> <%= wa_mara-ersda %> </td> <td> <%= wa_mara-laeda %> </td> <td> <%= wa_mara-vpsta %> </td> </tr> <% endloop. %> <% else. %> <tr> <td><b>MATNR</b></td> <td><b>ERSDA</b></td> <td><b>LAEDA</b></td> </tr> <% loop at it_mara into S_mara. %> <tr> <td> <%= S_mara-matnr %> </td> <td> <%= S_mara-ersda %> </td> <td> <%= S_mara-laeda %> </td> </tr> <% endloop. %> <% endif. %> </table> </form> </body> </html>

    Create the page attributes as shown below.

    Save, Check and activate the BSP application and execute. Enter the login name and password in the pop-up that appears.

    The BSP page looks as shown below.

    Click here to continue...

    Step8: Now go to C:\WINDOWS\system32\drivers\etc\hosts.txt, Open this hosts.txt file and provide the application server and URL of the BSP Application as below.

    Step9: Now you can execute the BSP Application in web browser.

    ...Previous

    In the Event Handler tab, under OnInputProcessing tab, write the code as shown below or copy and paste the code that is given below.

    Code under OnInputProcessing. CASE EVENT_ID. WHEN 'select'. NAVIGATION->SET_PARAMETER( 'matnr' ). SELECT * FROM MARA INTO TABLE I_MARA WHERE MATNR BETWEEN MATNR AND MATNR2. WHEN 'materials'. SELECT * FROM MARA INTO TABLE I_MARA. WHEN OTHERS. ENDCASE. Click on the BSP application name and input as shown below.

    Save, check and activate the BSP application and then execute the application. The page would be displayed as shown below.

    Enter the material numbers in the textboxes and then click on Get details. The output would be as follows. The output is a result of the select query that we fired selecting the specified set of fields.

    Click on the Get all button to get the output as follows. Remember, we have fired a select query selecting all the records from the database table MARA and are displaying it.

    A Simple BSP application to select a range of Sales Document and display the result on the next Page
    By Amuktha Naraparaju, YASH Technologies

    This Document explains about a simple BSP application where we can give a range of Sales Document Number and then the respective data related to that Sales Document Number is displayed. The factors that have been considered while doing this BSP Application. First to create a BSP Application and execute it on the browser we have to include the IP address of the particular system and browser in the drivers program. We can do this by going to START>RUN->DRIVERS->ETC We can use HTML or HTMLB or any other coding to construct a BSP application. (Here we are using HTMLB) We have considered table VBAP We have use the class CL_HTMLB_MANAGER and CL_HTMLB_EVENT and created their instances.

    Steps to create a BSP Application. 1. Go to Transaction SE80, select BSP Application and give the name of the Application you want to create. Press ENTER.

    2.

    A pop-up window appears where we have to give a short description and press Create.

    3.

    After creating the Application assign it to package.

    4.

    Now go to the object right click on it. Say Create->Page.

    5.

    Then a pop up window appears, we have to give the name of the page we are creating (here First.htm) and give some short description.

    6.

    A page of layout tab will be created with some amount of coding on it. When we execute it we get a web page provide all the host address is mentioned correctly in drivers.

    .Previous

    7.

    Activate the page and the application as well. Then we will see a hierarchy of the application and pages.

    8. 9.

    Now go to the page First.htm of what we have created. This hierarchy of application and pages are from the Repository Browser. On the layout of the page to include any input fields or buttons or tabular structures we have to go to the Tag Browser, from where we have to select the tags.

    10. After going to the Tag Browser. Go to BSP Extensions -> Transportable -> HTMLB. 11. Once we click open the HTMLB, there are many tags. For our purpose on the first page we need. Since we need to enter a range of Sales Document Numbers, we need 2 input fields. One label to indicate the input field. One Button, which on clicking will get us the required data. 12. So we drag and drop the required TAGS from the Tag Browser. Our Coding with all the Input fields, buttons and labels will be like this.

    13. Here in the above coding the variables w_vbeln1 and w_vbeln2 have to be declared in Page Attributes and the IDs given to each input field or button is of at most importance because they uniquely identify each Field or button. 14. Here in the above coding the variables w_vbeln1 and w_vbeln2 have to be declared in Page Attributes and the IDs given to each input field or button is of at most importance because they uniquely identify each Field or button. 15. Now, we have to write our main code in the event OnInputProcessing. For that purpose we have to go to the Event Handler tab and select OnInputProcessing event there. 16. Since we are using the class CL_HTMLB_MANAGER we have to call this class and have to create an Instance according to it. We also have to write the Page Navigation logic here because we are Navigating from the first page to the second page. Create the Second Page and name it as Second.htm.

    The coding on the page is like this. Here the values in the braces of SET_PARAMETER are the IDs of the input fields. This is the navigation logic. On the last line navigation->next_page( 'NEXT' ). NEXT here is defined like this. Double Click on the application. The following screen will appear.

    .Previous

    17. Now Designing the SECOND PAGE. 18. Our output on the second page should be in tabular form. So, in our layout we have to define table view like this.

    19. Here on the Second Page also we have to define the page attributes like this.

    20. Now we have to write the code in the INITIALIZATION event. Because this event triggers when ever a new page is called.

    21. The code is as follows. * event handler for data retrieval data : w_event type ref to cl_htmlb_event , w_eventid type string , w_obj type ref to object , w_obj1 type ref to object , w_vbeln type ref to cl_htmlb_inputfield , w_vbelnval type string , w_vbeln1 type vbap-vbeln , w_vbeln2 type vbap-vbeln . * Calling Method for w_vbeln CALL METHOD cl_htmlb_manager=>get_data EXPORTING request = runtime->server->request name = 'inputfield' id = 'i_vbeln' receiving data = w_obj . w_vbeln ?= w_obj . " Passing the object vale to w_vbeln w_vbelnval = w_vbeln->value . " now the value from w_vbeln is passed to " w_vbelnval w_vbeln1 = w_vbelnval . " Now value from w_vbelnva is passed to " w_vbeln1 * Here we have called the class cl_htmlb_manager and an instance get_data has * * been created. CALL FUNCTION 'CONVERSION_EXIT_ALPHA_INPUT' EXPORTING input = w_vbeln1 IMPORTING OUTPUT = w_vbeln1. * Function to change external format to the internal format * Calling Method for w_vbeln CALL METHOD cl_htmlb_manager=>get_data EXPORTING request = runtime->server->request name = 'inputfield' id = 'i_vbeln1' receiving data = w_obj . w_vbeln ?= w_obj . " Passing the object vale to w_vbeln w_vbelnval = w_vbeln->value . " now the value from w_vbeln is passed to " w_vbelnval w_vbeln2 = w_vbelnval . " Now value from w_vbelnva is passed to " w_vbeln2 CALL FUNCTION 'CONVERSION_EXIT_ALPHA_INPUT' EXPORTING input = w_vbeln2 IMPORTING OUTPUT = w_vbeln2 . * Function to change external format to the internal format

    select * from vbap into table t_vbap where vbeln between w_vbeln1 and w_vbeln2. 22. Save and activate the application. Now when we execute the application. The Screen will be like this.

    On Clicking the button Get Data. The output would be like this.

    Providing F4 help in the BSP Application


    By Venkat

    Step1: To provide f4 help for the input field, we have to add showHelp and onValueHelpattributes to the inputField tag. Provide the values to those attributes as shown below.

    Step2: The attribute onValueHelp has to assign a function, which is to be defined. In this function, using the document.open statement, we can open a page as a window to the input field as F4 help.

    Step3: Create a page with the name specified in the function getCustomer (). And in the eventonRequest event handler get the data for f4 help.

    Step4: To transfer the selected value in the f4 help window to the input field, we need to write a function which is mentioned in button tag.

    Here, we define the function transf containing value of the parameter to be transferred in to input field. Now, we have to catch this parameter value in the main page by providing this code. function transf (fval) { document.getElementById("ip_kunnr").value = fval; } Here, we are assigning the parameter value to the id of input field. Step5: The code is to be written in first.htm is In Layout

    The code in customer.htm is In layout:

    Here, we have to use the attribute onClientClick and a function name is to be assigned to this attribute. In this function, we have to write the code for transfer the selected value in to the input field after pressing the button. In onInputProcess:

    In onRequest:

    Step6: The output of the screen shots as shown below:

    When press the button Press Me, then

    y B.Kalyan

    Go to Transaction SE80-> Select BSP Application & Enter a Name to create a new BSP Application (Eg:yhbsplistbox):

    Press ENTER to create a new Object & Click on Yes:

    Enter the Short Description and Press Enter:

    Once the Object is created, Right Click on the Name and create a Page:-

    Enter the Page Name and the Description and select page with Flow Logic Option

    Now Page is created. Enter the Below Code. In Layout Code:<%@page language="abap"%> <%@extension name="htmlb" prefix="htmlb"%> <htmlb:content design="classic+design2002+design2003"> <htmlb:page title = "First Page "> <htmlb:form> <htmlb:dropdownListBox id = "myDropdownListDay" tooltip = "Quick info for myDropdownListBox"> <% LOOP AT t_mod INTO fs_mod. %> <htmlb:listBoxItem key = "<%=fs_mod%>" value = "<%=fs_mod%>"/> <% %> <%ENDLOOP.%> </htmlb:dropdownListBox> </htmlb:form> </htmlb:page> </htmlb:content>

    In Event-handler on Initilalization. SELECT modul FROM zemployee INTO TABLE t_mod. sort t_mod. delete adjacent duplicates from t_mod comparing modul.

    Page Attributes:Fs_mod type types_mod t_mod type fs_module. In Type Definition: TYPES: BEGIN OF types_mod, modul TYPE zemployee-modul, END OF types_mod, fs_module type standard table of TYPES_MOD.

    OUTPUT:

    Using controller in BSP Application


    By Ravi Aswani, YASH Technologies

    This document describes the how to create a controller in BSP Application. 1. Creating BSP Application

    Create a BSP Application in SE80 e.g., YH1328_TEST_BSP and provide short description and create it.

    2.

    Creating Controller on BSP Application

    Right click on the application and create-> controller and enter name as main.do along with description and press continue.

    3.

    Populating Controller Class

    Enter the name of your controller class i.e. yh1328_controller_main. We also need to create this class in SE24 (Double click on yh1328_controller_main to create the class and press YES)

    4.

    Creating Controller Class In the Properties Tab of the class yh1328_controller_main ensure its super class is CL_BSP_CONTROLLER2.

    5.

    Redefining Methods of the Class We need to redefine some methods inherited from the superclass i.e. DO_INIT and DO_REQUEST.

    Click here to continue...


    Previous

    6.

    Redefine method DO_INIT, dbl click on the method in change mode.

    The DO_INIT Method behaves just like initialization event wherein we provide the data declaration.

    Here we can fetch the data form the database table SFLIGHT into internal table t_flight

    The attributes have to be set in the Attributes Tab of the Class

    7.

    Redefine Method DO_REQUEST

    Select the method DO_REQUEST and press the Redefine button and open the method in change mode. In this method we would be calling Layout (View) we create a reference variable referencing the page and then call the methods CREATE VIEW and pass it the actual view (not yet created). We then call the view.

    8.

    Create a BSP Page (View)

    In SE80 right click on the BSP Application and select Create->Page->Page Type-> View Provide the page as main1.htm and description.

    9.

    Assigning attributes to the View.

    10. Populate the view with data.

    11. Save and Activate BSP Application 12. Execute the controller: Go to the controller index and double click. Use the test (execute) button to view the results.

    Displaying table contents on the BSP Application


    Step1: In SE80 (Object Navigator), For HTML tags, Go to TAG BROWSER wherein select the BSP Extensions as below.

    Step2: In TRANSPORTABLE tree structure, select HTMLB where we can find all HTML tags like Label, Button, and Input Field etc.

    Step3: Create BSP Application and page with name First.htm.

    Step4: To place the Label and Input field in the web browser, go to Tab browser->BSP Extensions>Transportable->Htmlb. Go to Label html tag, drag and drop it into Layout. Similarly same as for input field.

    Step5: User-define data types can be defined in Type Definition tab strip.

    Step6: Page Attributes are parameters declared explicitly for one page. We can access the page attributes from Layout and event handler.

    Step7: When the button is pressed, the process to be executed can be written in OnInputProcessevent handler. Copy the some event handler code from Input Field Documentation and do necessary modifications as shown.

    Step8: To display table, we have to use tableview html tag. Provide the id and table name as shown.

    Save and activate the application. Continued...


    .Previous

    Step9: Execute the application then the following screen appears.

    Provide the customer name then the output screen is:

    Step10: In the above output, to retain the value given customer field, we can achieve it by the optionvalue in the Inputfield in html tag.

    Now the output is:

    Step11: To display only selected field in the table, then we can achieve this using tableviewcolumnhtml tag.

    Now the output will be:

    Navigation between BSP Pages


    The values can be navigated between pages either by using NAVIGATION OBJECT or COOKIES. Using NAVIGATION OBJECT, we can transfer only the values where as by COOKIES, we can pass tables too. Step1: You can find the Objects and their signature for individual events handler by choosing SIGNATURE button in web application browser.

    Step2: In this navigation object, we have methods which are used to determine the characters of subsequent page and the methods which can be used to pass the values from one page to its subsequent pages.

    We can use NEXT_PAGE method to determine the subsequent page and SET_PARAMETER method to transfer the values between pages. Step3: To transfer the values between pages, we have to define the parameters as AUTO PAGE ATTRIBUTE (in case of OBJECT NAVIGATION) as shown.

    Step4: In event handler,

    Step5: We can also transfer the values using COOKIES too. Here, we have to set the cookie (using NAME parameter) and get the cookie in subsequent page.

    We have to mention the expiry date of cookie also. Step6: We have to get this cookie in subsequent page of OnRequest Event handler as shown below.

    reate Server-Side Cookies


    By Vakada Raghava, Mouri Tech Solutions

    Yours is a stateless or stateful application. if its stateful, instead of cookies, you can use application class to hold the data It is a stateless application; I want to reduce the waiting time for a customer by preparing cookies for that particular customer in advance. Go to SE80 Create a BSP application Create a page

    Click on layout tab

    Paste the code in layout tab <html> <body> Selection page Stateful or stateless? <form method="post"> <table> <tr> <td>stateful</td> <td><input type=text name="LAST_STRING_ADDED" value="" > </td> <td><input type=text name="NEXT_STRING" value="" > </td> <td><input type=submit name="onInputProcessing(request)" value="Retrieve"></td></tr> <tr> <td>stateless</td> <td><input type=submit name="onManipulation(manipulate)" value="Store"></td></tr> </table> </form> </body> </html> Click on event handler tab Paste it below code

    Select oninputprocessing, Paste the below code

    onManipulation code event handler to manipulate dynamically the HTTP stream

    data: PAGE_DATA type XSTRING. data: NAME type STRING. export LAST_STRING_ADDED from LAST_STRING_ADDED STRINGS from STRINGS to data buffer PAGE_DATA. NAME = SY-UNAME. call method CL_BSP_SERVER_SIDE_COOKIE=>SET_SERVER_COOKIE exporting NAME = 'my_cookies' APPLICATION_NAME = 'ZCOOKIES ' APPLICATION_NAMESPACE ='ZCOOKIES ' USERNAME = NAME SESSION_ID = 'same_for_all' DATA_NAME = 'page_data' DATA_VALUE = PAGE_DATA EXPIRY_TIME_REL = 3600

    Create Server-Side Cookies


    ...Previous

    Click on page attributes tab.

    Declare like this LAST_STRING_ADDED STRINGS TYPE TYPE STRING STRING

    Save, check, activate it, screen appear like this and click ok button Click on store button

    After storing, go to SE38 BSP_SHOW_SERVER_COOKIES run this program

    Execute the program

    These cookies will save under SSCOOKIE table

    You might also like