Skip to Content

SAP.M.Table: Input Column Width Optimization

Hi Guys,

We got a custom app with sap.m.table which is holding the 13 columns. Out of 13 Columns, Three columns are Amount inputs. User can change them and save it. Currently we were facing the width problem with Amount columns. As per current requirement, If the user try to change the column, then it automatically extend the width. I thought of I can make with example code. Ex : $("#inputID1").animate({width: "200px"}, "slow"); with "liveChange" event. but its not working. While page loading time, swa.jQuery is not a function error popping .Please advice me.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Jan 08 at 05:51 PM

    You should explore at the increasing the width of the column using the "td" property. Extending just a single cell may not be feasible.

    Maybe try increasing the height of the cell but not sure if its practical to increase width dynamically.

    Once user enters and moves to next column/action, increase the width of the column.

    Regards,

    Sharath

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 08 at 05:42 PM

    Hi Balaji,

    Which layout are you using? Have you seen this sample for auto x fixed layout?

    TIP: why not use a different approach, perhaps display each row data on more html lines instead of a whole bunch of columns? This way you may have people concentrate/focus they attention on the data that needs to be changed/edited and at the same time let them "review" the data that you don't want to be changed without polluting the whole screen with an "Excel" like application. Remember that SAPUI5 is a responsive framework, so your design will work on both desktops and mobile devices - where displaying 13 columns can be an awful approach.

    I don't really like having users edit a table directly - but that's a personal opinion. I think its better to present your app on a Master/View Split screen and based on a selection you could present a editor form allowing users to enter data based on the selected line. Once done, move to the next selection and continue editing - without ever navigating out of the data scope and at the same time maintaining the user-centered design.

    Think UX. Cheers!

    Regards,
    Ivan

    Add comment
    10|10000 characters needed characters exceeded