Project Server JavaScript を使用してプロジェクトを作成、取得、更新、削除する
この記事のシナリオでは、現在の ProjectContext インスタンスを取得する方法を示します。サーバー上の発行済みプロジェクトのコレクションを取得して反復処理する。Project Server JavaScript オブジェクト モデルを使用してプロジェクトを作成、取得、チェック、削除し、プロジェクトのプロパティを変更します。
注:
これらのシナリオでは、SharePoint アプリケーション ページのマークアップでカスタム コードを定義しますが、Visual Studio 2012 がページ用に作成する分離コード ファイルは使用しません。
JavaScript オブジェクト モデルで Project Server 2013 プロジェクトを操作するための前提条件
この記事で説明するシナリオを実行するには、次の製品をインストールおよび構成する必要があります。
- SharePoint Server 2013
- Project Server 2013
- Visual Studio 2012
- Office Developer Tools for Visual Studio 2012
また、SharePoint Server 2013 に拡張機能を展開し、プロジェクトに貢献するためのアクセス許可も必要です。
注:
次の手順では、Project Server 2013 を実行しているコンピューターで開発していることを前提としています。
Visual Studio ソリューションを作成する
次の手順では、SharePoint プロジェクトとアプリケーション ページを含む Visual Studio 2012 ソリューションを作成します。 ページには、プロジェクトを操作するためのロジックが含まれます。
Visual Studio で SharePoint を作成するには
Project Server 2013 を実行しているコンピューターで、管理者として Visual Studio 2012 を実行します。
メニュー バーで、[ ファイル]、[ 新規作成]、[ プロジェクト] の順に選択します。
[新しいプロジェクト] ダイアログ ボックスで、ダイアログ ボックスの上部にあるドロップダウン リストから [.NET Framework 4.5] を選択します。
[Office/SharePoint] テンプレート カテゴリで、[SharePoint ソリューション] を選択してから、[SharePoint 2013 プロジェクト] テンプレートを選択します。
プロジェクトに ProjectsJSOM という名前を付け、[ OK ] ボタンを選択します。
[ SharePoint カスタマイズ ウィザード] ダイアログ ボックスで、[ ファーム ソリューションとして配置する] を選択して、[ 完了] をクリックします。
ProjectsJSOM プロジェクトの Site URL プロパティの値を、Project Web App インスタンスの URL (たとえば)
https://ServerName/PWAと一致するように編集します。
Visual Studio でアプリケーション ページを作成するには
ソリューション エクスプローラーで、ProjectsJSOM プロジェクトのショートカット メニューを開き、SharePoint のマップされた "Layouts" フォルダーを追加します。
[レイアウト] フォルダーで、ProjectsJSOM フォルダーのショートカット メニューを開き、ProjectsList.aspx という名前の新しい SharePoint アプリケーション ページを追加します。
[ProjectsList.aspx] ページのショートカット メニューを開き、[スタートアップ アイテムとして設定] を選択します。
ProjectsList.aspx ページのマークアップで、"Main" asp:Content タグ内のユーザー インターフェイス コントロールを次のように定義します。
<table width="100%" id="tblProjects"> <tr id="headerRow"> <th width="25%" align="left">Name</th> <th width="25%" align="left">Description</th> <th width="25%" align="left">Start Date</th> <th width="25%" align="left">ID</th> </tr> </table> <textarea id="txtGuid" rows="1" cols="35">Paste the project GUID here.</textarea> <button id="btnSend" type="button"></button><br /> <span id="spanMessage" style="color: #FF0000;"></span>注:
これらのコントロールは、すべてのシナリオで使用する必要はありません。 たとえば、"プロジェクトの作成" シナリオでは textarea および buttonコントロールを使用しません。
span タグを閉じた後で、SharePoint:ScriptLink タグ、SharePoint:FormDigest タグ、および script タグを次のように追加します。
<SharePoint:ScriptLink id="ScriptLink" name="PS.js" runat="server" ondemand="false" localizable="false" loadafterui="true" /> <SharePoint:FormDigest id="FormDigest" runat="server" /> <script type="text/javascript"> // Replace this comment with the code for your scenario. </script>SharePoint:ScriptLink タグは、Project Server 2013 の JavaScript オブジェクト モデルを定義する PS.js ファイルを参照します。 SharePoint:FormDigest タグは、サーバー コンテンツを更新する操作で必要な場合に、セキュリティ検証用のメッセージ ダイジェストを生成します。
プレースホルダー コメントを、次のいずれかの手順のコードで置換します。
アプリケーション ページをテストするには、メニュー バーの [デバッグ] を選択し、[デバッグの開始] をクリックします。 web.config ファイルの変更を求められたら、[OK] を選択します。
JavaScript オブジェクト モデルを使用して Project Server 2013 プロジェクトを作成する
このセクションの手順では、JavaScript オブジェクト モデルを使用してプロジェクトを作成します。 手順には、次の概要手順が含まれます。
現在の ProjectContext インスタンスを取得します。
ProjectCreationInformation オブジェクトを作成して、プロジェクトの初期プロパティを指定します。 ProjectCreationInformation.set_name 関数を使用して、必要な name プロパティを指定します。
ProjectContext.get_projects 関数を使用して、発行済みのプロジェクトをサーバーから取得します。 get_projects 関数は ProjectCollection オブジェクトを返します。
ProjectCollection.add 関数を使用し、ProjectCreationInformation オブジェクトを渡して、コレクションに新しいプロジェクトを追加します。
ProjectCollection.update 関数と ProjectContext.waitForQueueAsync 関数を使用してコレクションを更新します。 update 関数は、waitForQueueAsync に渡す QueueJob オブジェクトを返します。 この呼び出しは、プロジェクトも発行します。
「Visual Studio でアプリケーション ページを作成するには」の手順で追加した script タグの間に、次に示すコードを貼り付けます。
// Declare a global variable to store the project collection.
var projects;
// Ensure that the PS.js file is loaded before your custom code runs.
SP.SOD.executeOrDelayUntilScriptLoaded(CreateProject, "PS.js");
// Add a project the projects collection.
function CreateProject() {
// Initialize the current client context.
var projContext = PS.ProjectContext.get_current();
// Initialize a ProjectCreationInformation object and specify properties
// for the new project.
// The Name property is required and must be unique.
var creationInfo = new PS.ProjectCreationInformation();
creationInfo.set_name("Test Project 1");
// Specify optional properties for the new project.
// If not specified, the Start property uses the current date and the
// EnterpriseProjectTypeId property uses the default EPT.
creationInfo.set_description("Created through the JSOM.");
creationInfo.set_start("2013-10-01 09:00:00.000");
// Get the projects collection.
projects = projContext.get_projects();
// Add the new project to the projects collection.
projects.add(creationInfo);
// Add a second project to use in the deleting projects procedure.
creationInfo.set_name("Test Project 2");
projects.add(creationInfo);
// Submit the request to update the collection on the server
var updateJob = projects.update();
projContext.waitForQueueAsync(updateJob, 10, GetProjects);
}
// Get the projects collection.
function GetProjects(response) {
// This call demonstrates that you can get the context from the
// ProjectCollection object.
var projContext = projects.get_context();
// Register the request for information that you want to run on the server.
// This call includes an optional "Include" parameter to request only the Name, Description,
// StartDate, and Id properties of the projects in the collection.
projContext.load(projects, 'Include(Name, Description, StartDate, Id)');
// Run the request on the server.
projContext.executeQueryAsync(IterateThroughProjects, QueryFailed);
}
// Iterate through the projects collection.
function IterateThroughProjects(response) {
// Get the enumerator and iterate through the collection.
var enumerator = projects.getEnumerator();
while (enumerator.moveNext()) {
var project = enumerator.get_current();
// Create and populate a row with the values for the project's Name, Description,
// StartDate, and Id properties.
var row = tblProjects.insertRow();
row.insertCell().innerText = project.get_name();
row.insertCell().innerText = project.get_description();
row.insertCell().innerText = project.get_startDate();
row.insertCell().innerText = project.get_id();
}
// This scenario does not use the textarea or button controls.
$get("txtGuid").disabled = true;
$get("btnSend").disabled = true;
}
function QueryFailed(sender, args) {
$get("spanMessage").innerText = 'Request failed: ' + args.get_message();
}
JavaScript オブジェクト モデルを使用して Project Server 2013 プロジェクトを更新する
このセクションの手順では、JavaScript オブジェクト モデルを使用してプロジェクトの startDate プロパティを更新します。 手順には、次の概要手順が含まれます。
現在の ProjectContext インスタンスを取得します。
ProjectContext.get_projects 関数を使用して、発行済みのプロジェクトをサーバーから取得します。 get_projects 関数は ProjectCollection オブジェクトを返します。
ProjectContext.load 関数と ProjectContext.executeQueryAsync 関数を使用して、サーバーで要求を実行します。
ProjectContext.getById 関数を使用して、PublishedProject オブジェクトを取得します。
Project.checkOut 関数を使用してターゲット プロジェクトをチェックアウトします。 checkOut 関数は、発行されたプロジェクトのドラフト バージョンを返します。
DraftProject.set_startDate 関数を使用して、プロジェクトの開始日を変更します。
DraftProject.publish 関数と ProjectContext.waitForQueueAsync 関数を使用してプロジェクトを発行します。 publish 関数は、waitForQueueAsync に渡す QueueJob オブジェクトを返します。
「Visual Studio でアプリケーション ページを作成するには」の手順で追加した script タグの間に、次に示すコードを貼り付けます。
// Declare global variables.
var projContext;
var projects;
// Ensure that the PS.js file is loaded before your custom code runs.
SP.SOD.executeOrDelayUntilScriptLoaded(GetProjects, "PS.js");
// Get the projects collection.
function GetProjects() {
// Initialize the current client context.
projContext = PS.ProjectContext.get_current();
// Get the projects collection.
projects = projContext.get_projects();
// Register the request for information that you want to run on the server.
// This call includes an optional "Include" parameter to request only the Name, Description,
// StartDate, and Id properties of the projects in the collection.
projContext.load(projects, 'Include(Name, Description, StartDate, Id)');
// Run the request on the server.
projContext.executeQueryAsync(IterateThroughProjects, QueryFailed);
}
// Iterate through the projects collection.
function IterateThroughProjects(response) {
// Get the enumerator and iterate through the collection.
var enumerator = projects.getEnumerator();
while (enumerator.moveNext()) {
var project = enumerator.get_current();
// Create and populate a row with the values for the project's Name, Description,
// StartDate, and Id properties.
var row = tblProjects.insertRow();
row.insertCell().innerText = project.get_name();
row.insertCell().innerText = project.get_description();
row.insertCell().innerText = project.get_startDate();
row.insertCell().innerText = project.get_id();
}
// Initialize button properties.
$get("btnSend").onclick = function () { ChangeProject(); };
$get("btnSend").innerText = "Update";
}
// Change the project's start date.
function ChangeProject() {
// Get the identifier of the target project.
var targetGuid = $get("txtGuid").innerText;
// Get the target project and then check it out. The checkOut function
// returns the draft version of the project.
var project = projects.getById(targetGuid);
var draftProject = project.checkOut();
// Set the new property value and then publish the project.
// Specify "true" to also check the project in.
draftProject.set_startDate("2013-12-31 09:00:00.000");
var publishJob = draftProject.publish(true);
// Register the job that you want to run on the server and specify the
// timeout duration and callback function.
projContext.waitForQueueAsync(publishJob, 10, QueueJobSent);
}
// Print the JobState return code, which gives the status of the queue job.
function QueueJobSent(response) {
$get("spanMessage").innerText = 'JobState = ' + response + '. Wait a few seconds, then refresh the page to see your changes.';
}
function QueryFailed(sender, args) {
$get("spanMessage").innerText = 'Request failed: ' + args.get_message();
}
JavaScript オブジェクト モデルを使用して Project Server 2013 プロジェクトを削除する
このセクションの手順では、JavaScript オブジェクト モデルを使用してプロジェクトを削除します。 手順には、次の概要手順が含まれます。
現在の ProjectContext インスタンスを取得します。
ProjectContext.get_projects 関数を使用して、発行済みのプロジェクトをサーバーから取得します。 get_projects 関数は ProjectCollection オブジェクトを返します。
ProjectContext.load 関数と ProjectContext.executeQueryAsync 関数を使用して、サーバーで要求を実行します。
ProjectCollection.getById 関数を使用して、PublishedProject オブジェクトを取得します。
ProjectCollection.remove 関数に渡すことでプロジェクトを削除します。
ProjectCollection.update 関数と ProjectContext.waitForQueueAsync 関数を使用してコレクションを更新します。 update 関数は、waitForQueueAsync に渡す QueueJob オブジェクトを返します。
「Visual Studio でアプリケーション ページを作成するには」の手順で追加した script タグの間に、次に示すコードを貼り付けます。
// Declare global variables.
var projContext;
var projects;
// Ensure that the PS.js file is loaded before your custom code runs.
SP.SOD.executeOrDelayUntilScriptLoaded(GetProjects, "PS.js");
// Get the projects collection.
function GetProjects() {
// Initialize the current client context.
projContext = PS.ProjectContext.get_current();
// Get the projects collection.
projects = projContext.get_projects();
// Register the request for information that you want to run on the server.
// This call includes an optional "Include" parameter to request only the Name, Description,
// StartDate, and Id properties of the projects in the collection.
projContext.load(projects, 'Include(Name, Description, StartDate, Id)');
// Run the request on the server.
projContext.executeQueryAsync(IterateThroughProjects, QueryFailed);
}
// Iterate through the projects collection.
function IterateThroughProjects(response) {
// Get the enumerator and iterate through the collection.
var enumerator = projects.getEnumerator();
while (enumerator.moveNext()) {
var project = enumerator.get_current();
// Create and populate a row with the values for the project's Name, Description,
// StartDate, and Id properties.
var row = tblProjects.insertRow();
row.insertCell().innerText = project.get_name();
row.insertCell().innerText = project.get_description();
row.insertCell().innerText = project.get_startDate();
row.insertCell().innerText = project.get_id();
}
// Initialize button properties.
$get("btnSend").onclick = function () { DeleteProject(); };
$get("btnSend").innerText = "Delete";
}
// Delete the project.
function DeleteProject() {
// Get the identifier of the target project.
var targetGuid = $get("txtGuid").innerText;
// Get the target project and then remove it from the collection.
var project = projects.getById(targetGuid);
projects.remove(project);
var removeJob = projects.update();
// Register the job that you want to run on the server and specify the
// timeout duration and callback function.
projContext.waitForQueueAsync(removeJob, 10, QueueJobSent);
}
// Print the JobState return code, which gives the status of the queue job.
function QueueJobSent(response) {
$get("spanMessage").innerText = 'JobState = ' + response + '. Wait a few seconds, then refresh the page to see your changes.';
}
function QueryFailed(sender, args) {
$get("spanMessage").innerText = 'Request failed: ' + args.get_message();
}