locked
User Logo not shown RRS feed

  • Question

  • Whatever html Lightswitch screen I set as my home page displays the user logo; however none of my other screens display it. If I reset the home screen, the new home screen displays the user logo, and the none of the other screens display it, not even the previous home screen that had been displaying it.

    Does anyone have an idea of how I can get all my html screens to display the user logo?

    I am using Lightswitch Visual Sutdio 2013 with the following versions: JQuery Mobile 1.3.0, JQuery 1.9.1, Msls 2.0.0.0.

    Thanks,

    Mike

    Tuesday, January 28, 2014 12:06 AM

Answers

  • Ok, it works in VS2013 but there is some other javascript code in there that delays the execution.

    Try this instead:

    window.setTimeout(function () {
            //<div class="msls-header-area"></div>
            var headerAreas = document.getElementsByClassName("msls-header-area");
            headerArea = headerAreas.item(0);
            headerArea.parentNode.insertAdjacentHTML(
                "afterBegin", "<div style='background: #ffffff; font-family: Webdings; font-size: 48pt; text-align: center;'>L I G H T S W I T C H</div>");
        }, 100);

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    • Proposed as answer by Xpert360 Thursday, January 30, 2014 2:39 PM
    • Marked as answer by MikeLightDev Thursday, January 30, 2014 5:07 PM
    Thursday, January 30, 2014 2:19 PM

All replies

  • Hi Mike

    You could enable diagnostics on your side, it can give some hints to troubleshoot.

    To enable client tracing at design time

    1.In Solution Explorer, open the shortcut menu for the My Project node and choose Open.

    2.In the Application Designer, choose the Client Type tab, and then choose the Web option..

    3.On the menu bar, choose View, Other Windows, Output to display the Output window.

    4.On the menu bar, choose Debug,Start Debugging.

    5.In the address bar of the browser, add client tracing arguments to the end of the URL as follows:

    • To display an error-level trace, enter LC=Microsoft.LightSwitch,E.
    • To display a warning-level trace, enter LC=Microsoft.LightSwitch,W.
    • To display an information-level trace, enter LC=Microsoft.LightSwitch,I.
    • To display a verbose trace, enter LC=Microsoft.LightSwitch,V.

    The application restarts and trace messages appear in the Output window.

    Best regards

    Angie


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, January 29, 2014 8:41 AM
  • Hi Mike,

    It is by design. You will need to do something like this:

    How to add a static banner to the Lightswitch HTML Homescreen?

    If you have any trouble then get back and we can work through it.

    Cheers

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    • Proposed as answer by Xpert360 Wednesday, January 29, 2014 9:14 AM
    • Unproposed as answer by Xpert360 Thursday, January 30, 2014 2:39 PM
    Wednesday, January 29, 2014 9:14 AM
  • Thanks to everyone who responded.

    Dave,

    I inserted (reviewed, and re-reviewed) the code from this link in my home screen and no banner appeared. I set a break point and confirmed that the code executed (and did not see any error generated). I would appreciate any additional help you'd be willing to give me on this. Here is the code I inserted:

    myapp.PersonList.created = function (screen) {
           
    var headerAreas = document.getElementsByClassName("msls-header-area");
            headerArea
    = headerAreas.item(0);
            headerArea
    .parentNode.insertAdjacentHTML(
               
    "afterBegin", "<div style='background: #ffffff; font-family: Webdings; font-size: 48pt; text-align: center;'>L I G H T S W I T C H</div>")
       
    });
    };

    - Mike

    Wednesday, January 29, 2014 7:42 PM
  • Dave,

    I get the following error:

    0x800a138f - JavaScript runtime error: Unable to get property 'parentNode' of undefined or null reference

    When I run this code:

    myapp.PersonList.created = function (screen) {

        // Write code here.

            var headerAreas = document.getElementsByClassName("msls-header-area");

            headerArea = headerAreas.item(0);

            headerArea.parentNode.insertAdjacentHTML(

                "afterBegin", "<div style='background: #ffffff; font-family: Webdings; font-size: 48pt; text-align: center;'>L I G H T S W I T C H</div>"

            );

    };

    Any thoughts?

    Wednesday, January 29, 2014 8:05 PM
  • That was working back in VS2012 HML client so I will take a look at VS2013 (?).

    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Thursday, January 30, 2014 1:38 PM
  • Ok, it works in VS2013 but there is some other javascript code in there that delays the execution.

    Try this instead:

    window.setTimeout(function () {
            //<div class="msls-header-area"></div>
            var headerAreas = document.getElementsByClassName("msls-header-area");
            headerArea = headerAreas.item(0);
            headerArea.parentNode.insertAdjacentHTML(
                "afterBegin", "<div style='background: #ffffff; font-family: Webdings; font-size: 48pt; text-align: center;'>L I G H T S W I T C H</div>");
        }, 100);

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    • Proposed as answer by Xpert360 Thursday, January 30, 2014 2:39 PM
    • Marked as answer by MikeLightDev Thursday, January 30, 2014 5:07 PM
    Thursday, January 30, 2014 2:19 PM
  • This worked like a charm. I modified it slightly to display my user logo and minimize the timeout:

    window.setTimeout(function () {

            var headerAreas = document.getElementsByClassName("msls-header-area");

            headerArea = headerAreas.item(0);

            headerArea.parentNode.insertAdjacentHTML("afterBegin", "<IMG SRC='Content/Images/user-logo.png'>");

        }, 1);

    Is there a way to display this logo to the left (or right) of the screen title (like it appears on the home screen) instead of above it? I'd prefer to conserve on screen real estate, if possible.

    Thank you for your help.

    - Mike

    Thursday, January 30, 2014 5:17 PM
  • After further testing, it appears that this code only displays on the home screen, any ideas on how to display on the other screens as well? (I already tested substituting the "msls-header-area" text for all the labels I could find in the msls-2.0.0.css file and they also only display on the home screen.)

    Thank you for your help.

    Thursday, January 30, 2014 6:43 PM
  • You will need to wrap it into a function and call it from the _created event of the screens that need the custom header.

    Probably could hack the template(s) in the msls script here but I couldn't possibly recommend that ;)

    var msls_templateStrings = {
    "taskHeaderTemplate":
        '<div class="msls-header-area">' +
            '<div class="titles-bar">' +
                '<div class="msls-logo-back-area">' +
                   ' LOGO-BACK-PLACEHOLDER' +
                '</div>' +
                '<div class="msls-buttons-row msls-screen-buttons">' +
                   ' BUTTONS-PLACEHOLDER' +
               ' LOGOUT-PLACEHOLDER' +
                '</div>' +
                '<div class="msls-title-area">' +
                    '<div class="msls-title-container">' +
                        '<h1 class="subControl ui-title msls-title" control="Text" data-ls-text="text:{data.task.screenTitle}"></h1>' +
                    '</div>' +
                '</div>' +
            '</div>' +
           ' TAB-BUTTONS-PLACEHOLDER' +
        '</div>',
    
    "screenLogoTemplate":
        '<div class="msls-logo">' +
            '<a href="HOMESCREEN-PLACEHOLDER" target="_top">' +
                '<img src="Content/Images/user-logo.png" />' +
            '</a>' +
        '</div>',
    
    "screenBackTemplate":
        '<div class="msls-back-button-contain">' +
            '<div class="subControl msls-back-button msls-large-icon" control="ShellButton" tabindex="0" data-icon="msls-back"' +
               ' data-iconpos="notext" data-role="button" data-ls-content="content:{data.shell.backCommand.displayName}"' +
               ' data-ls-isenabled="isEnabled:{tap.canExecute}"' +
               ' data-ls-tap="tap:{data.shell.backCommand.command}">' +
            '</div>' +
        '</div>',
    
    as that would make it real easy.


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Tuesday, February 4, 2014 6:14 PM
  • BTW, using SPAN's makes it even easier...


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.


    • Edited by Xpert360 Tuesday, February 4, 2014 7:02 PM
    Tuesday, February 4, 2014 6:25 PM
  • Hi Dave,

    I appreciate you walking me through this, as I am a newbie to web development in general, so I am still learning JavaScript as well as lightswitch.

    I did put my initial code into created event of different screens but each time it was run, (regardless of what screen it was run from), it just added another instance of the logo to the home screen.

    I like how you got it working above but am not sure how to implement this code. Would you be willing to instruct me as to how/where this gets inserted (it blows up when I just put it as is in the screen's created event (inside or outside a function).

    Thanks.

    - Mike

    Tuesday, February 4, 2014 7:10 PM
  • Edit or create your own version of msls-2.0.0.js in the Scripts folder of the client. Edit default.htm to use the edited script (ie. not the minified one).

    Copy, paste edit to get this result for the back template:

    "screenBackTemplate":
        '<div class="msls-back-button-contain">' +
        '<span class="msls-logo">' +
            '<a href="HOMESCREEN-PLACEHOLDER" target="_top">' +
                '<img src="Content/Images/user-logo.png" />' +
            '</a>' +
        '</span>' +
        '<span class="subControl msls-back-button msls-large-icon" control="ShellButton" tabindex="0" data-icon="msls-back"' +
               ' data-iconpos="notext" data-role="button" data-ls-content="content:{data.shell.backCommand.displayName}"' +
               ' data-ls-isenabled="isEnabled:{tap.canExecute}"' +
               ' data-ls-tap="tap:{data.shell.backCommand.command}">' +
            '<a href="HOMESCREEN-PLACEHOLDER" target="_top">' +
                '<img src="Content/Images/user-logo.png" />' +
            '</a>' +
            '</span>' +
        '</div>',
    

    As in copy paste the logo bit in and change the two child DIV's to SPAN's.

    Having tweaked that there is no going back and any future msls script upgrade will need a little manual attention.

    :)


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Tuesday, February 4, 2014 7:21 PM