SharePoint Designer 2013 を使ってフォームをカスタマイズする。

あけましておめでとうございます。今年もよろしくお願いいたします。

前回からだいぶ空いてしまいましたが、新年1発目、告知通りhtmlで簡単なフォームカスタマイズの方法を投稿しようと思います。

今回は枠のみをhtml で作成し、列については枠の中にコピペで移動させています。

カスタマイズ前
image

カスタマイズ後
image

  1. 該当のSharePoint リストをSharePoint Designer2013で開きます。
    image
    image
  2. フォームエリアの新規作成をクリックします。
    image
  3. フォームのファイル名、フォームの種類(今回はアイテム作成フォーム)を選択し、OKをクリックします。
    この際、既定フォームにしたい場合は「選択した種類の既定フォームとして設定」にチェックをつけます。
    image
  4. 作成したフォームのファイル名をクリックします。
    image
  5. フォームのソースが開きます。
    image
  6. <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 の
     

    フォーム編集前ソース
    <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>
    <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 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 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 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>

    フォーム編集後ソース
    <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>

  7. 編集が完了したら、タブを右クリックし保存を選択します。
    image

これで、フォームがカスタマイズすることができました。

image