2

Inside a Visualforce page, I have a static resource (MyResource.zip) which contains the following:

  • scripts/Script.js
  • img/iconoTP.gif

I'm using the Chrome notifications API to show desktop notifications of events in this page.

The following code is inside script.js:

function notify(thetitle, thebody) {
  if (!Notification) {
    return;
  }

  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification(thetitle, {
      icon: URLFOR($Resource.MyResource,'img/iconoTP.gif'),
      body: thebody,
    });
  }
}

And after calling the notify function, the line referencing the static resource throws an error because URLFOR isn't defined.

Is this possible in any way or should I upload my image in a different way? (i.e. not inside an static resource but as a document).

Note: this js file is correctly referenced in the VF page.

2
  • Try this icon: {!URLFOR($Resource.MyResource,'img/iconoTP.gif')}, – dBeltowski Jun 17 '16 at 15:59
  • @DougB script.js:123 Uncaught SyntaxError: Unexpected token ! – FuuRe Jun 17 '16 at 16:02
4

Found this on the Salesforce Developer forums. Maybe it will help you.

Do you want a quick (and a little bit ugly) solution ? define a global js variable with the path from the visualforce page :

<script> var globalStaticResourcePath = '{!URLFOR($Resource.thenameofyourzipfile)}'; </script>

and inside the js, every time that you are going to put the img url , add the global url var, example:

(inside script.js that is in the zip file) var imgpath = globalStaticResourcePath+'image.jpg';

0
4

To expand a little bit on the answer from Doug, I think this can be done in way that seems like much less of a hack. I have frequently used a similar pattern to pass information such as static resource urls, object describe information, or anything else available in a visualforce global variable to a javascript file.

To make this more robust, you will want to add these items to a namespace object. This prevents conflicts with someone else re-defining the variable globalStaticResourcePath. This would look like:

Visualforce

<script> 

  // Declare your namespace with an anonymous function. Replace "myNs" in
  //   this code with whatever your namespace is. If you don't have one
  //   you can just make one up. Just don't use anything Salesforce already
  //   uses like "sfdc", "sfone", "force", etc.
  (function(myNs, undefined) {

    // Declare your custom $Resource object only if it is not already
    //  declared.
    myNs.$Resource = myNs.$Resource || {};

    // Add any resources you want to the object
    myNs.$Resource.MyResource = '{!URLFOR($Resource.MyResource)}';
    myNs.$Resource.OtherResource = '{!URLFOR($Resource.OtherResource)}';


    //OPTIONAL: Add a helper function for getting resource urls
    myNs.getResourceUrl = function(resourceName, filePath) {
      var baseResourceUrl = myNs.$Resource[resourceName];

      // Throw an error if you get a resource that does not exist
      if(!baseResourceUrl) {
        throw 'The static resource ' + resourceName + ' does not exist or has not been added to the $Resource map.';
      }

      var url = baseResourceUrl;

      // If we have a file path, append it.
      if(filePath) {
        url = url + filePath;
      }

      // Return the resource url
      return url;
    };

  }(window.myNs = window.myNs || {}));
</script>

Javascript

// Use your function or you could directly reference myNs.$Resource
var myImageUrl = myNs.getResourceUrl('MyResource', '/img/file.png');
var myResourceUrl = myNs.getResourceUrl('MyResource');
var otherResourceUrl = myNs.$Resource.OtherResource;

This can be made even more modular by placing the visualforce code inside a component that can be included on any page where you or someone else on your team needs to access resources from javascript.

-D.S.

1
  • Yeah I like the idea of bundling it into one global object and adding things as needed. Avoids collisions with a large number of top-level names. – Charles T Jun 17 '16 at 17:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.