locked
html client icons disappear RRS feed

  • Question

  • I have an odd problem since upgrading to the March update (I also have C1 html studio installed, but I removed it and the behavior persists).  When opening a browse screen, then edit, then cancel (or save), when returning to the previous page, the icons on my buttons are missing.  I use the following JQuery code to show the buttons:

        $(element).find('a').css({
            'background-image': 'url(Content/Images/resource.png)',
            'background-repeat': 'no-repeat',
            'background-position': 'center',
            'width': '150px',
            'height': '150px'
        });

    It works perfectly the first time (or after refresh), but when returning to the previous page, the icons do not appear.  Once this occurs, even if I use the global navigation, the icons never return.

    Any thoughts?

    Scott

    Wednesday, March 26, 2014 6:24 PM

Answers

  • Scott, use the built in myapp.rootUri variable to compose the URLs for your images. That should ensure it works during development as well as in production. Something like (you may have to play around to get the right format):

    var imageURL = myapp.rootUri + "/Content/Images/calendar.png";

    Hope that helps.


    Regards, Xander. My Blog

    Friday, April 11, 2014 1:06 AM
  • Mystery solved!

         Here's the (relatively basic newb-level mistake, and Fiddler pointed to it immediately) issue:

    Prior to March 2014 update: the URL of "Content/Images/calendar.png" worked fine because the root of the URL was always "http://myserver/htmlclient/".

    After the March 2014 update: the URL no longer remains constant (i.e. now it may be http://myserver/htmlclient/myscreen which confuses the relative path to be "myscreen/Content/Images/calendar.png".

    By changing the Jquery code to be:

    'background-image': 'url(htmlclient/Content/Images/calendar.png)'

    moves the relative reference "up" to the parent "root" and therefore stays consistent throughout the app (no matter what screen you navigate to).

    This is a basic html relative reference problem, but wasn't an issue before the March 2014 update which provides a method of "shortcut" URLs for users.  A simple find/replace on my solution fixed all the instances.

    The post about clicking the "back" button and the icons showing up right before the screen navigates back one page seems to be consistent in that the URL would then be the parent root and the image would render (which speaks to JQuery's dynamic nature) correctly (albeit for a brief time).

    Scott


    Friday, March 28, 2014 3:24 PM

All replies

  • So, which events contain or trigger your code sample? What types of screens and commands are involved (tap, custom button execute). Return by browser back button or on close of dialog or screen save?

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Thursday, March 27, 2014 10:41 AM
  • Dave,

    Thanks for the reply.  The event(s) are default TAP SaveCloseButton and TAP Cancelbutton (no custom method).

    At first, the screen looks like this:

    and after the save/cancel event:

    Thursday, March 27, 2014 7:52 PM
  • This works for me from the _postRender event of the row:

    myapp.AssetsBrowse.rows_postRender = function (element, contentItem) {
        //$(element).find('a').css({
        $(element.parentElement).css({
            'background-image': 'url(Content/Images/user-logo.png)',
            'background-repeat': 'no-repeat',
            'background-position': 'center',
            'width': '150px',
            'height': '150px'
        });
    };
    Which event is your code in?

    Dave

    VS2013 March'14 Update


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.


    • Edited by Xpert360 Thursday, March 27, 2014 8:28 PM
    • Proposed as answer by Xpert360 Thursday, March 27, 2014 8:28 PM
    • Unproposed as answer by Xpert360 Thursday, March 27, 2014 9:23 PM
    Thursday, March 27, 2014 8:27 PM
  • My code is on various contentItem buttons:

    Notice the "MY REQUESTS" and "CALENDAR" buttons:

    myapp.HOME.ShowBrowseRequests_postRender = function (element, contentItem) {
        $(element).find('a').css({
            'background-image': 'url(Content/Images/calendar.png)',
            'background-repeat': 'no-repeat',
            'background-position': 'center',
            'width': '150px',
            'height': '150px'
        });
    };

    When I use your code, I get: 0x800a1391 - JavaScript runtime error: 'element' is undefined

    My code works in other apps just fine, it just appears that this one (once the event fires) causes something to break?

    Thursday, March 27, 2014 8:42 PM
  • Hi,

    Then code I posted was a TileView, with your layout and buttons it just works as well here in IE11. Btw you can lose the 2 x 'Rows Layout' unless you have some important layout concern.

    Can you share the whole screen and code-behind? Which browser are you using?

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Thursday, March 27, 2014 9:14 PM
  • Another interesting behavior that I have just witnessed is that I can use the "back" browser button and the icon disappears, but then use the "back" browser button again (back two pages) and as the browser is transitioning to the previous page, the icon "shows up" just before the page disappears and goes to the previous one (which DOES have the icon on it).

    Here's a screenshot of one page (ALL my buttons are missing the icon and they all use the exact same JavaScript code).

    Thursday, March 27, 2014 9:19 PM
  • Which browser version are you using. Is it possible the problem lies with the screen that you navigate too?

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Friday, March 28, 2014 10:07 AM
  • Mystery solved!

         Here's the (relatively basic newb-level mistake, and Fiddler pointed to it immediately) issue:

    Prior to March 2014 update: the URL of "Content/Images/calendar.png" worked fine because the root of the URL was always "http://myserver/htmlclient/".

    After the March 2014 update: the URL no longer remains constant (i.e. now it may be http://myserver/htmlclient/myscreen which confuses the relative path to be "myscreen/Content/Images/calendar.png".

    By changing the Jquery code to be:

    'background-image': 'url(htmlclient/Content/Images/calendar.png)'

    moves the relative reference "up" to the parent "root" and therefore stays consistent throughout the app (no matter what screen you navigate to).

    This is a basic html relative reference problem, but wasn't an issue before the March 2014 update which provides a method of "shortcut" URLs for users.  A simple find/replace on my solution fixed all the instances.

    The post about clicking the "back" button and the icons showing up right before the screen navigates back one page seems to be consistent in that the URL would then be the parent root and the image would render (which speaks to JQuery's dynamic nature) correctly (albeit for a brief time).

    Scott


    Friday, March 28, 2014 3:24 PM
  • This seems to have arisen again when I publish to production.

    The URL on my VS2013 is:  http://localhost:port/htmlclient/content/images/myimage.png

    but when I publish, it's:  http://server/appname/htmlclient/content/images/myimage.png

    the appname in the URL causes the relative path to change and therefore not load the image.

    By specifying the path to icons as :"htmlclient/content/images/myimage.png" in javascript works in VS2013, but in production, it resolves to: http://server/appname/htmlclient/htmlclient/content/images/myimage.png

    If I use the relative path "content/images/myimage.png", then it looks for: http://server/appname/htmlclient/mysubfolder/content/images/myimage.png 

    which fails (i.e. htmlclient is the root).

    Note: this happened after the March 2014 update where the URLs now include the "subfolder" in the URL path and therefore, it's looking for a relative path "including" the subfolder in the path.

    Any idea on how I can specify a relative URL in javascript that works in both dev and prod?

     

    Thursday, April 10, 2014 10:28 PM
  • Scott, use the built in myapp.rootUri variable to compose the URLs for your images. That should ensure it works during development as well as in production. Something like (you may have to play around to get the right format):

    var imageURL = myapp.rootUri + "/Content/Images/calendar.png";

    Hope that helps.


    Regards, Xander. My Blog

    Friday, April 11, 2014 1:06 AM
  • Thanks Xander!

    I used:

    var screenurl = myapp.rootUri + "/HTMLclient/"; 

    as a global variable and then:

    'background-image': 'url(" + screenurl +"Content/Images/calendar.png)'

    as the URL for images.

    That seems to have captured the differences between dev and prod.

    Sunday, April 13, 2014 9:41 PM
  • I would use the built in JQM icons with custom icons in different sizes.

    In user-customization:

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

    You have to make a uniqe name like -myapp-camera

    In screen, Add a button, PostRender function:

     $(element).find('a').css({
            'border-radius': '4px', 'border': 'solid 1px #20538D',
            '-moz-box-shadow': 'inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2)',
            '-webkit-box-shadow': 'inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2)',
            'box-shadow': 'inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2)',
            '-webkit-transition-duration': '0.2s',
            '-moz-transition-duration': '0.2s',
            'transition-duration': '0.2s',
            '-webkit-user-select': 'none',
            '-moz-user-select': 'none',
            '-ms-user-select': 'none',
            'user-select': 'none',
            'height': '30px',
            'padding-top': '6px',
    
        })
    
        var Menubutton = $(element).children();
        var typ = document.createAttribute("data-icon");
        var typpos = document.createAttribute("data-iconpos");
        typ.nodeValue = "myapp-camera";
        typpos.nodeValue = "top";
        Menubutton[0].attributes.setNamedItem(typ);
        Menubutton[0].attributes.setNamedItem(typpos);

    No more problem with disappearing icon/images.

    se my image of my app. The icons are buttons in the list. Works like a charm.


    Sven Elm


    • Edited by Sven Elm Saturday, June 28, 2014 9:27 AM
    Saturday, June 28, 2014 9:23 AM
  • Hi,

    I have same problem, i tested all of options exposed here but not working.

    In my case, icons disapear after user signature javascript.

    If i don't use a sign script, all icons working fine, but, when i use only one time script, icons disapear...

    Thursday, September 18, 2014 10:46 PM
  • can you provide some code for this?  I do not understand your example?
    Thursday, September 18, 2014 11:28 PM
  • Hi Scoot, My code on Icon is there:

    myapp.HOME.ShowOrdenes_postRender = function (element, contentItem) {
        $(element).find('a').css({
            'background-image': 'url(Content/Images/ordenes.png)',
            'background-repeat': 'no-repeat',
            'background-position': 'center',
            'width': '150px',
            'height': '150px'
        });
    };

    And i Have been implementet in others screens Signature Controls. from example of beth massi.

    When i call this Custom control, icons on HOme Screen Disappears...


    Friday, September 19, 2014 4:58 PM
  • Ivan,

    It doesn't appear that you have implemented the "relative" URL variable which means that every time you use the navigation dropdown to go back to the home screen, the icons will definitely disappear because the URL shifts.  try using the code shown in later threads in this issue:

    var screenurl = myapp.rootUri + "/HTMLclient/"; 

    as a global variable and then:

    'background-image': 'url(" + screenurl +"Content

    as the URL for images.

    Hope that helps.

    Friday, September 19, 2014 9:16 PM
  • Hi, Scoot.

    Not Working, after publish not showing image.

    Friday, September 19, 2014 9:41 PM
  • With Original, working all time, if i don't use custom control for signing.

    Friday, September 19, 2014 9:43 PM
  • So you are changing the control to a custom control using the same postrender method and that's when it doesn't work?
    Friday, September 19, 2014 9:54 PM
  • Yes, using same of Beth Masi Post.
    Friday, September 19, 2014 10:38 PM
  • Looks like you're using single quotes ('') and my code had double quotes("")?  replace the double with single?
    • Proposed as answer by Ivan Martinez Saturday, September 20, 2014 7:37 AM
    Friday, September 19, 2014 11:30 PM
  • Hi Scoot, Working Fine!

    many Thanks!

    Saturday, September 20, 2014 7:28 AM