Jul 11

Written by: Michael Washington
7/11/2015 4:12 AM  RssIcon

image

You can create a static header for your LightSwitch HTML Client application.

This tip is provided by Dave Baker of Xpert360.

image

First, create a LightSwitch HTML application.

image

Next, grab an image.

image

Copy and paste the image into the HTMLClient/Images folder.

image

Open the default.htm page and delete the code indicated above.

In the default.htm page, add the following code in the same place:

    <script type="text/javascript">
        $(document).ready(function () {
            var strImage = "<div style='width:100%;position:absolute;left:0px;top:0px;";
            strImage = strImage + "z-index:1009 !important;color:#ffffff;background-color:#ffffff;'>.";
            strImage = strImage + "<div id='static-header' style='width:100%;margin-left:25px;";
            strImage = strImage + "background-image: url(Content/Images/myLogo.png); background-repeat: no-repeat;";
            strImage = strImage + "font-size: 58pt; text-align: center; color: #ffffff;'>.</div></div>";
            // Add a static header after SPA scaffolding
            document.body.insertAdjacentHTML("afterBegin",
                strImage);
            msls._run()
            .then(null, function failure(error) {
                alert(error);
            });
        });
    </script>

 

image

Open the user-customization.css file and add the following code:

.ui-page-active, .msls-background-page {
    padding-top: 90px;
}

image

Your static header will now appear.

 

Special Thanks

This tip is provided by Dave Baker of Xpert360.

His site is at http://www.xpert360.com and his blog is at https://xpert360.wordpress.com

 

Links

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

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2013 (or higher) installed to run the code)

9 comment(s) so far...


Gravatar

Re: Creating a Header For LightSwitch HTML Client

Great stuff. I would like to know why does microsoft planning to turn off lightswitch support?

By smota on   7/14/2015 2:15 PM
Gravatar

Re: Creating a Header For LightSwitch HTML Client

@smota - They are not turning off support. They just don't plan any major enhancements.

By Michael Washington on   7/14/2015 2:15 PM
Gravatar

Re: Creating a Header For LightSwitch HTML Client

Mic,

Thanks for the nice article. You made my life so easy. One quick question... If I use the approach, I am facing a small CSS issue. I.e., when there is an Edit popup, the background home screen is becoming shaded/blurred but not the image area which we just place. Pl. help me here.

By Sharath Konda on   6/10/2016 4:23 AM
Gravatar

Re: Creating a Header For LightSwitch HTML Client

@Sharath Konda - Sorry I'm not a CSS expert :(

By Michael Washington on   6/10/2016 4:23 AM
Gravatar

Re: Creating a Header For LightSwitch HTML Client

Appreciate your prompt response and honest answer. I will explore and share the answer if I find it. Thanks again.

By Sharath Konda on   6/10/2016 5:36 AM
Gravatar

Re: Creating a Header For LightSwitch HTML Client

Mic,

I have taken the below approach to display the customized header,

http://www.mhinteractive.co.nz/blog/a-lightswitch-html-client-header-for-a-desktop-browser-lob-application-look-and-feel/

Thanks for being proactive again,
Sharath Konda

By Sharath Konda on   6/13/2016 7:05 AM
Gravatar

Re: Creating a Header For LightSwitch HTML Client

Mic,

Using the above approach, I am able to show the custom header only on landing page. When there is a details page opened using, 'viewSelected' view, the custom header is disappearing. Pl. help me here.

By Sharath Konda on   6/15/2016 4:09 AM
Gravatar

Re: Creating a Header For LightSwitch HTML Client

@Sharath Konda - All I have is what I offer here.

By Michael Washington on   6/15/2016 4:10 AM
Gravatar

Re: Creating a Header For LightSwitch HTML Client

This article is very much helpful and i hope this will be an useful information for the needed one. Keep on updating these kinds of informative things.

By johnstany on   5/23/2017 4:13 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation