Saturday, 29 September 2012

SharePoint 2013 App Settings

SharePoint 2013 introduce the new "App" platform  for each single update the new app deployed to the target site as new website  the url of the newly created App website will be something like

your appdomain-{version Number}.YourDomain.com

The interesting issue here , I was in the middle of developing SharePoint app and I wanted to store some application related configuration ,the application configuration will vary from user to another , below the steps i followed to provide the user such functionality

  1. create new aspx Settings page
using Napa Cloud app  https://www.napacloudapp.com  go to  Pages and click add new page


after selecting add new Item from the pages sub menu a popup div will appear to ask you which type you need to add we are able to select one of three types 
  1. Javascript File
  2. Css file
  3. ASPX file





Type in your aspx page name then 

  1. Add your layout html controls to the newly created settings.aspx page
after creating the appropriate layout of the settings page we need to load the settings and store them from a persistence storage

as I elaborated before , the SharePoint 2013 app is deployed as a standalone website so we can utilize the property bag of the website to store our application related settings

adding few lines in the App.js file will do the trick

$(document).ready(function () {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
});
// This function creates a context object which is needed to use the SharePoint object model
function sharePointReady() {
 = new SP.ClientContext.get_current();
 web = context.get_web();
 getUserName();
 readApplicationSettings();
}
function readApplicationSettings()
{
 this.props = web.get_allProperties();

  context.load(this.props);
 context.executeQueryAsync(Function.createDelegate(this, gotProperty), Function.createDelegate(this, failedGettingProperty));
}
function gotProperty() {
 
 //read the value and display it into the input text field txtSetting
 $("#txtSetting").val(this.props.get_item("AppSettingKey"));


}
function failedGettingProperty() {
 displayMessage('error','unable to retrieve applicaiton Settings',true);
}





to save the application setting we need to update the web site with the value we read from the text input field in the setting page

function saveSettings()
{
var context = new SP.ClientContext.get_current();
var web = context.get_web();
this.props=web.get_allProperties();

this.props.set_item("AppSettingKey", $("#txtSetting").val());

web.update();

context.executeQueryAsync(Function.createDelegate(this, onSettingsSaveSuccess), Function.createDelegate(this, onSettingsSaveFailure));

}
function onSettingsSaveSuccess()
{
alert("Application Setting Saved");
window.location="default.aspx";
}
function onSettingsSaveFailure()
{
alert("Error Saving the settings..!");
}




after saving the application setting value we redirect the user to the main application page (default.aspx)


Tuesday, 24 July 2012

Hide Action Menu in Business Data List Webpart

To hide the action menu there is an OOTB option in the Business Data List Webpart , but it hides the Paging controls as well , so how to hide the action menus and keep the paging controls
The first thing pumps to your head is to do so you should alter the xslt used by the webpart , and simply remove the first td in the below place holder



  <asp:PlaceHolder id="ActionBarTable" runat="server">
        <table class="ms-menutoolbar" cellpadding="2" cellspacing="0" border="0" width="100%">
          <tr>
           <b> <td class="ms-toolbar" style="padding-left:3px;text-align:left" nowrap="true">
              <xsl:value-of select="$ActionsText" />
            </td></b>
            <td class="ms-toolbar" style="padding-right:3px;text-align:right" nowrap="true">
              <xsl:value-of select="$EditViewText" />
            </td>
          </tr>
        </table>
      </asp:PlaceHolder>



but the action menu keep appearing , so I think of a client side script to hide the action menu

by using the Content Editor WebPart and injecting the below script



<script type='text/javascript' src='valid url of latest jquery'></script>
<script type='text/javascript'>
$(document).ready(function() {
  $("table [class='ms-menutoolbar'] tbody tr td:first-child").hide();
});
</script>



the last thing to do is to ensure that animation is set to off in the webpart Options as if the animation is enabled the JavaScript function will called before even the action menu rendered

Sunday, 22 July 2012

Image carousel webpart Sanboxed


In order to create a slider /image carousel webpart you have 2 options
Use content By Query Web Part
1-be sure that the publishing infrastructure feature is activated in your site collection
2-Add a New Content Query Webpart as below

3- Export the webpart you will prompt to download file named "Content Query.webpart"

4-Save the file as Content Query Nivo.webpart in this step you can open the file using any text editor and change the webpart name
5-Content query webpart uses XSL files to transform the xml result set to predefined html the OOTB xsl files are
  • ContentQueryMain.xsl
  • Header.xsl
  • ItemStyle.xsl

these file can be found under the Style Library/XSL Style Sheets as shown

you can alter any of these files to get the html markup you are looking for but it's recommended to create a copy before changing the file
The Html markup of the Carousel in this post I'm going to use a famous image slider called nivo , the css and js files can be downloaded via Nivo Slider Home Page
the desired markup is

to be able to create this html markup using the sharePoint designer copy the file ContentQueryMain.xsl and save it as nivoCQWP.xslt
locate the Outer template and update the xsl to be as below insert the highlighted lines


to complete the markup locate the OuterTemplate.Body and update the template as below




the last step you need to execute is to add the nivo directory to the site collection Style Library using SharePoint Designer Import Folder

Now to use the new customized Content Query webpart you need to upload the webpart if you have a quick look on the first snapshot you will find upload webpart in the left bottom portion of the dialog use it to upload your custom webpart

now you can use your custom CQWB , set the query parameters to load Images from Asset Library ->Image Content Types




the second option is to create a webpart from scratch this will be posted later

Add Item to External List using Site Workflow


when trying to add new item to external list while running a site workflow a strange error appears
"Unable to evaluate expression because the code is optimized or a native frame is on top of the call stack"
and the sharePoint Redirects me to access denied page
I tried to execute the below steps to figure it out
1- check the current user and BSC permissions :

as you can see the user already been granted full permission
2- check the External Content Type Authentication mode

the current user identity is selected
3- I checked the SQL server Login and Also the user amr-pc/amr got a valid login to the target database
after a while I recall that BSC used the Service account to connect to External List
In order to achieve that
First we create a Secure Store Service
central administration->Manage Service Applications->Manage Secure Store Service
Application and select manage
before adding new Secure Store service Target application you will have to provide a Key if it's the first time

afterwards you can create your Secure Store target application
1- set the application ID

In the last step sepcify the target application administrators and members be sure to add all authenticated users to the secure store target application

after creating the target application select the created application and choose the Set Credentials button from ribbon

Type the target user which will be used to access the remote SQL server database
go to the sharePoint designer and Edit the External Content Type authentication to be Impersonate windows account add the localhostServices "or the application ID you entered while creating the target applicatoin "as the application id in both default and client tab

back to the web browser as you can see below the external list contains 0 items

navigate back to the site workflow and use the initiation form to create an external list Item
Enter the following data First Name: Amr
Last Name: Fouad
Title : SharePoint Developer
press create

now navigate back to the external list you will find the newly created record


and that's it Vola! you can now access the external list within the site workflow