Introduction

LightSwitch is very powerful to build apps, but often, the standard LightSwitch controls, buttons and their appearances do not reflect your needs.
In this article, I will show you an easy way to build buttons with a custom icon.

Prerequisites

For this article I used Visual Studio Update 3 and created a new LightSwitch HTML project.
Building icons from scratch is not my best. :-( So I did a bit research and found this:
Syncfusion Metro Studio. This is a free and powerful tool to create icons from existing templates. If you want to you can buy additional icons from their website.

Let’s start…

First, let’s build a simple “Home” button icon.
Open Metro Studio, you will see this:
metro_1

Now, we are looking for a fancy icon. Type a keyword in the search box. In our case, we will try “home” ;-):
metro_2

Let’s take an icon and edit this for our needs (the settings here are ok for our new button):
metro_3

Then, click “export” and save the image to your LightSwitch project. (I created a folder “Icons” under the “Content” folder.)

Customizing CSS

Open the “user-customization.css” (or any other css file) from your project and add following lines (customize the background image URL to your needs!):


.msls-footer .myHomeIcon .msls-large-icon .ui-icon {
background-image: url("Icons/icon-home.png") !important;
background-position-x: 0px;
background-position-y: 0px;
}

Things to do in a screen

Next, open a screen from your LighSwitch project and add a button to the command bar node:
metro_4
In the properties window, set “Custom” to icon property.
Last, in the post render method of your new button, add following line of javascript code:

$(element).addClass("myHomeIcon");

Done.

Open your screen and you will find a button with your new icon:
metro_5

That’s all for now, folks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.