SharePoint Designer でお知らせ 表示フォーム デザイン変更例

SharePoint Designer でお知らせ リストの表示フォームのデザインを次のように変更する例です
<SharePoint 2010 例
>
image

下記手順は SharePoint Designer 2010 のものですが、SharePoint Designer 2013 でもデザインビューは利用できませんが、コードレベルで同様のことは可能です。
<SharePoint 2013 例>
image

■ 参考手順

1.SharePoint Designer 2010 で対象リストの [フォーム] 一覧を開きます。
リボンから [表示用のフォーム] をクリックします
image
2.[新しいリスト フォームの作成] ダイアログが開くので、ファイル名を任意につけ、[OK] をクリックします。
     image
3.作成したリストフォーム (aspx ファイル) をクリックしてエディターで開きます。 [デザイン] モードに切り替えます。
4.表示フォーム内容の上下に [閉じる] ボタンが用意されていますが、フォーム内容が少ない (縦幅がそんなに多くない)
ため、上部の [閉じる] ボタン は削除したいと思います。
[閉じる] ボタンが表示されている行を範囲選択し、右クリック ― [削除] – [行の削除] をクリックします。
5.ラベル部分の列を削除します。ラベル内容を右クリック – [削除] – [列の削除] をクリックします。
image
image
6.[分割] モードに切り替え、デザイン画面内で [タイトル] をクリックし、タイトル欄に相当するソースコードを探します。
image
7.タイトル欄に相当するソースコードを次のように変更します。 

<変更前>
<td width=”400px” valign=”top” class=”ms-formbody”>
<xsl:value-of select=”@Title” /></td>

<変更後>
<td style=”padding:5px”>
<p style=”font-family: Meiryo UI; font-size: 14px; border-bottom: dotted 1px #000088; border-left: solid 8px #000088;padding-left:10px”><xsl:value-of select=”@Title” /></p></td>

8.デザイン画面内で [本文] をクリックし、本文欄に相当するソースコードを探します。
image
9. 本文欄に相当するソース コードを次のように変更します。   

<変更前>
<td width=”400px” valign=”top” class=”ms-formbody”>
<xsl:value-of select=”@Body” disable-output-escaping=”yes” /></td>

<変更後>
<td style=”padding-left:10px; font-family: Meiryo UI;”>
<xsl:value-of select=”@Body” disable-output-escaping=”yes” /></td>

10. デザイン画面内で [有効期限] をクリックし、有効期限欄に相当するソースコードを探します。
11. 有効期限欄に相当するソース コード を次のように変更します。     

<変更前>
<td width=”400px” valign=”top” class=”ms-formbody”>
<xsl:value-of select=”@Expires” /></td>

<変更後>
<td style=”padding-right:20px;text-align:right;font-family: Meiryo UI;”>
有効期限:<xsl:value-of select=”ddwrt:FormatDate(string(@Expires) ,1041 ,3)” /> </td>

12. リボンを非表示とするためスタイルを追加します。リボン内の [ホーム] タブの [詳細モード] をクリックします。
13. ソースコード内で、PlaceHolderBodyAreaClass という ID の ContentPlaceHolder タグ内のスタイル タグに、
スタイルを追加します。(赤字部分)     

<asp:Content ContentPlaceHolderId=”PlaceHolderBodyAreaClass” runat=”server”>
<style type=”text/css”>
.ms-bodyareaframe {
padding: 8px;
border: none;
}
#s4-ribbonrow{display:none;
}
</style>
</asp:Content>

14. 上書き保存します。上書き保存時に、警告ダイアログが表示された場合、[OK] をクリックします。
15. [フォーム] をクリックし、フォーム一覧に戻ります。
image
16. フォームの一覧で、追加したリストフォーム (aspx ファイル) を選択肢、[既定に設定] をクリックします。
image     

動作確認すると、表示フォームのデザインが変更され、表示フォーム内のリボンが非表示となっていることが確認できます。

奥田 Bunny

広告

[SharePoint Online/SharePoint Server 2013] JS リンクでリストビューに条件付き書式設定

SharePoint 2013 では SharePoint Designer 2013 でリストビューを開いても、2010 では利用できる [条件付き書式] 機能は利用できません。SPD 上からメニューもなくなっています。
JS リンクを利用して条件付き書式を設定する例をご紹介します。

<設定例>
image

まず、用意する JS ファイルの内容はこんな感じです。

(function () {

var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.OnPostRender = Condition;
   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

function Condition(ctx){

for (i = 0; i < ctx.ListData.Row.length; i++) {
if (ctx.ListData.Row[i][“FieldName“]) {

if (ctx.ListData.Row[i][“FieldName“].indexOf(‘AZ‘) != -1) {

var rowId = GenerateIIDForListItem(ctx, ctx.ListData.Row[i]);
var trElement = document.getElementById(rowId);
trElement.style.backgroundColor = “#FFFF00“; }

} } }

● FieldName : 条件に利用したい列の内部名
AZ : 列に含まれる値 (部分一致も可)
#FFFF00 : 条件に一致する際のアイテムの背景色

[適用方法]
1. JS ファイルをマスター ページギャラリーにでもアップロードします。

–  アップロード時にプロパティの編集画面でコンテンツ タイプは何を選んでもいいです。
–  アップロードしたファイルはメジャーバージョンに発行します。

2. JS リンクを適用させたいビューを、[設定] – [ページの編集] をクリックし、編集モードに切り替えます。
3. ビュー内に配置されているリスト ビュー Web パーツで、[Web パーツの編集] をクリックし、 Web パーツの設定画面を表示します。
4. [その他] カテゴリーにある [JS リンク] に js ファイルへのパスを次のように指定し、[OK] をクリックします。
 ~sitecollection/_catalogs/masterpage/ファイル名.js
5. [ページ] タブから [編集の終了] をクリックします。

以上、JS リンクで条件付き書式を設定する内容でした。JS リンクで、アイテム全体に対するスタイル設定を行いたい場合の参考 (OnPostRender の利用) にもいただけると思います。

奥田 うさぎ

[SharePoint 2010] SPD 2010 でリストビューに条件付き書式設定

SharePoint Server 2010 で、リストビューに条件付き書式を設定する方法です。SharePoint Designer 2010 を利用します。

<例>
image

1.SharePoint Designer で対象のサイトを開きます。
2.[サイト オブジェクト] から [リストとライブラリ] をクリックして、リストとライブラリの一覧を開きます。
3.条件付き書式を設定したいリストをクリックして開きます。
image

4.リストが開きます。[ビュー] カテゴリーから条件付き書式を設定したいビューをクリックして開きます。
image

5.ビューがエディター画面で開いたら、[デザイン] ビューに切り替えます。
image
6.ビュー内の任意の場所をクリックして選択し、リボン内に [リストビュー ツール] タブを表示させます。
image
7.[リスト ビュー ツール] – [オプション] タブにある [条件付き書式] – [行の書式設定] をクリックします。
image

8.[条件基準] ダイアログ ボックスが開きます。任意の条件を指定します。
image
9.[スタイルの設定] をクリックします。
10.[スタイルの変更] ダイアログ ボックスが開きます。設定したいスタイルを指定します。
[背景] カテゴリーで [background-color] に任意の色を指定し、[OK] をクリックします。
image
11.上書き保存します。

 

以上、SharePoint 2010 での Tips でした。
これ SharePoint Designer 2013 では [条件付き書式] メニューがなくなってるので、同様の操作では設定できません。別の方法でカスタマイズすることになります。次回 SharePoint 2013 で条件付き書式の設定方法を投稿します。

奥田 うさぎ

Office 365 SharePoint サイト [Office 365] ロゴ、リンク先の変更 (マスターページに CSS を組み込む)

またまた前記事 「Office 365 SharePoint サイト [Office 365] ロゴ、リンク先の変更 (マスターページに js を組み込む)」 のバリエーション違いです。

js ではなく、CSS をマスターページに組み込みたい場合、素直に対応する HTML 内に <style> タグを入れると、master に内容が反映された際に、エラーとなります。さて、どうやっていれたらいいかご存じでしょうか?

回答例その1、「外部 CSS にする」 これ大正解です。ただ、少量の CSS の場合等、マスターページに組み込んでしまいたい場合もあるかと思います。下記は、html 内に css を組み込んで、対応する master に問題なく反映させる際に Tips として活用ください。意外でもないと思いますが、やり方どこにも見つけられなかったりします。。

下記例は、左上の Office 365 ロゴを、任意のロゴ画像に変更している例です。
code0602_CSSLogo

前記事の手順を参考に、手順7挿入する js の変わりに、下記のように CSS を挿入ください。

code0602_CSS

<!–MS:<style type="text/css">—>
.o365cs-nav-leftAlign
{
   background-image:url
(‘
Crie.png’);
   background-repeat: no-
repeat !important;}
.wf-o365-o365logo{display:none !important;}
<!–ME:</style>—>

奥田 うさぎ

Office 365 SharePoint サイト [サイト] メニューのリンク先変更

前記事 「Office 365 SharePoint サイト [Office 365] ロゴ、リンク先の変更 (マスターページに js を組み込む)」 のバリエーション違いです。

先日 de:code でお会いした方からリクエストいただいた内容なのですが、Office 365 サイトで、右上に表示される [サイト] メニュー。クリックすると、自分がフォローしているサイト一覧画面に遷移する動作が既定です。

code0602_SIte

この [サイト] メニューをクリックした際に、任意の URL に遷移するようできないか? というお題です。

前記事の手順を参考に、手順7で挿入する js のみ下記に変更ください。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
     $( document ).ready(function() {
         $(‘#O365_MainLink_ShellSites’).attr(‘href’,’/‘);
     });
</script>

 ※ クリック先としたい URL は任意のものに変更ください。赤字のところ

奥田 うさぎ

Office 365 SharePoint サイト [Office 365] ロゴ、リンク先の変更 (マスターページに js を組み込む)

こんにちは、奥田です。今日は Office 365 サイトのデザイン カスタマイズ ネタです。

code0602_1

Office 365 サイトの左上部に表示される Office 365 ロゴについて、リンク内容を変更する Tips です。
マスターページに javascript を組み込む Tips としても活用いただけると思います。

オンプレ SharePoint Server 2013 ではタグ構造が異なるため、ご紹介している javascriptでは動作しません。
対象のタグ ID を見つけてアレンジいただく or 太田さんのステキ Blog にオンプレの場合 PowerShell にて左上部の SharePoint ロゴを変更できる方法を記載されていますので、ご参考に。
   
idea.ToString() 「SharePoint 2013 左上の製品ロゴを変更する

 サイト コレクション機能の [発行インフラストラクチャ]、サイト機能の [発行機能] がアクティブ化されている
   トップ レベル サイトで操作してください。

1.マスターページ ギャラリーをエクスプローラーで開く

2.seattle.html をデスクトップ等任意の場所 (ローカルPC上) にドラッグアンドドロップしてコピー

3.デスクトップ等任意の場所にコピーした html ファイルの名前を変更。(例:myseattle.html)

4.名前を変更後の html (myseatle.html) を、エクスプローラーで開いたマスターページギャラリー内に
     ドラッグアンド ドロップしてアップロード

5.アップロード後、しばらく待つと、対応するマスターページ (myseattle.master) が自動生成される

6.マスターページ ギャラリー内のHTML(myseattle.html)を、任意のエディターで開く (メモ帳でもOK)

7.<!—SPM からはじまるコメント タグが複数行見つけられます。
     それらの次行に、下記コードを追加 
(必要に応じて、表示する文字列やリンク先は変更ください)
  code0602

   <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script&gt;
   <script type="text/javascript">
       $(document).ready(function () {
           $(‘#O365_MainLink_Logo’).text(‘ホーム’);
           $(‘#O365_MainLink_Logo’).attr(‘href’, ‘/’);
           $(‘#O365_MainLink_Logo’).attr(‘aria-label’, ‘ポータルトップに戻る’);
           $(‘#O365_MainLink_Logo’).attr(‘style’, ‘color:white;’);
     });
    </script>

8.html を上書き保存

9.ブラウザーでマスターページ ギャラリーを開き、HTML (myseattle.html) をメジャーバージョンに発行

10.サイトのマスターページをこれに変更
    code0602_2

少し宣伝も、、   上記操作がどういうしくみを利用して、なにをしているかよくわからない方へ

  ぜひ、弊社トレーニング コース CI303-H SharePoint 2013 サイト デザイン開発 のご受講をおすすめします!
  しくみがわかれば、今回の例以外に、画面のここをこう変えたいというご要望があった際に、まず、できることか/できないことか
  の判断がつくようになり、自分でその方法がわかるようになります!
  少なくても、こういったBlog記事によくあるサンプルコードの組み込み方がわかるようになります。

  ということで、現在弊社で人気No.3 のトレーニング コースのご紹介でした。

以上、奥田でした うさぎ

SharePoint ページ編集時にフォント種類やフォントサイズ等を追加する

奥田です。
セミナーにきていただいたお客様からいただいた質問から、今日は SharePoint ページの編集時に選択できるフォント種類やサイズ、色等を追加する Tips をご紹介します。

代替 CSSでも、マスターページに追加でも、マスターページに外部 CSS 参照追加でも、かまいませんので、次のような  CSS を利用できるよう追加ください。

<CSS サンプル>

/*フォント種類*/
.ms-rteFontFace-cust
{
-ms-name:"Meiryo UI";
font-family: ‘Meiryo UI’;
}

/*フォントサイズ*/
.ms-rteFontSize-custFontSize14{
    font-size:14px;
}

.ms-rteFontSize-custFontSize16{
    font-size:16px;
}

/*フォントカラー*/
.ms-rteForeColor-custForeColorPink{
    color:#FCF;
    -ms-name:"";
    -ms-color:"カスタムピンク";
}

/*ハイライトカラー*/
.ms-rteBackColor-custBackColorPink{
    background-color:#FCF;
    -ms-name:"";
    -ms-color:"カスタムピンク";
}

/*ページ要素*/
DIV.ms-rteElement-custElement{
    -ms-name:"オクダカスタム";
}
.ms-rteElement-custElement{
    border-bottom:1px dotted #000099;
    border-left:8px solid #000099;
    padding-left:5px;
    font-size:16px;
}

結果 ↓

Add1 Add2
Add3 Add4

Add5

画面ショットは SP 2010 ですが、 SP 2013 でも同様のことが可能です。

奥田でした うさぎ