$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: false, vro: false, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content

Retrieve Value from Table Row with Cell in a VerticalLayout Element

In VIEW.JS:
-----------------------------------------------------------------------
        var i_pooli = new sap.ui.table.Table("i_pooli", {
            visibleRowCount:     10,
            editable:             true
        } } );

        //Add Column - Editable - Line Item Quantity (Only one will show)
        l_table_field = new sap.ui.layout.VerticalLayout({
            content: [        
                new sap.ui.commons.TextField().bindProperty( "value", "MENGE_NEW",
                    function(cellValue) {
                        //Hide if Fully Invoiced
                        if ( cellValue == "Fully Invoiced" ) {
                            l_cell_id = this.getId();
                            $( "#" + l_cell_id ).hide();
                        }
                        return cellValue;
                    } ),
                new sap.ui.commons.TextView().bindProperty( "text", "MENGE_NEW",
                       function(cellValue) {
                        //Hide if not Fully Invoiced
                        if ( cellValue != "Fully Invoiced" ) {
                            l_cell_id = this.getId();
                            $( "#" + l_cell_id ).hide();
                        }
                        return cellValue;
                } ), 
            ] } ); 
        i_pooli.addColumn(new sap.ui.table.Column(  
            {label:          new sap.ui.commons.Label( { text: "Actual Quantity" } ), 
            template:          l_table_field,
            sortProperty:     "MENGE_NEW", 
            filterProperty: "MENGE_NEW", 
            filterOperator:  sap.ui.model.FilterOperator.EQ,
            flexible:        true }));

        var l_odata_model = sap.ui.getCore().getModel();
        i_pooli.setModel( l_odata_model );
        i_pooli.setTitle("Open Purchase Order Items (Green items are fully invoiced)");
        i_pooli.bindRows({
                path:      "/Open_Line_Items_ES",
                filters:  i_selections
        });        
        o_table_layout.createRow( i_pooli );


In CONTROLLER.JS:
-----------------------------------------------------------------------

    on_submit: function() {
        var i_pooli      = sap.ui.getCore().byId("i_pooli");
        var i_pooli_size = i_pooli.getVisibleRowCount(); 

        for (var i = 0; i < i_pooli_size; i++) {
                l_menge_new = i_pooli.getRows()[i].getCells()[0].getValue();      //TextField - retrieve value
        }
    }

What I already know:

To get a value from a TextView Table Column: i_pooli.getRows()[i].getCells()[0].getText(); //It Works

To get a value from a TextField Table Column: i_pooli.getRows()[i].getCells()[0].getValue(); //It Works

What I can't figure out?

To get a value from a TextField when it is wrapped within a sap.ui.layout.VerticalLayout element.

I am using as my library: sap.ui.commons (not sap.ui.m). The table is bound initially to an oData source from SAP and everything is working great, as figured out with much help from this forum and others, but I cannot find nor figure out the solution to this problem, though I have searched profusely and debugged it to death.

Does anyone have any experience with this and can help out?

Thanks in Advance

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

10 Answers

  • Best Answer
    avatar image
    Former Member
    Dec 22, 2016 at 05:28 PM

    Hi Sean,

    You have given a vertical layout as a cell of a table row

     l_table_field =newsap.ui.layout.VerticalLayout({
                content:[newsap.ui.commons.TextField().bindProperty("value", "MENGE_NEW",function(cellValue){//Hideif Fully Invoiced
                            if( cellValue =="Fully Invoiced" ) {
                                l_cell_id = this.getId();$("#" + l_cell_id ).hide();}return cellValue;}),newsap.ui.commons.TextView().bindProperty("text", "MENGE_NEW",function(cellValue){//Hideifnot Fully Invoiced
                            if( cellValue !="Fully Invoiced" ) {
                                l_cell_id = this.getId();$("#" + l_cell_id ).hide();}return cellValue;}),]});

    lets follow the approach for all the elements.

    First retrieve the verticallayout

    as you have given the aggregation as "content" , retrieve the content

    the content will be returned as an array of elements

    retrieve the first element as you need for the TextField

    var vlayout = i_pooli.getRows()[i].getCells()[0];
    var mytxt = vlayout.getContent()[0];
    var value = mytxt.getValue();
    Add comment
    10|10000 characters needed characters exceeded

    • Bingo! Exactly what I was looking for. Awesome!

      It was the getContent() that was missing.

      Thank you Sudheer for reading the post and giving the exact answer needed!

      Cheers!

  • Dec 20, 2016 at 01:49 AM

    we usually get user input from model, never from UI control

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 20, 2016 at 12:37 PM

    bind all the attributes to model, you can get/set the model attribute to achieve what u want. don't access the ui directly usually

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 21, 2016 at 04:29 AM

    i really speechless...............

    if you know binding, why you go to the ui control to get the value??

    you have a table which bind to an array data.

    normally, the first row in the table is the first element in the array. you can get the data from the array.

    UNDERSTAND NOW? DO U NEED MORE HELP?

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 20, 2016 at 07:08 PM
    -1
    Add comment
    10|10000 characters needed characters exceeded

  • Dec 21, 2016 at 07:17 PM
    -1

    I don't know which genius keep down voting my answer, maybe he has better idea. I will leave to him.

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 20, 2016 at 02:46 AM

    Thanks Jun.

    If you could elaborate I may know what you mean.

    There is a tonne of information that says to do it the way I have successfully done it, but becomes surprisingly nil when the TextField element is wrapped first in a sap.ui.layout.VerticalLayout. I'm using this VerticalLayout element, because I have found that to be the only way to dynamically decide if the Cell in that column will be editable or not.

    If there is a better way to decide that and be able to read the editable values afterwards, I am all for it!!

    Thanks.

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 20, 2016 at 04:40 PM

    Thanks again Jun:

    Can you either provide a link or a small example in code of how to do the binding you mention and then how to read it, otherwise, I am afraid I won't understand what you mean. As you can see above, I have followed the crowd to accomplish my initial goals, but have now been left in the lurch.

    Why is there so much literature that says to do it the way I have done it? Here is a small sample of many:

    https://archive.sap.com/discussions/thread/3508617

    https://archive.sap.com/discussions/thread/3871944

    https://archive.sap.com/discussions/thread/3555396

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 20, 2016 at 08:09 PM

    Hi Jun:

    I'm sorry but this is not helpful.

    I mentioned in my original post that "I am using as my library: sap.ui.commons (not sap.ui.m)". I'm also using HTML, not XML and though you have sent me the generic Developer Guide which I have seen many times over, it does not provide an answer for my question.

    I have a table as described above in my VIEW.JS and though I can perfectly retrieve the values of the cell when they are simply made up of a TextView or a TextField, I am having trouble retrieving the value when the TextField is embedded in a sap.ui.layout.VerticalLayout element.

    When I do alert( i_pooli.getRows()[i].getCells()[9] ), I get the following:

    The following code does not work.

    i_pooli.getRows()[i].getCells()[9].getValue(); 

    When I remove the Element and make the TextField the only element in the cell and do alert( i_pooli.getRows()[i].getCells()[10] ), I get the following:

    And the following code works like a charm!!

    i_pooli.getRows()[i].getCells()[10].getValue();

    What am I missing??

    i_pooli.getRows()[i].getCells()[9].DO_I_NEED_A_LAYOUT_FIELD_IN_HERE??.getValue(); 

    Still seeking an answer, so if you have any advice, please send a small code sample, to best get the point across.


    Add comment
    10|10000 characters needed characters exceeded

  • Dec 21, 2016 at 06:16 PM

    HI Jun.

    Obviously I do not understand, otherwise I would not have posted this question and you are not making it any clearer, since you don't provide a sample line of code as I have repeatedly asked.

    You said: "normally, the first row in the table is the first element in the array. you can get the data from the array." HOW TO DO THIS THEN?

    I appreciate your time in this, but if you are not taking the time to look at my question and seeing where I'm going right and where I'm going wrong, then we are at an impasse.

    If you want to get your message across, and since this is a technical forum, please provide a SAMPLE LINE OF CODE to help me UNDERSTAND! Otherwise, perhaps there is someone else out there that might know what to do in my situation?

    Thanks.

    Add comment
    10|10000 characters needed characters exceeded