Angular Bootstrap SF1 Part 2
How to use static resources with custom directives.
In my first post, (Angular Bootstrap Salesforce1) I discussed how to create custom Angular Directives that take advantage of bootstrap-sf1 for use in Salesforce1. This post will cover how to takes these directives and make them reusable with static resources. Note: In this post, I am using Sublime Text 3 and MavensMate to create static resources.
1. Create a folder structure that will become your static resource.
First, let’s create a static resource that can be uploaded to our Org. Below is an example of a folder structure to use but note the templates folder. This is where we can save .html files for our custom directives.
Image from www.joe-ferraro.com
2. Zip folder and upload to your Org.
Now that we have our folder structure, it’s time to zip its contents and upload to your Org.
3. Using MavensMate, create a Static Resource Bundle in your project
Using MavensMate Create Static Resource Bundle will search your current project Org for all static resources and give you a list to choose from. Choose the new static resource you just created, and a new folder structure will appear in your Sublime project.
Image from www.joe-ferraro.com
Now you should see resource bundles in your project. Simply add new files to your bundles and then run the MavensMate Deploy Resource Bundle command. MavensMate will take all the contents of your bundle, zip, and upload it to your project’s Org.
Image from www.joe-ferraro.com
Finally, lets make some directives.
OK, now that we have the static resource ready, let’s create some directives and use the template folder for the html snippets. The most important piece to this is creating a Javascript object to hold reference to our static resource. This allows us to pass the url / path down to the angular Javascript so that we can apply it to directives and views. The highlighted text is the Javascript object that will hold our path.
Once we have this path in an object, you can simply call it angbootConfig.staticResource + ‘/templates/accounts.html’ and use custom snippets of html for our directives and views.
.directive('snippet', [function () {
return {
restrict: 'E',
link: function (scope, iElement, iAttrs) {
scope.contentUrl = angbootConfig.staticResource + iAttrs.theme;
iAttrs.$observe("theme",function(updateTheme){
scope.contentUrl = angbootConfig.staticResource + updateTheme;
});
},
templateUrl: angbootConfig.staticResource + '/templates/snippet.html'
};
}])
Hope you find this helpful! Don’t forget to register for this session at Dreamforce – for this session and more, visit our landing page with a full list of where to catch the CodeScience team.
