locked
LightSwitch HTML "Banner" & Cosmetics RRS feed

  • Question

  • Hi there

    I'm busy with a small project that will be used by mostly mobile users and I have two questions re: HTML cosmetics:

    1) Banner

    Due to the small screen size I would like to drop off the top section of a standard HTML screen and replace it with an image

    2) xxxxx.HTMLCLIENT loading message

    This is one of those odd things about the HTML Client. I don't understand why it's there at all, who would want the public/user to see it ? How do I remove it ?

    Tuesday, October 29, 2013 12:43 PM

Answers

  • Try increasing the timeout like so:

    myapp.BrowseMembers.created = function (screen) {
        setTimeout(function () {
            $("div.msls-header-area").replaceWith($('<img src="Content/Images/user-logo.png"></img>'));
        },1000);
    };

    The value 1000 will wait one second for the header to be rendered then it will replace it.

    If this doesn't work then I'd suggest using css to set your icon image and hide the header.

    HTH,

    Josh

    • Proposed as answer by Angie Xu Wednesday, November 6, 2013 6:13 AM
    • Marked as answer by Angie Xu Friday, November 8, 2013 6:50 AM
    Wednesday, October 30, 2013 2:17 PM

All replies

  • 1) Try this:

    myapp.Main.created = function (screen) {
        setTimeout(function () {
            $("div.msls-header-area").replaceWith($('<img src="Content/Images/user-logo.png"></img>'));
        },20);
    };

    Of course you can use your own logo for src.

    2) In default.htm you will see your app name inside div.ui-bottom-load.  You can wipe out the inner div altogether or change it to something else like 'app loading please wait' like so: 

    <body>
        <div id="msls-id-app-loading" class="ui-body-a msls-layout-ignore">
            <div class="msls-app-loading-img"></div>
            <span class="ui-icon ui-icon-loading"></span>
            <div class="ui-bottom-load">
                <div>app loading please wait</div>
            </div>
        </div>

    HTH,

    Josh


    • Edited by joshbooker Tuesday, October 29, 2013 4:27 PM sp
    Tuesday, October 29, 2013 4:25 PM
  • Thanks Josh

    The image works fine on the landing screen (let's call it Browse), but links to any other screens drop the top banner again, I added the same code to the "created" section of "BrowseMembers" screen but it doesn't do anything. How do I make this image persistent on all screens ?

    Wednesday, October 30, 2013 10:39 AM
  • Try increasing the timeout like so:

    myapp.BrowseMembers.created = function (screen) {
        setTimeout(function () {
            $("div.msls-header-area").replaceWith($('<img src="Content/Images/user-logo.png"></img>'));
        },1000);
    };

    The value 1000 will wait one second for the header to be rendered then it will replace it.

    If this doesn't work then I'd suggest using css to set your icon image and hide the header.

    HTH,

    Josh

    • Proposed as answer by Angie Xu Wednesday, November 6, 2013 6:13 AM
    • Marked as answer by Angie Xu Friday, November 8, 2013 6:50 AM
    Wednesday, October 30, 2013 2:17 PM