The easiest way to create modern business applications for the Cloud and Office 365
Welcome to the 4th installment of the Signed-In app walkthrough! Here are the previous posts:
We have implemented all the functionalities of our Signed-In app. But, after all, this is an app for the alumni association. We can’t call it complete until we brand it with some school colors, right?
First, let me show you how to enable authentication. We’d only like organizers to have access to the app.
Double click Properties node in Solution Explorer.
Select Access Control tab and pick Use Forms authentication. Check Granted for debug.
Press F5 to run the application. You will now see a Log out button on the home screen.
Since we’re in debug mode, you (as a developer) is always logged in. To see the login page. Type LogIn.aspx (under localhost) in the URL.
We will customize this page later in the walkthrough. Close the browser and return to Visual Studio.
Let’s talk a little bit about theme. By default, LightSwitch uses the Light Theme that you currently see. There is also a Dark Theme you can choose.
In Solution Explorer, select Signed-In node and open the Toggle View dropdown menu. You will see Logical View and File View.
Double click on default.htm. Find the line that says:
Replace light with dark:
Basically you are referencing a different set of CSS files that came with the LightSwitch project under the Content folder.
Press F5 and run the application. Your app now uses the Dark Theme!
This is quite nice. But let’s see how we can customize it with our school colors. Close the browser and return to Visual Studio.
LightSwitch leverages jQuery Mobile, which is a popular touch-optimized web framework. jQuery Mobile has a great theme tool called ThemeRoller. You can import an existing theme and customize it, or you can create a brand new theme from scratch. Let’s customize our Dark Theme with some colors.
Double click on dark-theme.css (under Content folder). Select all (CTRL + A) and copy (CTRL + C) the CSS content from the code editor.
From your web browser, go to http://jquerymobile.com/themeroller/.
Click Import button on top.
Paste (CTRL + V) the CSS content into the dialog and click Import.
LightSwitch’s Dark Theme now shows up in ThemeRoller.
You can drag and drop the colors to customize your theme. Mine looks like this.
When you’re done. Click Download button on top. Name it my-theme and click Download Zip.
Save the zip file to your computer and extract the files. In Solution Explorer, right click on Content folder. Select Add, then Existing Item.
Navigate to my-theme.css you extracted from the zip and click Add.
The new theme now appears in the Content folder.
All we need to do now is indicating which theme we’d like to use. Double click default.htm. Replace dark-theme with my-theme.
Press F5 and run the application. We have successfully customized our theme.
Now, we need a fancy logo. In Solution Explorer, you will find user-logo.png and user-splash-screen.png under Content/Images. These are basically the default logo and splash screen image you current see in the app.
Replace them with images of your own (make sure they have the same name). The new images will show up when you run the application.
Go to the login page again by typing in Login.aspx in the URL. You will find it is still using the Light Theme.
Why is that? Well, it is actually not using the jQuery Mobile theme at all. In fact, the LogIn.aspx is an independent artifact. It doesn not exist under HTMLClient, but under Server.
When authentication is enabled, everything under the HTMLClient is now protected by default, including theme files. So think of the login page as a separate thing, a redirect page if you will.
If you open LogIn.aspx in Visual Studio, you will find the CSS code relating to colors are all part of the file.
To customize it, we will manually update these color codes. You can copy and paste the color codes from ThemeRoller and paste them here. For example, I used #3e81af as background in ThemeRoller. I will update the background CSS in LogIn.aspx with that color code.
This is what I did for mine:
That’s it! We have successfully created a cross-platform mobile app from scratch with only a couple lines of code!
Next, in the final part of the series, I will show you some other tips and tricks to improve our Signed-In 2.0.
-andy (Program Manager, LightSwitch Team)
Go to next article --> Signed-In Part 5 – Search Screen and Dynamic UI
Thank you once again.
Its really cool.
Can we change the login page design in Silverlight client (Web)?
How can I bypass the Authentication in Light switch HTML. As I need authentication for Silver Light Client for Administration and No Authentication for HTML Client for public viewers? Is there any way we can pass these credentials by default and this way I can also protect my OData endpoints and data visibility.
Thanks for the educational posts.
When can we expect the final part?
@the.dav -- the final part is here: blogs.msdn.com/.../signed-in-part-5-search-screen-and-dynamic-ui-andy-kung.aspx
Is there a way to integrate lightswitch with the Simple Membership Provider?
"Remember me next time" does not work. Any ideas on this issue?
Is it possible to add footer to each screen?
I am trying theme Roller the same way you instructed here
the problem is when I rum my program drop down fields don't show the drop down icon.
also for save button i just have a circle, no disk icon inside.
any idea how i can fix this?