cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Customizing standard ITS template

Go to solution
Former Member

on ‎12-01-2014 3:43 AM

0 Kudos

Hi All,

I am trying to display tabular data on the screen and then generating an ITS template for the same.Requirement is to configure function key support,table row collapse and expansion on click etc using custom template. I used ALV for the list and the template was generated fine but now the requirement is to customize the sap generated template with the use of Javascript, HTML,AJAX controls etc.I I am not able to integrate javascript code into the generated HTML as there is no table id in the standard HTML for ALV grid.Then i tried step loops option ,the html generated doesn't have tabular tags .Now I am trying table controls and getting the error "Unknown type TABLE for element...".But i searched on this and it appears table controls is supported with ITS applications.

Can anyone of you helpful guys point me towards the right direction ?


Thanks in advance !!!

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
‎12-03-2014 12:44 PM
0 Kudos

Hi Hema,

This document explains how you could integrate the HTML with your javascript and css files:

Is it necessary for you to use ALV? It is just that the HTML template version for an ALV becomes too complicated to understand. Instead, you can create a normal table, along with the sub-rows, and then display/hide the sub-rows depending on the user's selection within the HTMl template using javascript.

In order to display it in table form in HTML, you can surround your fields with the <table><tr><td></td></tr></table> tags. The hide/display of sub-rows can be done from the javascript files by changing the corresponding <tr> attributes.

To see a demo of Table Control, you can execute the sample page provided by SAP in this path: /default_host/sap/bc/gui/sap/its/sample/IAC_TABLE.

Please let me know if you have more questions.

Regards,

Utkarsha K

Show replies
Show replies

Answers (3)

Answers (3)

Former Member
‎12-12-2014 3:02 AM
0 Kudos

Hi Hema,

See also related WIKI:
-----------
How to obtain the function key values for ITSmobile applications - Code Gallery - SCN Wiki
-----------

Best regards,
Cheng

Show replies
Show replies
Former Member
‎12-11-2014 6:36 PM
0 Kudos

Thanks Utkarsha for your detailed reply.It helped me to get going.

Show replies
Show replies
Former Member
‎12-03-2014 6:38 PM
0 Kudos

Thanks for your reply Utkarsha .

But i tried  pretty much everything you mentioned.The link you mentioned helped me to understand how can i use colors and format the fields using CSS. But for table control, it seems it is not supported for mobile devices as it can only be created using WEBGUI template.

So the only option left is step loops. And when i tried that ,the template generated has input fields but no table tags or <tr><td> tags so my challenge is how to convert it to table format as i am new to html and javascript.

And do you have any idea how can we use visual editor to create screens,i read it makes it easier to create screens with visual editor but i couldn't find any relevant detailed document on how can we use it

Show replies
Show replies
Former Member
‎12-04-2014 4:24 PM
0 Kudos

Hi Hema,

In step loops, you will have to include table, <td>, <tr> tags manually as follows:

I am sure you must've defined the a class for the body in the body tag as:

<body scroll="auto" class="MobileBodyClass" id="MobileBodyID"

Then, after the font tag, there is a <!-- customers cua area --> if statement. You can start your table right before that statement as :

<table class="TableClass" border="1" .........>

     <tr>

           <td>

                    if ( ~itsmobileCuaInclude != "" ).............

                    end;

          </td>

     </tr>

     <tr>

          <td>

               <table class="UserArea" border="1" .....>      <!-- This table is for your entire page content                                                                                           leaving the top CUAAREA (title) -->

               <tr>

                     <td>

                              `if ('YOURFIELD'[1].exists == "x" ) ..........

                              end;`

                     </td>

                    <td>   

                              ` next field javascript + HTML code.......`

                     </td>

               </tr>

               <tr> <td> `second row first field javascript + HTML code`  

                       </td>

               </tr>

               'more rows ........'

          </td>

     </tr>

</table>

In this way, you will have to surround each of your fields and modify the display using class attribute of the tags. If you will notice in the auto-generated code for a field, in various places, the 'class' attribute is mentioned. So, you can modify the class for a particular field to alter its display as per your needs.

While making modifications to the auto-generated code, you have to be very careful while separating the HTML code from the javascript code using a ->  `  character.  Every snippet of javascript is enclosed between 2 of these characters -> ` . Even if there is 1 minute error in this, the entire page will not display and it will give a dump. Therefore, it is always good to take a backup of the auto-generated code and do the modifications very carefully.

Also, I have not used the Visual Editor as yet as my support package configurations were not optimal.

Please let me know if you need anything else.

Regards,

Utkarsha

Ask a Question