cancel
Showing results for 
Search instead for 
Did you mean: 
Subscribe

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 !!!

0 Likes
View Entire Topic
Former Member
0 Likes

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

Former Member
0 Likes

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