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 OnInputProcess event 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.

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 option value 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 tableviewcolumn html tag.

Now the output will be: