How can I implement it using a sort of HTMLB?

[Former Member]

Hi, everyone.

I wanna implemnt below using HTMLB.

-

---

1th Quarter

1M

2M

3M

4M

10

9

4

12

10

9

4

12

.....

I think that <htmlb:tableView> is proper to implement it.

But, As you know. tableView's title is not proper to

implement this header. because the tableView title form

is a little complex.

How can I impelement it?

Plz. help me.

Regards, etnaya.

Message was edited by: Etnaya

Message was edited by: Etnaya

Message was edited by: Etnaya

Message was edited by: Etnaya

[Former Member · Accepted solution]

Hi Etnaya,

try this code....

this may solve your problem..

In Layout..........

<%@page language="abap" %>

<%@extension name="htmlb" prefix="htmlb" %>

<htmlb:content design="design2003" >

<htmlb:page title="asdf " >

<htmlb:form>

<htmlb:tray id = "tray_proposal"

width = "700"

title = "General Data" >

<htmlb:trayBody>

<htmlb:gridLayout id = "Grid1"

rowSize = "1"

columnSize = "4"

width = "690" >

<htmlb:gridLayoutCell rowIndex = "1"

columnIndex = "1"

width = "25%" >

<htmlb:textView id = "Q1"

text = "1st Quarter"

design = "header2" />

</htmlb:gridLayoutCell>

<htmlb:gridLayoutCell rowIndex = "1"

columnIndex = "2"

width = "25%" >

<htmlb:textView id = "Q2"

text = "2nd Quarter"

design = "header2" />

</htmlb:gridLayoutCell>

<htmlb:gridLayoutCell rowIndex = "1"

columnIndex = "3"

width = "25%" >

<htmlb:textView id = "Q3"

text = "3rd Quarter"

design = "header2" />

</htmlb:gridLayoutCell>

<htmlb:gridLayoutCell rowIndex = "1"

columnIndex = "4"

width = "25%" >

<htmlb:textView id = "Q4"

text = "4th Quarter"

design = "header2" />

</htmlb:gridLayoutCell>

</htmlb:gridLayout>

<htmlb:gridLayout id = "Grid2"

rowSize = "1"

columnSize = "1"

width = "690" >

<htmlb:gridLayoutCell rowIndex = "1"

columnIndex = "1" >

<htmlb:tableView id = "tv_indentor"

table = "<%= it_test %>"

width = "690"

encode = "TRUE"

design = "STANDARD" >

<htmlb:tableViewColumns>

<htmlb:tableViewColumn columnName = "a1"

wrapping = "true"

width = "6%"

title = "1M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "b1"

wrapping = "true"

width = "6%"

title = "2M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "c1"

wrapping = "true"

width = "6%"

title = "3M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "d1"

wrapping = "true"

width = "6%"

title = "4M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "a2"

wrapping = "true"

width = "6%"

title = "1M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "b2"

wrapping = "true"

width = "6%"

title = "2M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "c2"

wrapping = "true"

width = "6%"

title = "3M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "d2"

wrapping = "true"

width = "6%"

title = "4M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "a3"

wrapping = "true"

width = "6%"

title = "1M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "b3"

wrapping = "true"

width = "6%"

title = "2M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "c3"

wrapping = "true"

width = "6%"

title = "3M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "d3"

wrapping = "true"

width = "6%"

title = "4M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "a4"

wrapping = "true"

width = "6%"

title = "1M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "b4"

wrapping = "true"

width = "6%"

title = "2M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "c4"

wrapping = "true"

width = "6%"

title = "3M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "d4"

wrapping = "true"

width = "6%"

title = "4M"

type = "text" >

</htmlb:tableViewColumn>

</htmlb:tableViewColumns>

</htmlb:tableView>

</htmlb:gridLayoutCell>

</htmlb:gridLayout>

</htmlb:trayBody>

</htmlb:tray>

</htmlb:form>

</htmlb:page>

</htmlb:content>

In OnCreate.....

wa-a1 = 12.

wa-b1 = 10.

wa-c1 = 5.

wa-d1 = 7.

wa-a2 = 1.

wa-b2 = 30.

wa-c2 = 15.

wa-d2 = 17.

wa-a3 = 2.

wa-b3 = 0.

wa-c3 = 67.

wa-d3 = 23.

wa-a4 = 34.

wa-b4 = 56.

wa-c4 = 65.

wa-d4 = 97.

append wa to it_test.

wa-a1 = 1.

wa-b1 = 40.

wa-c1 = 15.

wa-d1 = 17.

wa-a2 = 43.

wa-b2 = 23.

wa-c2 = 4.

wa-d2 = 56.

wa-a3 = 15.

wa-b3 = 0.

wa-c3 = 6.

wa-d3 = 87.

wa-a4 = 92.

wa-b4 = 34.

wa-c4 = 35.

wa-d4 = 27.

append wa to it_test.

In Types Definations......

types: begin of as,

a1 type i,

b1 type i,

c1 type i,

d1 type i,

a2 type i,

b2 type i,

c2 type i,

d2 type i,

a3 type i,

b3 type i,

c3 type i,

d3 type i,

a4 type i,

b4 type i,

c4 type i,

d4 type i,

end of as.

types: t_test type table of as.

and Page Attributes same as earlier.

Get back if any doubt.

Regards,

Narinder Hartala

[former_member181879 · Accepted solution]

Hallo Narinder,

Good example. Two small comments. Use the <b>Code</b> button above around your source code to get a better formatting and reading. Also, look at the <phtmlb:matrix> to replace the <htmlb:gridLayout>. It renders much faster!

[Former Member]

Hi Etnaya,

Plz close this thread.

Regards,

Narinder Hartala

[Former Member]

Hi Etnaya,

This is possible with tableView.

Try this code....

In Layout......

<%@page language="abap"%>

<%@extension name="htmlb" prefix="htmlb"%>

<htmlb:content design="design2003">

<htmlb:page title = "asdf ">

<htmlb:form>

<htmlb:tray id = "tray_proposal"

width = "610"

title = "General Data" >

<htmlb:trayBody>

<htmlb:tableView id = "tv_indentor"

table = "<%= it_test %>"

headerText = "1st Quarter"

headerVisible = "true"

width = "600"

design = "STANDARD" >

<htmlb:tableViewColumns>

<htmlb:tableViewColumn columnName = "a"

wrapping = "true"

width = "25%"

title = "1M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "b"

wrapping = "true"

width = "25%"

title = "2M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "c"

wrapping = "true"

width = "25%"

title = "3M"

type = "text" >

</htmlb:tableViewColumn>

<htmlb:tableViewColumn columnName = "d"

wrapping = "true"

width = "25%"

title = "4M"

type = "text" >

</htmlb:tableViewColumn>

</htmlb:tableViewColumns>

</htmlb:tableView>

</htmlb:trayBody>

</htmlb:tray>

</htmlb:form>

</htmlb:page>

</htmlb:content>

In OnCreate...........

wa-a = 12.

wa-b = 10.

wa-c = 5.

wa-d = 7.

append wa to it_test.

wa-a = 1.

wa-b = 2.

wa-c = 3.

wa-d = 5.

append wa to it_test.

In Types definition.....

types: begin of as,

a type i,

b type i,

c type i,

d type i,

end of as.

types: t_test type table of as.

define Page Attributes...

it_test type t_test.

wa type as.

this is just sample code you can optimize it.

hope this will help you.

Regards,

Narinder Hartala

[Former Member]

First above all. thank you for your help...^^

The table has four columns. 1th Quarter, 2th Quarther,

3th Quarther and 4th Quarther..

As you know, each quater has four month for header title.

my client wanna draw header title so complex.

humm.. is it possible?

Regards, etnaya.