Skip to Content

Ever since the

PHTMLB

extension was introduced by SAP, I started using it in most of the BSP applications. It gives elegant look and feel and also pages are not crowded with large number of lines of code. However, there is a drawback(I feel), the controls rendered are of the same length.

It would be nicer if the

PHTMLB

controls are customizable with different lengths to give more beautiful look and feel.On the other hand, it’s counterpart

HTMLB

extension has the attribute through which the size of the control can be set on the page.

This weblogs shows, how to take advantage of the additional attributes available in

HTMLB

controls but not in

PHTMLB

. In this example the input field control

(formLayoutInputField)

from

PHTMLB

is used for customization. Even other controls from

PHTMLB

extension can be customized using the same procedure.

Step 1 : Creating custom BSP extension

Using transaction SE80 create custom BSP extension

ZCPHTMLB

image

<BR/><BR/><BR/>

image

<BR/><BR/>

image

Step 2: Creating custom element

Copy the standard PHTMLB control into the custom BSP extension

ZCPHTMLB

and activate it. In this example

formLayoutInputField

is copied to the custom BSP extension.

image

<BR/><BR/>

image

<BR/><BR/>

image

Step 3: Finding element handler class

Find the element handler class for the custom control

formLayoutInputField

in PHTMLB BSP extension.

Using Transaction SE80, Choose standard

formLayoutInputField

tag from the PHTMLB BSP extension, righ click and choose display option from the context menu.

Go to the attributes tab to find out the element handler class for the standard

formLayoutInputField

.

image

Step 4: Create custom element handler

Using Class builder transaction(SE24), copy the standard element handler

CL_PHTMLB_FORMLAYOUTINPUTFIELD

for control

formLayoutInputField

into custom element handler class

ZCL_PHTMLB_FORMLAYOUTINPUTFLD

and save the class.

image

Add additional attributes to the class for

size, maxlength and invalidate

as shown below.

image

Step 5: Redefine method IF_BSP_ELEMENT~DO_AT_END

From the class builder, choose change button to redefine the method

IF_BSP_ELEMENT~DO_AT_END

Add the code as shown below.

image

Here, the instance of the standard

INPUTFIELD

control is obtained and the additional attributes that are passed from the page are set to the correspoponding attributes( size, maxlength and invalidate )of the instance. The changed

INPUTFIELD

instance is passed to the

PHTMLB

instance’s bee attribute.

disabled

            disabled    = me->disabled

            onvaluehelp = me->onvaluehelp

            showhelp    = me->showhelp ).

*

  data formlayout type ref to cl_phtmlb_formlayout.

  formlayout ?= me->get_class_named_parent( ‘CL_PHTMLB_FORMLAYOUT’ ).

  formlayout->add_item(  id            = me->id

                         pos           = me->pos

                         label         = me->label

                         label_binding = me->_label

                         required      = me->required

                         bee           = inputfield

                         visible       = me->visible ).

endmethod.

Step 6: Assigining handler class to the custom control

Assign the custom element handler class to the custom

formLayoutInputField

control in

ZCPHTMLB

.

From transaction SE80, select the BSP extension ZCPHTMLB and choose the control

formLayoutInputField

. From the context menu choose change option and select attribute tab. Assign the custom element handler class

ZCL_PHTMLB_FORMLAYOUTINPUTFLD

as shown and activate the class.

image

Step 7: Additional attributes in custom control

Define the attributes size, invalidate and maxlength in custom control

formLayoutInputField

, so that when set in the Pagelayout theese values are in turn passed to the element handler class. Activate the BSP extension with all the control elements.

image

Step 8: Test BSP application

It’s time to test the custom

formLayoutInputField

control. Using SE80, create a BSP application ZSDNPHTMLB with a page main.htm.

First Tray element uses standard PHTMLB

formLayoutInputField

control and the second tray uses the custom

formLayoutInputField

which uses the attribute

size

to customize the length of the input field.

image

image

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Philip Pareas
    Hello,

    I’d like to say that a fix along these lines would be excellent (floodfilling all the fields looks awful).  I tried making your changes on our system(Kernel 640 Patch Level 58), but was unable to reproduce your success.  The code in the DO_AT_END method seemed a bit different from your example, and I was wondering if SAP has made changes since you wrote this that would prevent your example from working (since you wrote this almost a year ago).

    We are planning on beginning a large MVC BSP project soon, and while I was doing some initial prototyping I was very surprised to find that the fields did not autosize when model binding was used.  Do you know if SAP plans on adding that functionality soon?  If not, we will probably be forced to use either the matrix layout or the formLayoutItem tag in conjunction with plain HTMLB elements.

    Thank you,
    Phil

    (0) 

Leave a Reply