Htmlb tableview with CSS

How can i assign a css file to a htmlb tableview.
for instance:
I can assign css with 'class=XXX' in html code.
but how assign 'class' to a htmlbtableview.
<%html table%>
<table 'class=XXX' width="75%" border="1">
<tr>
 <td> </td>
 <td> </td>
 <td> </td>
</tr>
<tr>
 <td> </td>
 <td> </td>
 <td> </td>
</tr>
<tr>
 <td> </td>
 <td> </td>
 <td> </td>
</tr>
</table>
 <%htmlb table%>
 <htmlb:tableView id = "Project"
 table = "<%=Project%>"
 selectionMode = "SINGLESELECT">
 <htmlb:tableViewColumns>
 <htmlb:tableViewColumn columnName="COMCODE"
 title ="code" >
 </htmlb:tableViewColumn>
 <htmlb:tableViewColumn columnName="PRJCODE"
 title ="prjcode">
 </htmlb:tableViewColumns>
 </htmlb:tableView>

HI
GOOD
GO THROUGH THESE LINKS
/people/thomas.jung3/blog/2005/08/22/bsp-value-input-help-popups-version-30
https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/docs/library/uuid/8a4ecee4-0601-0010-6aa2-9903d650266f#search=%22ASSIGN%20A%20CSS%20FILE%20TO%20A%20HTMLB%20TABLEVIEW%20%2C%20SAP%22
http://www.sapdesignguild.org/resources/ma_guidelines_3/ma_guidelines_3.pdf#search=%22ASSIGN%20A%20CSS%20FILE%20TO%20A%20HTMLB%20TABLEVIEW%20%2C%20SAP%22
THANKS
MRUTYUN^

Similar Messages

Freeze the column headers for htmlb:tableView using CSS

Hi
I am using a <htmlb:tableView > in BSP to display data.
i want to freeze the column headers so that they dont scroll when table data is scrolled.
Is it possible ?
Regards
Rajendra

Hi Rajendra,
Have a look at the links below:
[Freeze tableview header-I|https://forums.sdn.sap.com/click.jspa?searchID=24813847&messageID=3088768]
[Freeze tableview header-II|Freeze table header in HTMLB Tableview]
[Freeze Columns of tableview|https://forums.sdn.sap.com/click.jspa?searchID=24813847&messageID=3517748]
Search the forum and you will find information on this.
Regards,
Anubhav

Question about HTMLB:tableView with nested tag

Dear experts.
1. I have one question that can I code like below.
2. And what is the mean of "$something$". when I run the page I met the error $TVCID$ is no more supported from design2003.
<htmlb:tableViewColumn columnName = "myicon"
 type = "user"
 title = "Image"
 horizontalAlignment="center" >
 <htmlb:link id = "$TVCID$"
 onClick = "$CARRNAME$"
 tooltip = "$CARRNAME$">
 <htmlb:image src = "$TVCVALUE$"
 alt = "$TVCVALUE$"
 tooltip = "$CARRNAME$" />
 </htmlb:link>
</htmlb:tableViewColumn>

Hi.
You have more options to solve the problem.
First you can set your design to 2002.
<htmlb:content design = "DESIGN2002" >
or
you can use an iterator
or
you can use the following code
<htmlb:tableViewColumn columnName = "TVCVALUE"
 type = "LINK"
 linkClickTarget = "ONCLICK" (<- InputProcessing)
 title = "Image"
 horizontalAlignment = "center"
 tooltip = "CARRNAME" >
</htmlb:tableViewColumn>
Hope this helps
Greetings
Claudia

HTMLB TableView: Edit first Line

Hi,
I have implemented an HTMLB TableView with the attribute selection mode 'singleselect'.
The users can mark one row to edit. This works so far.
But as the users have to maintain at least one row, the first row should initially be editable without mark it and raising an event.
Thanks in advance

set the selectedRowIndex = 0 or 1 to whatever number of the row you would like initially checked in your OnCreate or OnInitialization Event Handler with selectedRowIndex being defined in your Page Attributes and then assigned to the tableView.

HTMLB: tableview filter problems

Hi,
We developed a BSP application in CRM Web_IC. Whenever user goes to this screen, it retrieves the results from SAP CRM table and lists the entries. We used htmlb:tableview with filter attribute set to 'SERVER'. The first row of the entry is used to filter the entries displayed based on wildcard search and redisplay the same.
We noticed that all this handled by client side eventing (Java Script) and it works okay in our development and testing environment.
But we got wierd results when it went for user testing. On some of the machines, the page looks refreshed but the list display does not change based on the search. We thought it might be caching problem so we tried with different IE settings, it looks okay for some time on one of the machines but the problem gets repeated after wards. The situation is we cannot afford intermittent problems.
OS are win'2000 and XP and browser is IE 6 with sp1 and sp2. The problem is not consistent so none of the combinations actually suggested if the problem is related to one area.
Has anyone experienced similar to above. Any ideas are welcome.
Message was edited by: Raju Datla

Thanks Rainer,
Without making any changes, today majority of the users are did not encounter the problem. I could not check the browser server cache settings as the BSP is using MVC and these fields are missing.
Thanks and Regards,
Raju
I lost how to add points. I remember there was a document on how to add points, which I could not get by search. Could you help me how I can award points to you.
Sorry for that and Thanks
Message was edited by: Raju Datla

ICWC htmlb:tableview filter problems

Hi,
We developed a BSP application in CRM Web_IC. Whenever user goes to this screen, it retrieves the results from SAP CRM table and lists the entries. We used htmlb:tableview with filter attribute set to 'SERVER'. The first row of the entry is used to filter the entries displayed based on wildcard search and redisplay the same.
We noticed that all this handled by client side eventing (Java Script) and it works okay in our development and testing environment.
But we got wierd results when it went for user testing. On some of the machines, the page looks refreshed but the list display does not change based on the search. We thought it might be caching problem so we tried with different IE settings, it looks okay for some time on one of the machines but the problem gets repeated after wards. The situation is we cannot afford intermittent problems.
OS are win'2000 and XP and browser is IE 6 with sp1 and sp2. The problem is not consistent so none of the combinations actually suggested if the problem is related to one area.
Has anyone experienced similar to above. Any ideas are welcome.

Hi Sasi,
Unfortunately I could not get any direct solution to the problem. I chased SAP OSS and SAP direct consultant who was working with us with no solution. Last time, I heard it was sent to htmlb team at SAP. I stopped chasing after that as project gone live and I fixed the problem by putting a search area and button using client side eventing.
If you read the source code once the page is displayed, you can see that SAP writes Javascript to handle the search. I copied the code as Javascript function and placed a button to fire this function which handles the filter as normally SAP does.
Regards,
Raju

HTMLB TableView in customer CI/CD layout

Hello,
i want to create a BSP with htmlb tableview, so
i can simply use the given features (sorting, filter, ...) but the customer want to adapt hic CI/CD Colours Blue and Orange to the hole application.
Is there a chance to use a own stylesheet instead of design2002 or design2003 or is it prossible to create a own design.
I`ve searched this topic in forum, and gets only answers that mixing design and css is not good, and there is a way with EP6 - but we have no portal.
Thanks for any help.
Regards
Marcus

Hi Ulli and Marcus,
I'm currently designing my own style (not in Portal, I'm using 6.20), and yes, it might not be straightforward customizing the design.
But I started with following approach:
After implementing the basic layout of my page (like header pictures and so on) I added the functional parts (htmlb elements, ...) and tried to change them one by one ... that's how I did it:
- add a htmlb element to the layout
- access the page via browser to get the generated html code
- in this code just look for all the classes used for your htmlb elements
- edit the .css file that gets included in the html header accordingly
Important Points you have to be aware of:
*) There might be styles used for your elements which are not shown in every html code (because element might be displayed differently from page to page). You can either call every possible page combination in order to get all the used classed (not recommended, you could still miss something), or have a closer look at the class names - the classes that belong to a certain element are named in a way you can tell which class belongs where.
(like "urBdyStd" for the body-tag, "urbtn*" for buttons, ...)
From the postfix after the element name part you can guess the detailed function of the class - with a little patience and looking at many different classes used in the html code you can figure out what to change for your style.
*) Be careful which .css-file gets included when looking at the html code. There are css files for different browsers and versions, so if you want to make your application look the same way on all supported browsers (which you probably want), then don't forget to edit these files as well.
*) Changing a css file and testing the results on the WAS is very complicated, so I recommend you create sample html files (which contain one htmlb element each for example), edit the css file and also test it locally, so you don't get caugt in importing a new file version just for changing that one nasty little style attribute that is wrong
Ok, after writing all of this, I can see that it really is a bit of work ... but seeing how your application gets your personal touch is worth it (at least for me) ... and you don't have to change all of the styles, I found that some of the standard styles fit into my design quite good, so I didn't change them. (I copied the chrome design to start from)
Cheers,
Max
P.S.: Would such a topic be worth a weblog?

How to access the data in a TableView with build-in Dropdownlists

Hi,
I build up a TableView with DropdownListBoxes in the cells. All works so far but if I try to access the data in the cells I get the following error message :
     at java.lang.Thread.run(Thread.java:479)
Caused by: java.lang.reflect.InvocationTargetException: java.lang.NullPointerException
     at com.sapportals.htmlb.table.DefaultTableViewModel.getIndexForColumnInModel(DefaultTableViewModel.java:354)
     at com.sapportals.htmlb.table.DefaultTableViewModel.getValueAt(DefaultTableViewModel.java:195)
     at com.sapportals.htmlb.table.TableView.getValueAt(TableView.java:774)
     at LogonPad$MyDynPage.onClickBack(LogonPad.java:467)
Some hints ?
Regards,
Gerald

Hello Anjum,
It looks that the view is based on the master data table itself and view doesn't contain data and is a logical representation of the underlying database tables.
Moreover the view RSDVCHA is used for viewing the characteristics, basic chars and local properties.
Are you storing similar values in YMETADATA?
[Thanks|http://chandranonline.blogspot.com/]
[Chandran|http://chandranonline.blogspot.com/]

Error when displaying amount field in HTMLB Tableview

Hi all,
I am displaying some 'X' table in HTMLB Tableview and it has one amount field.But reference(currency) field of that amount field is in other table . I know it gives the error.
Please tell me there is any other way to resolve this problem with out adding reference(currency)field in the same table?
Thanks and Regards ,
Harikrishna .

Hi Hari,
But reference(currency) field of that amount field is in other table . I know it gives the error.
It will not give any error , you can use the currency key field of other table or structure .
Alternatively you can use predifined type DEC instaed of CURR .
Regards,
Anubhav

Grouping Key Rows In HTMLB Tableview BSP

Hello Experts,
I've a HTMLB Tableview in BSP Application. I need to group the key rows with same value into one.
Current Layout
KEY VALUE 1    VALUE 2
A       X                 Y
A       X                 Y
B       X                 Y
B       X                 Y
Required Layout
KEY VALUE 1    VALUE 2
A       X                 Y
          X                 Y
B       X                 Y
         X                 Y
It's somewhat similar to grouping the key rows in ALV. Not sure how to achieve this in BSP.
Please help....
Regards,
Satyajit
PS: Posted this thread in BSP Forum earlier and haven't got any response yet. So reposting it in ABAP General for a quick response.

Hi Satyajit Mohapatra,
please refer to fixedColumns. Therefore check on your system:
BSP: SBSPEXT_TABLE
Page: TableViewFixedColumns.bsp
There you can find the solution.
Regards, Jonas

Link in a htmlb:tableview

is it possible to add links to a htmlb:tableview.
for example, i have a table with 4 columns. i'd like to let the entries in column 1 appear as links with the content of column 4 as the link target. (column 4 should be invisible for the user)

Hi Daniel,
You didn't study enough before posting...
Take a look at:
1. Documentation on your WebAS (accessible by Tag Browser);
2. SBSPEXT_TABLE BSP Application on your system;
3. other posts in this forum.
Good search.
Dany

BSP htmlb:tableView id="TV_VBAK" table= "//select/I_VBAK"

Hai Experts,
I have a small doubt in bsp appllication,
shall we write like...
<htmlb:tableView id="TV_VBAK" table= "//SELECT/I_VBAK">
I am using Class
ZCL_CONTROLLER_SALES1
in controller.
thanks in advance...
with regards
babu

hai
than q for ur reply.
point will be rewarded...
with regards
babu
Edited by: babu rs on Mar 5, 2008 4:49 PM

HTMLB:TableView

Hi,
I have used the table view in my BSP application and use the concept of iterator class inherited from interface 'IF_HTMLB_TABLEVIEW_ITERATOR' to manipulate the column of each row
ABAP CODE:
<%data: LV_ITERATOR type ref to if_htmlb_tableview_iterator.
create object LV_ITERATOR type zcl_test
 exporting ir_context_node = db_controller
 data_tab = =<LT_TABLE1>
%>
BSP CODE:
<htmlb:tableView
 fillUpEmptyRows = "true"
 id = "ResultTable"
 onNavigate = "navigate"
 selectionMode = "SINGLESELECT"
 table = "<%=<LT_TABLE1>%>"
 visibleFirstRow = "1"
 visibleRowCount = "8"
 width = "100%"
 filter = "server"
 sort = "server"
 iterator = "<%=LV_ITERATOR %>"
 keyColumn = "template_id"
 design = "alternating"
<%-- columnFilters="<%=filters%>"--%>
 tabIndexCell = "FALSE"
 selectedRowIndexTable = "<%=LT_SELECTEDROWINDEXTABLE%>"
 >
and implemented class 'zcl_test' , for some reason something strange is happening , the BSP page will be something like
at the top there are buttons and below this is the TableView that display the content store in internal table 'LT_TABLE1'
now the table contain 10 records,the 1-8 records are displayed on page1 and next 2 records are displayed on page2.
So the issue is , if i naviagte to page2 and press any of the button on top of table view ,it redirect me to page1(display 1-8 records) and don;t stay back on 2'nd page.
Please let me know how i can achieve this of staying on the same page

Hi All,
Sorry for the delay,explanation provided is amazing and may help other searching for the same issue but unfortunately selected row travel back to page index1
and i don;t understand why the selected record is the first record in the internal table of iterator class and that result in this record to appear on page index1
any how i have resolve this by pointing always to page index1.
Code that can be useful:
View:
<htmlb:tableView fillUpEmptyRows = "true"
 id = "tvTempl"
 onNavigate = "navigate"
 selectionMode = "SINGLESELECT"
 table = "xyz"
 visibleFirstRow = "<%= lv_first_rowindex %>"
 selectedRowIndex = "<%= lv_selected %>"
 visibleRowCount = "8"
 width = "100%"
 filter = "server"
 sort = "server"
 iterator = "<%= lr_iterator %>"
 keyColumn = "template_id"
 design = "alternating"
 tabIndexCell = "FALSE" />
code in do_handle_event or in do_request:
DATA: lv_row_index TYPE i,
 lv_page_index TYPE i,
 lv_mod TYPE i,
 lr_html_table_view TYPE REF TO cl_htmlb_event_tableview.
 lr_cl_descriptor = cl_abap_refdescr=>describe_by_object_ref( htmlb_event ).
 IF lr_cl_descriptor->absolute_name CS 'CL_HTMLB_EVENT_TABLEVIEW'.
 lr_html_table_view ?= htmlb_event. // parameter: importing in method HTMLB_EVENT Type Ref To CL_HTMLB_EVENT
 CASE lr_html_table_view->navigationtype.
 WHEN 'pageUp'.
 MOVE mv_first_rowindex TO lv_row_index.
 lv_row_index = lv_row_index - lr_html_table_view->visiblerowcount.
 MOVE lv_row_index TO mv_first_rowindex.
 WHEN'pageDown'.
 MOVE mv_first_rowindex TO lv_row_index.
 lv_row_index = lv_row_index + lr_html_table_view->visiblerowcount.
 MOVE lv_row_index TO mv_first_rowindex.
 WHEN'top'.
 MOVE mv_first_rowindex TO lv_row_index.
 lv_row_index = 1.
 MOVE lv_row_index TO mv_first_rowindex.
 WHEN 'bottom'.
 MOVE mv_first_rowindex TO lv_row_index.
 lv_mod = lr_html_table_view->rowcount MOD lr_html_table_view->visiblerowcount.
 lv_row_index = lr_html_table_view->rowcount - lv_mod + 1 .
 MOVE lv_row_index TO mv_first_rowindex.
 WHEN 'Index'.
 READ TABLE mt_last_formfields INTO ls_formfields WITH KEY name = 'notificationstv_pager_index'.
 IF ls_formfields IS NOT INITIAL.
 MOVE ls_formfields-value TO lv_page_index.
 lv_row_index = 1.
 IF lv_page_index > 1.
 lv_page_index = lv_page_index - 1.
 DO lv_page_index TIMES.
 lv_row_index = lv_row_index + lr_html_table_view->visiblerowcount.
 ENDDO.
 ENDIF.
 ENDIF.
 MOVE lv_row_index TO mv_first_rowindex.
 ENDCASE.
 ENDIF.

Htmlb:tableView event navigation within frameset

hello,
i have a problem with event navigation in a frameset triggered from htmlb:tableView. the structure of my bsp-application:
DEFAULT.HTM
 <frameset noresize cols="70%,*">
 <frame src="links.htm" name="left">
 <frame src="rechts.htm" name="right">
 </frameset>
PAGE LEFT in the frameset with the tableView
<htmlb:form target = "right">
 <htmlb:tableView id="myTable"
 headerText = "Mitarbeiter"
 headerVisible = "true"
 design = "alternating"
 visibleRowCount = "10"
 fillUpEmptyRows = "true"
 onRowSelection = "MyEventRowSelection"
 selectionMode = "singleselect"
 table = "<%= table_csks %>" >
 </htmlb:tableView>
PAGE RIGHT in the frameset shuold display details of the selected tableView row:
<htmlb:form target = "right">
 
 <%= lstable_csks-mandt %>
 
 <%= lstable_csks-kostl %>
 
 <%= lstable_csks-verak %>
 
 <%= lstable_csks-ersda %>
 
 </htmlb:form>
PROBLEM description:
when row is selected, displaying of the details on the right frame works well. but when another event of the tableView is triggered eg. browsing between table pages, the wohle table is displayed in the right frame instead to turn the table-page but stay in the same frame. of course this is done, because i have set the form-target attribute.
and here the question: how can i differentiate between the onRowSelection-Event (navigation to the right frame) and the page-browsing event (stay in same frame but change the tableView page)?
thanks a lot!
kalina

<htmlb:tableView keyColumn = "smtp_addr"
 id = "searchhelp"
 table = "<%= t_searchhelp %>"
 visibleRowCount = "10"
 selectionMode = "SINGLESELECT"
 onRowSelection = "setHelp" >
since you dont have sort or filter option for your table value, you can simply use the rowindex to read the itab.
read table itab index selectedrowindex.
on your other question of using more than one field in the itab for key of a record.
declare another field in the itab and fillit with the concatenation of the key fields (say concatenate recornumber itemnumber into keyfield) and dont show it in the tableview. declare this field as the key column in tableview.
onrowselection this key value will be available in
tabvie->selectedrowkey which you can use to read the itab. however in your case this is not required as you dont use sort or filter.
Raja

HTMLB TableView Iterator & Edit columns, cells

Hi friends,
I am getting errors when , I tried to edit the columns, & Cells of HTMLB TableView by using Iterator.Actually, I got the whole edit buttons and when I edit the values of particular column & cell fileds, it is not saving the values, instead it is giving same old values. The code I used is as follows.
To Edit the columns,
method
IF_HTMLB_TABLEVIEW_ITERATOR~GET_COLUMN_DEFINITIONS.
FIELD-SYMBOLS: <def> LIKE LINE OF p_column_definitions.
APPEND INITIAL LINE TO p_column_definitions ASSIGNING <def>.
<def>-COLUMNNAME = 'STUDENTID'.<def>-EDIT = 'X'.
endmethod.
To Edit the cells,
RENDER_CELL_START Method:
method
IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_CELL_START.
CASE p_column_key.
WHEN 'ICON'.
WHEN 'STUDENTID'.
 IF p_edit_mode IS NOT INITIAL.
ENDIF.
WHEN 'SDATE'.
 IF p_edit_mode IS NOT INITIAL.
ENDIF.
ENDCASE.
endmethod.
To Edit the SDATE cells,
WHEN 'SDATE'.
IF p_edit_mode IS NOT INITIAL.
DATA: date TYPE STRING.
date = m_row_ref->SDATE.
p_replacement_bee = CL_HTMLB_INPUTFIELD=>FACTORY(
 id = p_cell_id
 value = date
 type = 'DATE'
 showHelp = 'TRUE'
 cellValue = 'TRUE' ).
 ENDIF.
Why the either column or cell is not saving the new values, when I edit them? where it went wrong? please mail me in this regard.
regards
CSM Reddy

Hi REDDY CSM
To learn coding these Methods.
You need to learn everything from scratch about MVC.
To learn functionalities of Methods in Controller and how to use them,its Better,if you start with some tutorial(Little application) on MVC.
Here is link,Just follow this,You will get some Exposure to these methods.
http://help.sap.com/saphelp_erp2005/helpdata/en/c8/101c3a1cf1c54be10000000a114084/frameset.htm
Rest keep posting whenever you face and Problem..
Happy Coding..!!
Vijay Raheja

Htmlb tableview with CSS

Similar Messages

Maybe you are looking for