Jean Paul's Blog

There are 2 types of People in the World, One who Likes SharePoint and..

    Advertisements
  • Microsoft MVP

  • MindCracker MVP

  • CodeProject MVP

  • eBook on SharePoint 2010

  • eBook on Design Patterns

  • eBook on Windows Azure

  • NLayers Framework @ CodePlex

  • MSDN Forums

  • .Net vs. Java

    Due to Public Demand
  • Advertisements

Posts Tagged ‘javascript’

JavaScript Cross Domain Issue in App Part

Posted by Paul on March 17, 2015

In this article we can explore the JavaScript cross domain issue while using App Parts.

Scenario

Following is the scenario:

1. You have a page with a JavaScript method

2. The page have an App Part too which displays from a PHA application

3. App Part need to invoke the JavaScript method in page

4. Due to cross-domain issue the App Part cannot invoke the parent page’s method

App Parts are rendered in IFrames. The scenario is depicted below:

image

Security Aspects

By default SharePoint prevents cross-domain script calls to avoid following security vulnerabilities:

1. An IFRAME code can manipulate the parent page’s HTML DOM objects

2. An IFRAME code can unwantedly invoke parent page’s script methods

image

Please note that the cross-domain issue won’t occur if the page & IFRAME page happens to be in the same SharePoint library. In our case the IFRAME content is an App Part which is coming from an externally hosted PHA application.

Solutions

Following are the solutions possible here:

1. Use Allow Framing control in the page

2. Use SP.RequestExecutor wiring

3. Use JavaScript Post Message functionality

Here I would like to show the JavaScript Post Message functionality.

JavaScript Post Message

The window.PostMessage() method allows safe communication across cross-boundary pages. Here the invoker is passing a message string to the target. The target may choose to process or ignore the message.

Implementation

For simplicity I am avoiding creating the PHA application. I would like to show the core functionality. Create a new page in SharePoint.

Add a content web part & insert the following code into it. (See parent.html)

function parentmethod()

{

alert(“Parent Method Invoked!”);

}

window.onmessage = function(e)

{

if (e.data == ‘ok’)

{

parentmethod();

}

};

/SiteAssets/frame.html

The code above performs the following:

1. Create a method named parentmethod() which displays an alert message

2. Create a message listener method for any incoming messages

3. Create an IFRAME displaying the child page

Now you need to upload the following content to the Site Assets library. Name it as frame.html. (See frame.html)

<input type=”button” value=”Click Me to invoke Parent Method”

onclick=”parent.postMessage(‘ok’, ‘*’);”>

</input>

Save changes & your page looks like below now.

image

Click on the button & you should be able to see the message box shown below.

image

Following is the functionality summary depiction.

image

This resolves the cross-domain script call issue.

References

https://msdn.microsoft.com/en-us/library/office/fp179921.aspx

Summary

In this article we have explored cross-domain issue of App Part and a Solution for it. The scripts are added to the article.

Advertisements

Posted in SharePoint, SharePoint 2013 | Tagged: , , , | Leave a Comment »

Hide Version History in SharePoint 2010

Posted by Paul on October 3, 2013

In this article I would like to take you through a Real World Scenario. You wanted to hide the Version History menu item from the documents menu.

image

I am working on original code of Matthew Yarlett for the original code. Thank You Matthew for making things easier.

HideAction won’t work!

The typical HideAction way of hiding ribbon items won’t work with context menu items as they are rendered through JavaScript.

JavaScript Approach

The Version History menu item is residing in the Edit Control Block group of menu items. These menu items are rendered through the core.js java script file. The file resides in the _layouts folder.

We need to visit the file to find the Version History text & sequence number. The sequence number determines the position of menu item in the edit control block.

The file can be located in folder:

C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTS

Opening the core.js file & locating Version History text & use the L_Versions_Text variable to look ahead in file & locate the sequence number as 800.

image

JavaScript Code

Following is the JavaScript code which perform the hiding functionality.

ExecuteOrDelayUntilScriptLoaded(editEcbMenusEx, ‘Core.js’);

function editEcbMenusEx() {

try {

if (typeof ctx == “undefined”) {

return;

}

else {

    alert(‘ok’);

var css = ‘li[sequence=”800″]{display:none;}’;

var head = document.getElementsByTagName(‘head’)[0];

var style = document.createElement(‘style’);

style.type = ‘text/css’;

if (style.styleSheet){ style.styleSheet.cssText = css; }

else { style.appendChild(document.createTextNode(css)); }

head.appendChild(style);

}

} catch (e) {

}

}

Please note that the script is executed after Core.js is loaded.

How to test the code?

For testing the code, you need to perform the following steps:

1. Create a HideHistory.js file with above content & upload to Site Assets library

2. Edit the library page & add a content editor web part

3. Point the web part to our HideHistory.js file

image

4. Refresh the page

5. See the Version History menu item is hidden now

image

image

Please note that the hiding takes place in all libraries & lists where the content editor is placed. You need to add if condition to check for list template OR list name for conditional hiding.

If you need to apply to all pages without using Content Editor web part, you can add the code to master page. Please visit this link on how to do it.

References

http://bit.ly/GzKODY

Summary

In this article we have explored the way to hide Version History menu item in libraries.

The source code is attached here with.

Posted in SharePoint, SharePoint 2010, SharePoint 2013 | Tagged: , , , , , | Leave a Comment »

How to Deploy JavaScript to Master Page through Solution?

Posted by Paul on October 2, 2013

In this article I would like to take you through a real-world problem. You are working on a Java Script method which should be deployed to multiple SharePoint servers. The Java Script needs to be included in the Master Page file.

How to deploy it?

The manual deployment requires going to each SharePoint site, Opening the page in SharePoint Designer & Editing the master page. This way is time consuming & has maintenance overheads.

How to Automate Deployment?

We need to automate the deployment process. We can use the AdditionalPageHead delegate to render our custom code to master page & everything through automated deployment.

clip_image002

Steps

Please follow the steps below to achieve the following:

· Deploy Java Script page to SharePoint Master Page

Step 1: Create new project

Open Visual Studio & Create an empty SharePoint project & name it as MasterPageCode. Choose the farm solution option.

clip_image004

Step 2: Add User Control

Add a User Control item to the project & name it as MyControl. We are going to place our JavaScript code here.

clip_image006

In the appearing user control, place the following code which says Hello World through JavaScript.

alert(‘Hello World’);

The user control looks like below:

clip_image008

Now we need to include this user control code in the Master Page. We can achieve this in the next step.

Step 3: Add Deployment Element

Choose Add new item & select the Empty Element option & name it as MyAction.

clip_image010

Replace the content of file with following code. (please ensure the folder & file names are correct)

<?xml version=”1.0″ encoding=”utf-8″?>

<Elements xmlns=”http://schemas.microsoft.com/sharepoint/”&gt;

<Control Id=”AdditionalPageHead” Sequence=”150″

ControlSrc=”~/_CONTROLTEMPLATES/MasterPageCode/MyControl.ascx”>

</Control>

</Elements>

Now the Solution Explorer looks like below:

clip_image012

Step 4: Deploy Solution

Now right click on the solution & choose the Deploy option. Wait for a few seconds & your solution will get deployed & activated automatically.

clip_image014

During runtime, the Java Script code will be appended to Master Page.

Step 4: Testing Solution

Open the default SharePoint site & you should receive the following JavaScript message box.

clip_image016

clip_image018

I thought of adding some important points:

1. The default master page of SharePoint pages is default.master & it resides in the 14 Hive > Templates > Layouts folder.

2. The AdditionalPageHead tag ensures the user control code is added to the master page. We can have multiple user controls rendered in this way.

3. The MyAction.xml file ensure the user control is deployed through the WSP file.

References

http://msdn.microsoft.com/en-us/library/ms470880(v=office.14).aspx

Summary

In this article we have explored a real world scenario. I hope the code will be useful in real word scenarios of integrating Java Script or Custom Controls to every page through solutions.

I have attached the source code along with.

Posted in SharePoint 2010 | Tagged: , , , , , , , | Leave a Comment »

For Beginners: In ASP.NET how to show a Javascript Alert message box?

Posted by Paul on December 2, 2010

I have seen frequently that beginners in ASP.NET try to use Windows Forms MessageBox and fails.

I would like to say that MessageBox class is meant for Windows Forms Application and not ASP.NET Web applications.

In ASP.NET applications, you have to:

Use either a page to show the message

or

Use javascript alert function to show the message (the example is given below)

Example

Create a new web application using File > New Project > Web > ASP.NET Web Application

image

In the solution Explorer, right click on the Default.aspx and use View Code command.

Replace the Page_Load method code as below:

protected void Page_Load(object sender, EventArgs e)

{

    string message = "Test Message Box in ASP.NET";

    string script = "<script language=’javascript’>alert(‘" + message + "’);</script>";

    ClientScript.RegisterStartupScript(GetType(), "key", script);

}

Now you can execute the application.

Output

On loading the page you will see the following message box (if not enable javascript in your browser)

image

Posted in C# | Tagged: , , | Leave a Comment »