none
lightswitch html client tab name change RRS feed

  • Question

  • I am using signalR to push some data from the server to a tab on a screen in lightswitch. I am trying to update the title of the tab... but I can not find the way. For example if the tab name is: messages and I have 5 messages. I want the tab name to say messages(5).

    Thanks in advance.

    Saturday, May 25, 2013 1:00 AM

Answers

  • Hi Juan,

    The tab button is implemented as a jQuery Mobile button - an <A> element enhanced by jQuery, and there are issues with updating the button's text once it is enhanced. We are aware of this bugs.

    In the mean time, you can update the tab name by searching for the tab on the active jQuery Mobile page.

        $($.mobile.activePage
            .find(".msls-screen-tab")[1])
                .find(".ui-btn-text")
                .text("Messages (" + messagesCount + ")");

    Replace 1 with the index of your tab.

    You'd probably will use this code after the Messages have been loaded so the screen has been loaded into the DOM. Please be aware that in the screen created handler, $.mobile.activePage has not been changed to the screen being created yet. So to write any code that accesses $.mobile.activePage during screen initialization, I find it's safest to write my code on the postRender handler for the screen's first tab.

    Best regards,
    Huy

    • Proposed as answer by novascape Thursday, May 30, 2013 9:39 PM
    • Marked as answer by Yann DuranModerator Wednesday, December 11, 2013 1:01 PM
    Thursday, May 30, 2013 2:38 PM
  • Never mind Huy...

    I added delay of 200 miliseconds before setting the title of the tab and it is working now. I have these problems in my development machine all the time. Once deployed everything worked well.

    Thanks again.

    • Marked as answer by JCMonto Thursday, May 30, 2013 4:57 PM
    Thursday, May 30, 2013 4:57 PM

All replies

  • Hi, I have not found a nice way but this code finds all buttons including the tabs:

    var aReturn = window.document.body.getElementsByTagName("span");
    for (var n = 0; n < aReturn.length; n++) {
        if (aReturn[n].className == "ui-btn-text")
            aReturn[n].innerText = "TEST";
    That is not nice code so I hope someone suggests a cleaner way :)


    Dave Baker | Xpert360 blog | twitter : @xpert360 | Xpert360 website Opinions are my own. For better forums, please mark as helpful/answer, if it helps/solves your problem.

    Thursday, May 30, 2013 1:15 PM
  • Hi Juan,

    The tab button is implemented as a jQuery Mobile button - an <A> element enhanced by jQuery, and there are issues with updating the button's text once it is enhanced. We are aware of this bugs.

    In the mean time, you can update the tab name by searching for the tab on the active jQuery Mobile page.

        $($.mobile.activePage
            .find(".msls-screen-tab")[1])
                .find(".ui-btn-text")
                .text("Messages (" + messagesCount + ")");

    Replace 1 with the index of your tab.

    You'd probably will use this code after the Messages have been loaded so the screen has been loaded into the DOM. Please be aware that in the screen created handler, $.mobile.activePage has not been changed to the screen being created yet. So to write any code that accesses $.mobile.activePage during screen initialization, I find it's safest to write my code on the postRender handler for the screen's first tab.

    Best regards,
    Huy

    • Proposed as answer by novascape Thursday, May 30, 2013 9:39 PM
    • Marked as answer by Yann DuranModerator Wednesday, December 11, 2013 1:01 PM
    Thursday, May 30, 2013 2:38 PM
  • Many thanks Huy, you are turning into a regular superstar in the forum :)

    Dave Baker | Xpert360 blog | twitter : @xpert360 | Xpert360 website Opinions are my own. For better forums, please mark as helpful/answer, if it helps/solves your problem.

    • Marked as answer by JCMonto Thursday, May 30, 2013 4:24 PM
    • Unmarked as answer by Yann DuranModerator Wednesday, December 11, 2013 1:01 PM
    Thursday, May 30, 2013 3:15 PM
  • Thank you very much! Huy you saved me again :)

    I still have a problem... when I try the code I get an error because activePage is undefined.

    I put the code in Tab1_postRender

    In debug mode:

    $.mobile returns an object but $.mobile.activePage returns undefined.

    Please advise.

    • Marked as answer by JCMonto Thursday, May 30, 2013 4:26 PM
    • Unmarked as answer by JCMonto Thursday, May 30, 2013 4:40 PM
    • Edited by JCMonto Thursday, May 30, 2013 4:44 PM
    Thursday, May 30, 2013 4:26 PM
  • Never mind Huy...

    I added delay of 200 miliseconds before setting the title of the tab and it is working now. I have these problems in my development machine all the time. Once deployed everything worked well.

    Thanks again.

    • Marked as answer by JCMonto Thursday, May 30, 2013 4:57 PM
    Thursday, May 30, 2013 4:57 PM
  • The tab button is implemented as a jQuery Mobile button - an <A> element enhanced by jQuery, and there are issues with updating the button's text once it is enhanced. We are aware of this bugs.

    Has this already been fixed or is this still the recommended way of updating a tab's display name?

    IT Architect www.Goyaweb.nl The Hague, The Netherlands

    Sunday, January 19, 2014 1:54 PM