Jul
11
Written by:
Michael Washington
7/11/2015 4:12 AM
You can create a static header for your LightSwitch HTML Client application.
This tip is provided by Dave Baker of Xpert360.
First, create a LightSwitch HTML application.
Next, grab an image.
Copy and paste the image into the HTMLClient/Images folder.
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>
Open the user-customization.css file and add the following code:
.ui-page-active, .msls-background-page {
padding-top: 90px;
}
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...
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
|
@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
|
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
|
@Sharath Konda - Sorry I'm not a CSS expert :(
By Michael Washington on
6/10/2016 4:23 AM
|
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
|
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
|
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
|
@Sharath Konda - All I have is what I offer here.
By Michael Washington on
6/15/2016 4:10 AM
|
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
|