none
Custom footer icons RRS feed

  • Question

  • Hi, all.

    I would like to know if someone might be willing to provide some assistance, hopefully with some sample code, of how to wire up the '_postRender' code of a button in order to allow use a custom button icon in the footer of a HTMLClient screen. I've tried all of the logical things I can think of, but cannot seem to figure out how to achieve this. 

    I'm new to LS for VS2012 and I'm not a programmer by trade. But, I do create and maintain web-to-print portals as part of my daily job, so I'm very familiar with SQL web applications and am experienced in writing and editing HTML, CSS and jQuery. I've even done some basic development in C#. 

    After reading quite a few LS tutorial articles and watching many of the available videos over the past week, I was able to successfully create and deploy a fairly simple 3-tier project. The application is hosted on web server running Windows Server 2008, and is connected to a separate SQL database server, also running Windows Server 2008.

    I created an initial 'Browse Data' screen in tile format, a 'View Details' screen, and an 'Add/Edit Screen.' After confirming that the application was working as expected, I created a second 'Browse Data' screen that is connected to a different SQL query. This screen is also formatted in list format, rather than tile format. 

    I added a button to the Command Bar in each of the 'Browse Data' screens, which loads the opposite screen. I wanted to change the icon on one of these buttons to a custom icon, so I chose 'Custom' from the Icon dropdown, then played around with various jQuery statements in the '_postRender' event of the button. 

    I added a custom class definition to the 'user-customization.css' file and tried adding the class using the jQuery statement. But, I've not had any luck. From what I can tell, it seems that I may not necessarily have the image stored in the correct location, so I'd love to see a working example of this if someone might be willing to share. 

    Thanks in advance! 

    Calvin

    Thursday, May 2, 2013 4:38 AM

Answers

  • Hi,

    There may be some differences in the released HTML Client. Here's a working solution I found after chatting with our CSS expert team member :)

    Let's start with one single custom icon

    In the postRender method of your custom icon button, add a unique class to it.

    myapp.Browse.MyCustomIcon_postRender = function (element, contentItem) {
        $(element).addClass("myCustomIcon");
    };

    In the user-customization.css, add this CSS setting:

    .msls-footer .myCustomIcon .msls-large-icon .ui-icon {
        background-image: url("http://i.msdn.microsoft.com/ms348103.LOGO_VS2(en-us,MSDN.10).png") !important;
        background-position-x: 2px;
        background-position-y: 2px;
    }

    Note:

    - The order of myCustomIcon in the CSS query is important.
    - background-image needs an !important attribute specified.
    - background-position x and y is optional, depends on your image strip.

    Sharing one image strip for different custom icons

    We have an image strip with multiple custom icons and want to reduce duplication.

    In the postRender method, we can add two classes instead of one.

    myapp.Browse.MyCustom1Icon1_postRender = function (element, contentItem) {
        $(element).addClass("myCustomIcon1 myIcon1");
    };
    myapp.Browse.MyCustom1Icon2_postRender = function (element, contentItem) {
        $(element).addClass("myCustomIcon1 myIcon2");
    };

    In the user-customization.css, we share the settings:

    .msls-footer .myCustomIcon1 .msls-large-icon .ui-icon {
        background-image: url("http://i.s-microsoft.com/global/ImageStore/PublishingImages/logos/hp/logo-lg-1x.png") !important;
        background-position-y: 0px;
    }
    .msls-footer .myCustomIcon1.myIcon1 .msls-large-icon .ui-icon {
        background-position-x: -20px;
    }
    .msls-footer .myCustomIcon1.myIcon2 .msls-large-icon .ui-icon {
        background-position-x: -50px;
    }

    Note: There should be no spaces between .myCustomIcon1 and .myIcon1

    Here's a sample project if you're interested: http://sdrv.ms/ZsS8ED
    (I'm linking to existing images, so if they do not show up, replace the link with some existing images)

    Best regards,
    Huy


    Friday, May 3, 2013 6:21 PM

All replies

  • Calvin,

    Add this code to the postRender method of the button with the custom icon:

    $(element).attr('data-icon', "myapp-email");
    Then in your user-customization.css file (from the File view in the Solution Explorer in the Content folder) add code like this:
    .ui-icon-myapp-email {
    	background-image: url("app-icon-email.png");
    }
    Make sure that app-icon-email.png is a white icon 36x36 pixels and saved as a PNG-8 with alpha transparency.

     

    Sources:

    From A New User Experience (Heinrich Wendel):

    "Commands or buttons already existed in our last preview. We lacked a common place to put them though. Consequently we added a Command Bar to the screen designer. Every tab has its own command bar which makes it easy to display context related commands. Commands usually interact with screen data and we optimized our APIs to make those operations even easier. You can use the Icon property to select from one of the about 30 icons we provide out of the box. In addition to that you can add your own custom icons using CSS, just as you would do when using plain jQueryMobile. The only difference is the icon size, we use 36x36px for our icons instead of 18x18px."

    From the jQuery Mobile site:

    "To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the  data-icon value and apply it to the button: ui-icon-myapp-email.

    You can then write a CSS rule in your stylesheet that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency."


    -Christopher DeMars

    • Proposed as answer by NirajZ Monday, July 29, 2013 7:52 AM
    • Unproposed as answer by NirajZ Monday, July 29, 2013 7:53 AM
    Thursday, May 2, 2013 9:01 PM
  • Hi,

    I have been looking for an answer to the same question. I have now tried the proposed solution (and various combinations as the data-icon is not in the element itself but in a div beneath). No luck so far so a little example project would be very helpfull.

    Best regards

    JensBo

    Friday, May 3, 2013 12:35 PM
  • Christopher,

    Thanks for the helpful suggestions. Like JensBo, I tried the solution as written with no success. However, after played around with various combinations, I found a couple of things and wondered if you had any additional thoughts or ideas.

    One thing I realized after my original post was that I hadn't originally added the image as an asset in my project. After doing that and modifying the _postRender code and custom CSS file however, it still wasn't functioning.

    I examined the web page with Chrome developer tools and it looked to me that my new attribute wasn't being assigned to the correct DIV, or the SPAN for that matter. So, I modified the _postRender code as follows, which at least resulted in the style being applied to the parent DIV as well as the SPAN: 

    myapp.BrowseSitesByNameList.TileView_postRender = function (element, contentItem) {
        // Write code here.
        //$(element).attr('data-icon', 'myapp-gridview');
        $(element).find('div').attr('data-icon', 'myapp-gridview');
    };

    For your reference, my user-customization.css code looks like this:

    .ui-icon-myapp-gridview {
    	background-image: url("Images/app-icon-gridview.png");
    }

    Also for your reference, here's my project setup:


    Finally, below is what I actually see in my browser, Chrome. Note that on the left screenshot, the custom icon is not visible. Within the CSS, it appears that the custom icon is being superseded by the default CSS code for the element from within the 'msls-light.css file' (line 29).  

    On the right screenshot, I temporarily disabled the default .CSS for the element, which of course broke the 'Add' button icon, but suddenly, my custom icon is now visible. So, any ideas how to resolve this?


    Thanks,

    Calvin

    Friday, May 3, 2013 1:19 PM
  • Hi,

    There may be some differences in the released HTML Client. Here's a working solution I found after chatting with our CSS expert team member :)

    Let's start with one single custom icon

    In the postRender method of your custom icon button, add a unique class to it.

    myapp.Browse.MyCustomIcon_postRender = function (element, contentItem) {
        $(element).addClass("myCustomIcon");
    };

    In the user-customization.css, add this CSS setting:

    .msls-footer .myCustomIcon .msls-large-icon .ui-icon {
        background-image: url("http://i.msdn.microsoft.com/ms348103.LOGO_VS2(en-us,MSDN.10).png") !important;
        background-position-x: 2px;
        background-position-y: 2px;
    }

    Note:

    - The order of myCustomIcon in the CSS query is important.
    - background-image needs an !important attribute specified.
    - background-position x and y is optional, depends on your image strip.

    Sharing one image strip for different custom icons

    We have an image strip with multiple custom icons and want to reduce duplication.

    In the postRender method, we can add two classes instead of one.

    myapp.Browse.MyCustom1Icon1_postRender = function (element, contentItem) {
        $(element).addClass("myCustomIcon1 myIcon1");
    };
    myapp.Browse.MyCustom1Icon2_postRender = function (element, contentItem) {
        $(element).addClass("myCustomIcon1 myIcon2");
    };

    In the user-customization.css, we share the settings:

    .msls-footer .myCustomIcon1 .msls-large-icon .ui-icon {
        background-image: url("http://i.s-microsoft.com/global/ImageStore/PublishingImages/logos/hp/logo-lg-1x.png") !important;
        background-position-y: 0px;
    }
    .msls-footer .myCustomIcon1.myIcon1 .msls-large-icon .ui-icon {
        background-position-x: -20px;
    }
    .msls-footer .myCustomIcon1.myIcon2 .msls-large-icon .ui-icon {
        background-position-x: -50px;
    }

    Note: There should be no spaces between .myCustomIcon1 and .myIcon1

    Here's a sample project if you're interested: http://sdrv.ms/ZsS8ED
    (I'm linking to existing images, so if they do not show up, replace the link with some existing images)

    Best regards,
    Huy


    Friday, May 3, 2013 6:21 PM
  • If you don't want to point to an external website for your custom image, just include it as a resource in your project and reference the local resource path in the URL attribute of the background-image property.

    Sorry I forgot to mention that step last time...

    Thank you Huy for getting the code for the release version of the HTML Client.


    -Christopher DeMars

    Friday, May 3, 2013 8:54 PM
  • Huy & Christopher...

    Thank you both for your help. Christopher, thanks for the initial response, and for the tip about including the image in the project. Huy, your explanation was detailed, yet easy to understand and implement. 

    I made the quick changes and it works perfectly: 

    It makes complete sense now that I see it in action. I had actually played around with assigning a class in the _postRender event, and I'm sure I was close at one point, but I didn't quite have the CSS syntax quite right.  

    I wish I would have thought to post my question here earlier this week! It would've saved me a few hours of sleep. ;) It's all good though... chalk it up to a learning experience. The best way to learn is through failure, right?

    Thank you both again for the assistance!

    -Calvin

    EDIT: I don't know how what the etiquette and protocol is for these forums. I feel like you both contributed to a successful answer. Can I mark both of your posts as an answer?

    • Edited by cgrucelski Friday, May 3, 2013 10:56 PM added question about marking as answer
    Friday, May 3, 2013 10:53 PM