Change Feature Image in Sandbox Solutions.

So recently, I had created a sandbox solution which deployed a Web Part when the feature associated with my solution was activated. So I thought when the user navigated to the Manage Features page, it should be easier for him/her to recognize which feature has to be activated and decided to assign an custom image to it.

Now my first thought was to deploy an image from the solution and assign its relative URL to the ImageUrl property of the feature. So, I deployed my custom image to the path /myFolder/awesome_img.png and assigned the same relative URL to my feature’s ImageUrl property.

And when I navigated to the Manage Features page, I was greeted with the following:

It turned out that SharePoint by default looks for the assigned image in the /_layouts/images/ folder. So whichever URL I provided to the ImageUrl property, SharePoint appended the /_layouts/images in front of it and assigned it to my feature.

Now since we are in the Sandbox, we do not have access to the _layouts folder. So we cannot deploy our custom Image to the folder and assign it to the feature.

But there is a workaround...and JavaScript has the answer!

So what I did was:

1) Deployed my custom Image to one of my SharePoint libraries.

2) Assigned place holder text to the ImageUrl property of the feature.

3) Wrote this little jQuery script which checked for the place holder text and replaced it with the path to my custom image.

jQuery(document).ready(function () {

      //Check if the current page is the Manage Features page.

     if (location.href.indexOf("ManageFeatures.aspx") != -1) {

           

          //Fetch each image with the place holder as the src.

         jQuery("img[src*='myFeatureImagePlaceHolder']").each(function () {

           

            //Replace the src of the image.

            this.src = this.src.replace("/_layouts/images/myFeatureImagePlaceHolder", _spPageContextInfo.siteServerRelativeUrl + "/myFolder/awesome_img.png");

          

        });

    }

});

4) Using Script delegates, Embedded the jQuery library and my custom JavaScript file into the masterpage, So that they will be available on the Manage Features page.

xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

<CustomAction Location="ScriptLink" ScriptSrc="~SiteCollection/Scripts/jquery-1.6.min.js" Sequence="1004" />

<CustomAction Location="ScriptLink" ScriptSrc="~SiteCollection/Scripts/ReplaceFeatureIcon.js" Sequence="1005"/>

<Elements>

After deploying the solution, I navigated to the Manage Features page and Voila! The feature image had changed:

View & Edit InfoPath Forms in the SharePoint 2010 Modal Dialog

Recently, there was a requirement in my project that, an InfoPath form (which was stored in a Forms Library on SharePoint) had to be displayed as a pop-up when the user clicked on a particular HTML page element. The user also had to have the functionality to save the changes he/she made to the displyed form.

So naturally, my first thought was to use the JavaScript Modal Dialog which SharePoint provides out of the box. Now, My challenge was to provide it with a relevant URL which pointed to my desired InfoPath form.

I navigated to my InfoPath form stored in the Forms Library and observed the URL which showed in the browser. It was similar to the following:

 [SiteCollection]/_layouts/FormServer.aspx?XmlLocation=[RelativeURLofFormXML]&Source=[FormsLibraryAbsolutePath]&DefaultItemOpen=1

Where:
SiteCollection: URL of the Site Collection
RelativeURLofFormXML: relative path of the XML file of the InfoPath form I wanted to display.
FormsLibraryAbsolutePath: The absolute path of the Forms Library which contained my InfoPath form.

Now, the only thing remaining to do was to take the JavaScript modal dialog and push the form url into it, which i did with the following code:

After that, I assigned the OpenForm( ) function to an anchor tag and when i clicked on it:

I was even able to save the form after filling it! :)