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?

Similar Messages

How to insert check box fields in a htmlb: tableview

Hi,
Can anybody tell me how to insert check box fields in a htmlb: tableview in a sequence of rows in a table view. How to generate the sequence no for the checkbox inorder to know the row that is checked.
Thanks in advance,
Aruna.

Here is the code which has the custom "Checkbox" in the tableview & Triggers the event. You can identify the checkbox based on cell ID (p_cell_id) in the method "IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_CELL_START" & Based on the event name + Cell ID. Look at the code & let me know if you any issue.
Layout:
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<htmlb:content id = "content"
 design = "design2002+design2003"
 controlRendering = "SAP"
 rtlAutoSwitch = "true"
 forceEncode = "ENABLED" >
<htmlb:page title="Test " >
 <htmlb:form>
 <%
data TV_ITERATOR Type Ref To zcl_itr.
data iterator type ref to IF_HTMLB_TABLEVIEW_ITERATOR.
create object tv_iterator exporting appl_cons = application.
iterator = tv_iterator.
 %>
 <htmlb:tableView id = "fligts"
 headerText = "Flight"
 width = "100"
 headerVisible = "true"
 design = "alternating"
 visibleRowCount = "10"
 fillUpEmptyRows = "true"
 showNoMatchText = "true"
 filter = "server"
 sort = "server"
 onHeaderClick = "MyEventHeaderClick"
 table = "<%= APPLICATION->itab %>"
 iterator = "<%= ITERATOR %>" />
 </htmlb:form>
</htmlb:page>
</htmlb:content>
Event Handling:
DATA: EVENT_ID1 TYPE REF TO IF_HTMLB_DATA.
EVENT_ID1 = CL_HTMLB_MANAGER=>GET_EVENT_EX( REQUEST ).
CASE EVENT_ID1->EVENT_SERVER_NAME.
IF NOT event_id1 IS INITIAL.
 if event_id1->server_event+0(9) = 'chkevent'.
SPLIT event_id1->server_event AT '-' INTO v_event v_dummy v_row v_col.
endif.
endif.
method IF_HTMLB_TABLEVIEW_ITERATOR~GET_COLUMN_DEFINITIONS.
 CLEAR p_column_definitions.
 CLEAR p_overwrites.
 DATA: tv_column TYPE TABLEVIEWCONTROL.
 tv_column-COLUMNNAME = 'FLDATE'.
 tv_column-edit = 'X'.
 tv_column-sort = 'X'.
 tv_column-TITLE = 'Flight Date'.
 tv_column-WIDTH = '100'.
 APPEND tv_column TO p_column_definitions.
 CLEAR tv_column.
 tv_column-edit = 'X'.
 tv_column-COLUMNNAME = 'CONNID'.
 tv_column-TITLE = 'Conn.ID'.
 tv_column-WIDTH = '70'.
 tv_column-HORIZONTALALIGNMENT = 'center'.
 APPEND tv_column TO p_column_definitions.
 CLEAR tv_column.
 tv_column-edit = 'X'.
 tv_column-COLUMNNAME = 'CHECKBOX1'.
 tv_column-TITLE = 'Check Box'.
 tv_column-WIDTH = '30'.
 tv_column-HORIZONTALALIGNMENT = 'center'.
 APPEND tv_column TO p_column_definitions.
endmethod.
METHOD IF_HTMLB_TABLEVIEW_ITERATOR~RENDER_CELL_START.
 DATA: L_EVENT TYPE STRING.
CASE P_TABLEVIEW_ID.
 WHEN 'fligts'.
 CASE P_COLUMN_KEY.
 WHEN 'CHECKBOX1'.
* CONCATENATE 'chk_event' '123' '2323' INTO L_EVENT SEPARATED BY '-' .
CONCATENATE 'chkevent' p_cell_id INTO l_event SEPARATED BY '-'.
 P_REPLACEMENT_BEE = CL_HTMLB_CHECKBOX=>FACTORY( ID = P_CELL_ID
 ONCLICK = L_EVENT CHECKED = 'false' ).
 ENDCASE.
ENDCASE.
ENDMETHOD.
Hope this will solve your problem.
* Reward each helpful answer.
Raja T
Message was edited by:
 Raja T

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

HTMLB TableView Tab Stops

We have some HTMLB TableViews in our JSPDynPage developed portal application. After we upgraded to NetWeaver 7.0(2004S) the table views now require the users to tab across each cell within the tableview. The accessibility flag is turned off within the users profiles so that is not what is causing it. Is there a way to disable this functionality. I would hope so otherwise I would have to say that SAP did a bit of a dis-service to some of it's customers.
Thanks.
Curtis

Hi Curtis,
We are also facing the same problem. Customer is complaining for this. Could you please tell us what needs to be done to go to the next editable cell.
Thanks in Advance....
Satya

Htmlb:tableView Recover the selected row

Hi.
How can I recover the selected row in a internal table, with the htmlb:tableView, in the onInputProcessing?
Thanks very much!
I'm using this sentence in the "layout":

 <htmlb:tableView id = "myTableView"
 visibleRowCount = "<%= c_ver_registros %>"
 width = "<%= c_ancho_tabla %>"
 selectionMode = "SINGLESELECT"
 table = "<%= T_TABLA %>" >
 </htmlb:tableView>
null

hi Marcos,
 While calling the Tableview in the layout get the selected row index in the attribute selectedRowIndex = "<%= var_selectedindex %>" { where var_selectedindex should be defined as a pageattribute} the tableview definition should be like this..
<htmlb:tableView id = "myTableView"
visibleRowCount = "<%= c_ver_registros %>"
width = "<%= c_ancho_tabla %>"
selectionMode = "SINGLESELECT"
selectedRowIndex = "<%= var_selectedindex %>"
table = "<%= T_TABLA %>" >
</htmlb:tableView>
And in the inputprocessing ,
Try this code..
IF htmlb_event IS NOT INITIAL AND htmlb_event->if_htmlb_data~event_name = 'tableView' AND
 ( htmlb_event->if_htmlb_data~event_type = 'cellClick' OR
 htmlb_event->if_htmlb_data~event_type = 'rowSelection' OR
 htmlb_event->if_htmlb_data~event_type = 'navigate' ) .
 DATA tableview_event TYPE REF TO cl_htmlb_event_tableview.
 tableview_event ?= htmlb_event.
 IF lr_tableview_event->selectedrowindex IS NOT INITIAL .
 var_selectedindex = tableview_event->selectedrowindex.
 ENDIF.
ENDIF.
regards,
Bhanu.

Customized R12 Standard Purchase Order report with custom data and layout

Hi all,
We need to customize the seeded Purchase Order report in R12 to add an additional section to include cost data coming from our custom table. The key is that our customized report should be launched instead of the seeded report via various PO forms (e.g. View Document menu option, PO Communications form to email, fax and print PO, etc).
I manually set up a custom Document Type Layout for the Document "Standard Purchase Order" to use my customized template so my custom layout is shown instead of the R12 layout, but according to Oracle support the report can only draw data from a set of seeded Oracle views like po_headers_xml,po_lines_xml etc.
Any suggestions how we can add our custom data to PO report in R12?
Thanks! Mike.

Hi Mike
thats a tough one, the PO generation is a bit restrictive to say the least when it comes to customizing. It sounds like you have worked out how to get your own template in there to render the PO.
On the data front, all I can think of is to customize and replace the seeded PO view with one that incorporates your extra data.
Or, get into the page customization world and write your own extract and format concurrent program/procedure and then hook it onto the buttons where you want to launch it.
You might have more luch, response wise from the EBS PO forum.
Procurement : Procurement
OAF: OA Framework
Regards
Tim

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

Get GUID in custom WPC page layout

I'm developing a custom WPC page layout with an embedded Visual Composer flash file. Since KMC web pages are stored in KM I can use the KM Java API to access properties on the document in KM. I want to use this technique to let users store a value at design-time and use this value to generate the code to view the VC flash file at run-time. I've managed to get everything to work except for one small detail: The only way I've been able to get a reference to the document in KM (as an IResource object) is by reading the GUID from the URL, and this is only available at design-time and when previewing the WPC web page, not at run-time when the web page is opened through portal navigation.
Does anybody know of a way to get the GUID (or any other reference) to the current KM document from a page (JSP file)? I have the page and WPC taglibs available, and of course the request object.
Thanks,
Terje Bjørgum

It's all in the DOCTYPE declaration that you see in a typical HTML page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
SAP/WPC usually don't have this properly placed or is missing from any of the pages you create. Once you publish the page you created, view its source by right-click -> view source on the browser. You may be surprised that the DOCTYPE declaration is not there at all and the DOCTYPE declaration tells the browser how to render the page along with the CSS that you may have.

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

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.

How open URL in an htmlb TableView ?

Hi guys,
Here is my problem:
- I have in my BSP an HTMLB:TableView which display a table of Document Info Record.
- In this table of DIRs, there is a column which contains an URL in order to open an original.
ex of url :
https://daplmdv.sylvania.com:10443/sap/bc/bsp/sap/CVAW_VIEW_DOCFILE/ViewDocFile.htm?pa_document_key=ZPI000000000000000000185255000FR&pa_file_id=4B5DB6C66C9B0094E1008000C61CAA2D&filename=C:\Copie de SSO on PLP.pdf
- At the moment in htmlb:tableViewColumn, I use the property onCellClick which call a javascript function :
window.open( "<%= application->url%>", target='_blank' , 'toolbar=no, menubar=no, resizable=yes, scrollbars=yes');
- It works in IE6 but I tested it in IE7 and it doesn't work.
My question :
Is it possible to open directly the link through the tableView and without using javascript ?
I tried the property linkClickTarget but it doesn't work
Thanks for your help

Hi Regis,
If you need a new window to load the document contents, then you should use the Javascripts. Because only a javascript could openup a new window in a BSP applicaiton.
But if you do not want to open up the document in a new window and want to load it by replacing the current page, then you could do it by navigating to another page which could render the document contents in this page.
Hope it helps!
Regards,
Maheswaran

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.

Add new field in customizing of define layout keys

hi
i want to add new table & field in customizing of define layout keys of capacity leveling.
pls guide
If you are asking a question, please mark your thread as a question. Otherwise you cannot award points for appropriate answers.
-Paul
(Moderator)
Edited by: Paul Meehan on Mar 9, 2012 10:49 AM

Hi,
In spro -->produciton -->Capacity requirements planning -->Capacity levling and evaluation -->Strategy -->Define sequence and layout keys .. here u can add a field ..this layout key is later used in Planning profile and this planning profile is used in Overall profile .. thus while executing capapcity leveling selecting that particular Overall profile ..

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 in customer CI/CD layout

Similar Messages

Maybe you are looking for