31日 3月 2015

SharePoint Designer2013でリストの入力フォームをカスタマイズする

アドバンスド · ソリューション株式会社 畑中真由子

「SharePoint 2013のフォームだと縦に入力列が並んでいて味気ないため、レイアウトを変更したい。」

「Excelの申請書のようなフォームにしたい。」

そのような場合、SharePoint Designer 2013を利用してフォームのレイアウトをカスタマイズすることができます。

 

はじめに

紹介するカスタマイズデザインはSharePoint Designer 2013の知識、HTMLの知識が必要となります。

今回はリストの入力フォームのレイアウトデザインのみカスタマイズします。

カスタマイズ箇所は以下の通りです。

  1. 全体に枠線を付ける。
  2. 新規入力フォームとわかりやすいようにタイトルをつける。
  3. 各入力項目タイトルに背景色をつける。
  4. 入力項目の配置を変える。


 ADS_hatanaka001.png
ADS_hatanaka002.png

まず、リストフォームを編集するため、SharePoint Designer 2013で入力フォームを新規作成しましょう。

入力フォームの新規作成

該当のSharePoint リストをSharePoint Designer 2013で開きます。

  1. SharePoint Designer 2013を起動します。
  2. 「サイトを開く」ボタンをクリックし、フォームをカスタマイズしたいリストがあるサイトを開きます。
    ADS_hatanaka003.png
  3. ダイアログが表示されるので「サイト名」にサイトのURLを入力し、「開く」をクリックします。
    ADS_hatanaka004.png
  4. サイトが開いたら、左のメニューで「リストとライブラリ」を選択します。
    ADS_hatanaka005.png
  5. リストとライブラリが開いたら、フォームをカスタマイズしたいリストを選択します。
    (今回は「カスタムフォーム」というリストのフォームをカスタマイズします。)
    ADS_hatanaka006.png
  6. リストプロパティ画面の「フォーム」領域から「新規作成」をクリックします。
    ADS_hatanaka008.png
    ADS_hatanaka009.png
  7. 「新しいリスト フォームの作成」が開きます。そこで、「ファイル名」、「フォームの種類」(今回はアイテム作成フォーム)を選択し、「OK」をクリックします。
    この際、既定フォームにしたい場合は「選択した種類の既定フォームとして設定」にチェックをつけます。(今回は既定のフォームにしたいので、チェックをつけました。)
    ADS_hatanaka010.png
  8. リストの入力フォームが作成されました。
    ADS_hatanaka011.png

 

続いて、新規作成した入力フォームをカスタマイズします。

  1. 新規作成したフォームのファイル名をクリックします。フォームのソースが開きます。
    ADS_hatanaka012.png
    ADS_hatanaka013.png
  2. <table border="0" cellspacing="0" width="100%">～</table>までがフォームのソースコードになります。この部分をカスタマイズします。
    (「タイトル」で検索すると見つけやすいです。)

    <table border="0" cellspacing="0" width="100%">

    <tr>

    <td width="190px" valign="top" class="ms-formlabel">

    <H3 class="ms-standardheader">

    <nobr>タイトル<span class="ms-formvalidation"> *</span>

    </nobr>

    </H3>

    </td>

    …</table>


    補足：ソースコードを編集する前に
    １行に黄色の部分は列の名前、緑色の部分は入力するSharePointコントロールが配置されています。
    黄色と緑色のソースは入力項目なので消さないでください。

     ADS_hatanaka014.png

    フォームを新規作成した際に、既定で青枠の「保存」、「キャンセル」ボタン、「添付ファイル」行ができます。

    今回は青枠の部分に関しては、カスタマイズしません。
    ADS_hatanaka015.png

  3. 2で開いたソース(SharePoint標準のフォームのソース)を変更します。
    変更箇所は以下の「フォームの編集前ソース」と「フォーム編集後のソース」を参照してください。
    赤文字部分が変更する箇所、橙背景部分が変更した箇所となります。

    フォーム編集前ソース
    <table border="0" cellspacing="0" width="100%">
    <!-- ここに<tr><tdcolspan="4"valign="middle"style="text-align:center">
    < H1style="text-align:center;background-color:#FFFFCC;">    新規入力フォーム
    </H1>
    < /td>
    < /tr>    を追加します。 -->
    <!-- 受付日、メール通知のタグを以下の<tr>~</tr>の間に移動します。-->
    < tr>
    < /tr>
    <tr>
    <!-- td タグ内に style="background-color:#CCFFCC"を追加します。-->
    <td width="190px" valign="top" class="ms-formlabel">
    < H3 class="ms-standardheader">
    < nobr>    タイトル<span class="ms-formvalidation"> *</span>
    < /nobr>
    < /H3>
    < /td>
    <td width="400px" valign="top" class="ms-formbody">
    < SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
    < SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
    < /td>
    < /tr>
    <tr>
    <!-- td タグ内に style="background-color:#CCFFCC"を追加し、フォームタイトル下の<tr>~</tr>に移動します。-->
    <td width="190px" valign="top" class="ms-formlabel">
    < H3 class="ms-standardheader">
    < nobr>    受付日</nobr>
    < /H3>
    < /td>
    <td width="400px" valign="top" class="ms-formbody">
    < SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="_x53d7__x4ed8__x65e5_" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x53d7__x4ed8__x65e5_')}"/>
    < SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="_x53d7__x4ed8__x65e5_" ControlMode="New"/>
    < /td>
    < /tr>
    < tr>
    <!-- td タグ内に style="background-color:#CCFFCC"を追加します。-->
    <td width="190px" valign="top" class="ms-formlabel">
    < H3 class="ms-standardheader">
    < nobr>    内容</nobr>
    < /H3>
    < /td>
    <td width="400px" valign="top" class="ms-formbody">
    < SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="_x5185__x5bb9_" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x5185__x5bb9_')}"/>
    < SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="_x5185__x5bb9_" ControlMode="New"/>
    < /td>
    < /tr>
    <tr>
    <!-- td タグ内に style="background-color:#CCFFCC"を追加、フォームタイトル下の<tr>~</tr>に移動します。-->
    <td width="190px" valign="top" class="ms-formlabel">
    < H3 class="ms-standardheader">
    < nobr>    メール通知</nobr>
    < /H3>
    < /td>
    <td width="400px" valign="top" class="ms-formbody">
    < SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="New" FieldName="_x30e1__x30fc__x30eb__x901a__x77" __designer:bind="{ddwrt:DataBind('i',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x30e1__x30fc__x30eb__x901a__x77')}"/>
    < SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="_x30e1__x30fc__x30eb__x901a__x77" ControlMode="New"/>
    < /td>
    < /tr>
    <tr id="idAttachmentsRow">
    < td nowrap="true" valign="top" class="ms-formlabel" width="20%">
    < SharePoint:FieldLabel ControlMode="New" FieldName="Attachments" runat="server"/>
    </td>
    < td valign="top" class="ms-formbody" width="80%">
    < SharePoint:FormField runat="server" id="AttachmentsField" ControlMode="New" FieldName="Attachments" __designer:bind="{ddwrt:DataBind('i','AttachmentsField','Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Attachments')}"/>
    < script>
    var elm = document.getElementById(&quot;idAttachmentsTable&quot;);
    if (elm == null || elm.rows.length == 0)
    document.getElementById(&quot;idAttachmentsRow&quot;).style.display=&apos;none&apos;;
    < /script>
    </td>
    </tr>
    < xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
    <tr>
    < td colspan="99" class="ms-vb">
    < span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view"></span>
    < /td>
    < /tr>
    < /xsl:if>
    < /table>

    フォーム編集後ソース
    編集前のソースで赤文字部分が編集後のソースでは、橙色背景色のソースコードになっています。
    ADS_hatanaka016.png
    <tableborder="1"cellspacing="1"width="100%">
    <!-- フォームのタイトルになる部分です。画像① -->
    <tr>
    < tdcolspan="4"valign="middle"style="text-align:center">
    < H1style="text-align:center;background-color:#FFFFCC;">    新規入力フォーム
    </H1>
    < /td>
    < /tr>
    <tr>
    <!-- 受付日項目の入力。画像② -->
    <tdwidth="100px"valign="top"class="ms-formlabel"style="background-color:#CCFFCC">
    < H3class="ms-standardheader">
    < nobr>    受付日</nobr>
    < /H3>
    < /td>
    < tdwidth="100px"valign="top"class="ms-formbody">
    < SharePoint:FormFieldrunat="server"id="ff2{$Pos}"ControlMode="New"FieldName="_x53d7__x4ed8__x65e5_"__designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x53d7__x4ed8__x65e5_')}"/>
    < SharePoint:FieldDescriptionrunat="server"id="ff2description{$Pos}"FieldName="_x53d7__x4ed8__x65e5_"ControlMode="New"/>
    </td>
    <!-- メール通知項目の入力。画像③ -->
    < tdwidth="100px"valign="top"class="ms-formlabel"style="background-color:#CCFFCC">
    < H3class="ms-standardheader">
    < nobr>    メール通知</nobr>
    < /H3>
    < /td>
    < tdwidth="100px"valign="middle"class="ms-formbody"style="text-align:center">
    < SharePoint:FormFieldrunat="server"id="ff4{$Pos}"ControlMode="New"FieldName="_x30e1__x30fc__x30eb__x901a__x77"__designer:bind=
    "{ddwrt:DataBind('i',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x30e1__x30fc__x30eb__x901a__x77')}"/>
    < SharePoint:FieldDescriptionrunat="server"id="ff4description{$Pos}"FieldName="_x30e1__x30fc__x30eb__x901a__x77"ControlMode="New"/>
    < /td>
    </tr>
    < tr>
    <!-- タイトル項目の部分です。画像④ -->
    < tdwidth="100px"valign="top"class="ms-formlabel"style="background-color:#CCFFCC">
    < H3class="ms-standardheader">
    < nobr>    タイトル<spanclass="ms-formvalidation">*</span>
    < /nobr>
    < /H3>
    < /td>
    < tdcolspan="3"width="400px"valign="middle"class="ms-formbody"style="text-align:center">
    < SharePoint:FormFieldrunat="server"id="ff1{$Pos}"ControlMode="New"FieldName="Title"__designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
    < SharePoint:FieldDescriptionrunat="server"id="ff1description{$Pos}"FieldName="Title"ControlMode="New"/>

    </td>
    </tr>
    <tr>
    <!-- 内容項目の部分です。画像⑤ -->
    <tdwidth="100px"valign="top"class="ms-formlabel"style="background-color:#CCFFCC">
    <H3class="ms-standardheader">
    <nobr>内容</nobr>
    </H3>
    </td>
    <tdcolspan="3"width="400px"valign="top"class="ms-formbody"style="text-align:left">
    <SharePoint:FormFieldrunat="server"id="ff3{$Pos}"ControlMode="New"FieldName="_x5185__x5bb9_"__designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x5185__x5bb9_')}"/>
    <SharePoint:FieldDescriptionrunat="server"id="ff3description{$Pos}"FieldName="_x5185__x5bb9_"ControlMode="New"/>
    </td>
    </tr>

    <!-- 添付ファイル項目の部分です。削除するとファイルが添付できなくなります。画像青枠-->
    <trid="idAttachmentsRow"><tdnowrap="true"valign="top"class="ms-formlabel"width="20%"><SharePoint:FieldLabelControlMode="New"FieldName="Attachments
    "runat="server"/></td><tdvalign="top"class="ms-formbody"width="80%"><SharePoint:FormFieldrunat="server"id="AttachmentsField"
    ControlMode="New"FieldName="Attachments"__designer:bind="{ddwrt:DataBind('i','AttachmentsField','Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Attachments')}"/><script>
    varelm=document.getElementById(&quot;idAttachmentsTable&quot;);
    if(elm==null||elm.rows.length==0)
    document.getElementById(&quot;idAttachmentsRow&quot;).style.display=&apos;none&apos;;
    </script></td></tr>
    <xsl:iftest="$dvt_1_automode='1'"ddwrt:cf_ignore="1">
    <tr>
    <tdcolspan="99"class="ms-vb">
    <spanddwrt:amkeyfield="ID"ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))"ddwrt:ammode="view"></span>
    </td>
    </tr>
    </xsl:if>
    </table>

  4. 編集が完了したら、タブを右クリックし「上書き保存」を選択します。
    ADS_hatanaka017.png

  5. フォームをカスタマイズしたリストを開き、「新規作成」ボタンをクリックし、カスタマイズが適用されているかを確認します。
    ADS_hatanaka018.png
    ADS_hatanaka019.png

 

カテゴリ： 開発/デザイン