Title: CRMプラグインの「案件」に部品を追加してカスタマイズするには

ここでは、次の「部品」(「フィールド」と呼びます)をCRMの「案件」に追加する方法を解説いたします。



カスタマイズする内容は、大きく分けて次の3つになります。

  1. 情報の入力:これらの情報を追加するために投稿/編集フォームに部品を追加する
  2. 情報の出力:これらの情報を画面に表示する
  3. その他:必要な設定など


注意

ここで紹介しているカスタマイズ方法は、カスタマイズにご興味のあるお客様への参考資料として紹介するものです。

この記事の内容は TeamPage 6.2.45 と CRM 1.1.1 を元に作成してありますが、異なるバージョンでは正しく動作しない倍があります。

また、カスタマイズに関するご質問は承っておりますが、お客様が行うカスタマイズ内容そのものはサポート対象外(動作保証外)ですのでご注意ください。

当社によるお客様専用のカスタマイズも承っておりますので、お気軽にご相談ください。





準備



プラグインのインストール場所



プラグインは、[サーバーセットアップ] > [プラグイン] ページでアップロードされると、TeamPage がインストールされた server フォルダ下の plugins フォルダに展開されます。

CRM プラグインは、plugins フォルダに com.traction.crm というフォルダ名で展開されます。CRM プラグインをカスタマイズするには、このフォルダに含まれているファイルを編集したり追加したりする必要があります。

上書きインストールに注意



注意点は、お客様のカスタマイズ内容が今後 CRM プラグインをインストールすると消えてしまう可能性があることです。

例えば、今後、当社が CRM プラグインのバグ修正などを行って新しいバージョンをリリースするとします。その新しいバージョンをインストールすると、修正版に含まれる諸々のファイルが同じ com.traction.crm フォルダに上書きインストールされます。せっかくカスタマイズしたファイルが上書きされ、変更内容が消えてしまう可能性があります。

それを避けるために、CRM プラグインのフォルダ名とプラグイン名を別のものに変更しておくと良いでしょう。

例えば、CRM プラグインのフォルダを com.traction.crm を jp.co.example.crm に変更します。すると、今後、当社の CRM プラグインをインストールしても、それは com.traction.crm フォルダとしてインストールされるので、jp.co.example.crm の内容が上書きされることはなくなります。

また、その中に含まれている plugin.properties ファイルをテキストエディターで開き、次のように display_name=name= を変更します。

display_name=#{@crm#plugin_display_name} (Custom Version)

#
# (中略)
# 

name=jp.co.example.crm


ただし、今後の当社による本家 CRM プラグインの変更内容をお客様のカスタマイズ版 CRM プラグインに反映させるには、両者を差分ツールなどを使って比較し、変更箇所を手動でカスタマイズ版 CRM プラグインの反映させる必要が生じます。

記事の詳細情報を確認するためのプラグイン



今回、いくつかの部品をフォームに追加しますが、それらの部品で入力された情報(例えば「保守料金」)が正しく案件記事に登録されたかどうかを確認するためのプラグインがあります。

Download798

こちらをダウンロード&インストールしてください。

関連記事: DocSDK520: Custom Entry Type、EntryClass、Index Entry Types の確認方法

config の内容をひとつの JSON ファイルにまとめる



TeamPage の投稿/編集フォームや、フォーム上の各部品、記事の「種類」などは、config フォルダ以下に、拡張子 .properties のファイルとして定義されています。

TeamPage がインストールされた server フォルダの下の config フォルダを見てみてください。



…など、いくつものフォルダにいくつもの定義ファイル(拡張子 .properties のファイル)があります。

CRM プラグインを作成するときは、config/data/forms で「案件」フォームの定義を行い、config/entry/classes で投稿される「案件」記事の定義を…と必要な定義ファイルを用意するのですが、フォルダやファイルの数が多くなって管理が大変になります。

そこで、フォルダの構造とファイルの内容を一つの crm.json ファイルにまとめ、config フォルダ直下に配置しています。(ただし、英語/日本語用のファイルは個別ファイルとして管理したほうが楽なので crm.json にはまとめず、config/i18n フォルダに個別のファイルとして置いてあります)

crm.json

部品の定義



CRM の「案件」フォームは、crm.json ファイルの config/data/forms セクション内の crm_goal オブジェクトで定義されています。

"crm_goal": {
  "__inherits": "goal",
  "display_name": "#{@crm#crm_goal_form_display_name}",
  "schema_elements": "project,title,property_due,status,color,content,attachments,property_crm_subject,crm_goal_rank,crm_goal_stage,property_crm_goal_inquiry,property_crm_budget,property_crm_budget_digitonly,property_crm_sales_revenue,property_crm_sales_revenue_digitonly,property_crm_gross_profit,property_crm_gross_profit_digitonly,crm_connects_goal_with_company,crm_connects_goal_with_contact,property_owners,property_members,tags,property_crm_goal_show_burnupchart,property_goal_dashboard_milestones_max,property_edit_desc,property_crm_first_letter,property_crm_goal_initiator",
  "form_title": "#{@crm#crm_goal_form_title}",
  "form_class": "project-dialog crm-dialog crm-goal-dialog",
  "form_save": "#{@crm#crm_goal_form_save}",
  "field_title_value": "[[ /token crm_goal_title ]]",
  "field_title_visible": "false",
  "field_property_crm_subject_required": "true",
  "field_crm_connects_goal_with_company_focus": "true",
  "field_property_crm_subject_description": "#{@crm#field_property_crm_subject_description}",
  "field_crm_connects_goal_with_contact_required": "false",
  "field_crm_connects_goal_with_contact_description": "",
  "field_crm_connects_goal_with_company_required": "false",
  "field_crm_connects_goal_with_company_description": "",
  "field_property_crm_goal_show_burnupchart_label": "#{@crm#field_property_crm_goal_show_burnupchart_label}",
  "field_property_goal_dashboard_milestones_max_label": "#{@crm#field_property_goal_dashboard_milestones_max_label}",
  "field_property_goal_dashboard_milestones_max_description": "#{@crm#field_property_goal_dashboard_milestones_max_description}",
  "field_property_crm_rank_label_name_bucket": "crm_goal_rank",
  "field_project_tabindex": "100",
  "field_goal_tabindex": "101",
  "field_milestone_tabindex": "102",
  "field_crm_connects_goal_with_company_tabindex": "1001",
  "field_crm_connects_goal_with_contact_tabindex": "1002",
  "field_property_crm_subject_tabindex": "1003",
  "field_property_due_tabindex": "1004",
  "field_color_tabindex": "1005",
  "field_crm_goal_rank_tabindex": "1006",
  "field_property_crm_goal_inquiry_tabindex": "1007",
  "field_crm_goal_stage_tabindex": "1008",
  "field_status_tabindex": "1009",
  "field_property_crm_budget_tabindex": "1010",
  "field_property_crm_sales_revenue_tabindex": "1011",
  "field_property_crm_gross_profit_tabindex": "1012",
  "field_content_tabindex": "1013",
  "field_attachments_tabindex": "1014",
  "field_tags_tabindex": "1015",
  "field_property_owners_tabindex": "1016",
  "field_property_members_tabindex": "1017",
  "field_property_crm_goal_show_burnupchart_tabindex": "1018",
  "field_property_goal_dashboard_milestones_max_tabindex": "1019",
  "field_property_edit_desc_tabindex": "1020",
  "sdl": "com.traction.sdl.crm.forms#goal",
  "entry_content_prepend": "[[ /token crm_goal_info ]]",
  "entry_content_append": "[[ /token crm_goal_info_more ]]",
  "entry_class": "crm_goal"
}


この中の schema_elements= は、フォームで利用可能な部品の名前を指定します。

例えば、project は「投稿先スペースの選択欄」、title は「タイトルの入力欄」、「property_due」は「締切日の選択欄」…といった具合です。

ここの schema_elements= に追加したい部品の名前を追加します。



契約タイプとメーカーはタグとして記事に付き、保守料金と保守満了日はエントリープロパティとして記事に埋め込まれます。エントリープロパティを使用する部品名は「property_」から始めます。

これらを追加した schema_elements= は次のようになります。

"schema_elements": "project,title,property_due,status,color,content,attachments,property_crm_subject,crm_goal_rank,crm_goal_stage,property_crm_goal_inquiry,property_crm_budget,property_crm_budget_digitonly,property_crm_sales_revenue,property_crm_sales_revenue_digitonly,property_crm_gross_profit,property_crm_gross_profit_digitonly,crm_connects_goal_with_company,crm_connects_goal_with_contact,property_owners,property_members,tags,property_crm_goal_show_burnupchart,property_goal_dashboard_milestones_max,property_edit_desc,property_crm_first_letter,property_crm_goal_initiator,crm_contract_type,crm_mfr,property_crm_maint_fee,property_crm_maint_due",


これで「このフォームでは、crm_contract_type、crm_mfr … の部品を使います」という設定ができました。

つづいて「では、これらの部品はどのような動作をするのか」という設定を行います。

ドロップダウン式でタグを選択する欄



crm_contact_type と crm_mfr は、ドロップダウン式のタグ選択欄になります。ドロップダウンに表示される選択肢はサーバー管理者がプラグイン設定ページで設定できるようにします。

上記で説明しましたように、部品の定義ファイルは本来 config/data/field/props フォルダに設置します。よって、CRM プラグインの場合は、crm.json ファイルの config/data/field/props セクションに新しいオブジェクトとして追加します。

入力用の部品



案件の投稿/編集フォームには、既にドロップダウン式でタグを選択する欄が用意されています。「ランク」と「ステージ」欄です。ここでは後者の「ステージ」をコピーし、新しい「契約タイプ」と「メーカー」の選択欄にします。



crm.json の config/data/field/props セクション内の crm_goal_stage オブジェクトをコピーし、crm_contract_type と crm_mfr として複製します。

"crm_goal_stage": {
  "type": "labelname_bucket_select",
  "entry_field": "crm_goal_stage"
},
"crm_contract_type": {
  "type": "labelname_bucket_select",
  "entry_field": "crm_contract_type"
},
"crm_mfr": {
  "type": "labelname_bucket_select",
  "entry_field": "crm_mfr"
},


いずれも type の値は labelname_bucket_select になります。これは、「この部品のタイプ(種類)は、タグの選択欄です」という意味です。

entry_field は、この部品を使って入力された値を表示するときの部品名を指定します。フォーム上で「入力」につかう部品と、記事に「出力」する部品とが分かれており、「この部品を使って入力された内容はこの部品を使って表示できます」という設定を行います。通常、タグ選択式の部品は、入力と出力とで同じ名前を使います。

出力用の部品



出力用の部品(エントリー フィールド)は、config/entry/fields/props で定義します。入力用部品(フォーム フィールド)と同じように crm_goal_stage のオブジェクトを流用します。

"crm_goal_stage": {
  "class": "com.traction.sdk.token.LabelNameBucketEntryField",
  "label_name_bucket": "crm_goal_stage",
  "filter_selectable": "true",
  "filter_group": "crm_goal",
  "filter_order": "5030",
  "display_name": "#{@crm#property_crm_stage_label}"
},
"crm_contract_type": {
  "class": "com.traction.sdk.token.LabelNameBucketEntryField",
  "label_name_bucket": "crm_contract_type",
  "filter_selectable": "true",
  "filter_group": "crm_goal",
  "filter_order": "5030",
  "display_name": "Contract Type"
},
"crm_mfr": {
  "class": "com.traction.sdk.token.LabelNameBucketEntryField",
  "label_name_bucket": "crm_mfr",
  "filter_selectable": "true",
  "filter_group": "crm_goal",
  "filter_order": "5030",
  "display_name": "MFR"
},


定義された部品がページ上で実行されたとき、画面にどのように表示(レンダリング)するのかを次の場所で設定します。



一般的な HTML 出力に使われる定義は html 内に、テキスト出力用の定義は text に置きます。

それぞれのセクション内に crm_goal_stage の設定がありますので、それを流用します。

"config/entry/fields/html": {
  "crm_goal_stage": {
    "sdl": "com.traction.sdl.fields.html#entry-labelname-bucket-value"
  },
  "crm_contract_type": {
    "sdl": "com.traction.sdl.fields.html#entry-labelname-bucket-value"
  },
  "crm_mfr": {
    "sdl": "com.traction.sdl.fields.html#entry-labelname-bucket-value"
  },
},

// 省略

"config/entry/fields/text": {
  "crm_goal_stage": {
    "sdl": "com.traction.sdl.fields.text#entry-labelname-bucket-value"
  },
  "crm_contract_type": {
    "sdl": "com.traction.sdl.fields.text#entry-labelname-bucket-value"
  },
  "crm_mfr": {
    "sdl": "com.traction.sdl.fields.text#entry-labelname-bucket-value"
  },
},


いずれも、次のような、画面出力に使う SDL ファイルや関数の場所を指定しているだけです。

"sdl": "com.traction.sdl.fields.text#entry-labelname-bucket-value"


ドット記号はフォルダ階層を表しています。階層の最後は .sdl ファイル名を表しており、半角シャープ記号は、そのファイル内の関数です。

ここの com.traction.sdl.fields.text#entry-labelname-bucket-value は、「com フォルダの中の、traction フォルダの中の、sdl フォルダの中の、fields フォルダの中の、text.sdl ファイルの中の entry-labelname-bucket-value 関数を使って、エントリーフィールドを表示しなさい」という意味になります。

とりあえず、「タグ式のエントリーフィールド(表示用の部品)の場合はこの設定になる」と考えていただければ結構です。

ラベル選択欄用の特別な定義



config/entry/fields/props ではエントリーフィールドの定義を行いましたが、その中に label_name_bucket の行がありました。

タグを使った部品の場合、「フォーム上の部品(入力)」と「画面上の部品(出力)」の他に、タグ選択部品用の特別な「バケツ」が必要になります。(記事に付けられたタグの中から、ドロップダウンに表示するタグを選んでおくため)

タグ用バケツの設定は、config/data/labelnamebuckets セクションに記述します。

ここにも crm_goal_stage 用の設定がありますので、これをコピーして流用します。

"config/data/labelnamebuckets": {

  // 省略

  "crm_goal_stage": {
    "class": "tsi.sdk.data.DynamicSettingValueLabelNameBucket",
    "store_type": "journal",
    "property_name": "crm_goal_stage"
  },
  "crm_contract_type": {
    "class": "tsi.sdk.data.DynamicSettingValueLabelNameBucket",
    "store_type": "journal",
    "property_name": "crm_contract_type"
  },
  "crm_mfr": {
    "class": "tsi.sdk.data.DynamicSettingValueLabelNameBucket",
    "store_type": "journal",
    "property_name": "crm_mfr"
  },

  // 省略

},


class で指定されている tsi.sdk.data.DynamicSettingValueLabelNameBucket は、「このラベル選択部品は、サーバー管理者がドロップダウンの選択肢を設定できるタイプです」という意味です。

store_type で、そのサーバー管理者用の設定が、プラグイン設定画面の「ジャーナル設定」欄に表示されるように、journal の値を指定しています。

property_name は設定の名前です。

さらに、案件記事の定義セクションにこれらのバケツの指定を追加します。

crm.json の config/entry/classes セクションにある crm_goal オブジェクト(下記)があります。

"crm_goal": {
  "__inherits": "goal",
  "display_name": "#{@crm#entry_class_crm_goal_display_name}",
  "newentry_form": "crm_goal",
  "editentry_form": "crm_goal",
  "editentry_singleentry_form": "crm_goal",
  "prefer_custom_entry_type": "false",
  "custom_entry_type": "goal",
  "newentry_link_text": "#{@crm#entry_class_crm_goal_newentry_link_text}",
  "editentry_link_text": "#{@crm#entry_class_crm_goal_editentry_link_text}",
  "labelname_buckets": "tags,todo,crm_goal_rank,crm_goal_stage",
  "reference_buckets": "crm_connects_goal_with_contact,crm_connects_goal_with_company",
  "diffsdl": "com.traction.sdl.crm.diff#goal"
}


labelname_buckets に「タグを使用する部品」の名前が並んでいます。

"labelname_buckets": "tags,todo,crm_goal_rank,crm_goal_stage",


ここに crm_contract_type と crm_mfr を追加します。

"labelname_buckets": "tags,todo,crm_goal_rank,crm_goal_stage,crm_contract_type,crm_mfr",


サーバー管理者用の設定の定義



サーバー管理者用のジャーナル設定の定義は、config/settings/props/journal セクションに記述します。ここにも crm_goal_stage の設定があるので、これをコピーして crm_contract_type と crm_mfr に流用します。

"config/settings/props/journal": {

// 省略

  "crm_goal_stage": {
    "class": "tsi.sdk.settings.LabelNameBucketData",
    "display_name": "#{@crm#crm_goal_stage_display_name}",
    "description": "#{@crm#crm_goal_stage_description}",
    "tip": "#{@crm#crm_goal_stage_tip}",
    "sdleditor": "com.traction.sdl.admin.settings#labelname-bucket",
    "edit_type": "false",
    "edit_name": "false",
    "edit_display_name": "true",
    "labelname_list_size": "50",
    "usedefault": "true",
    "default": "type=list,name=crm_goal_stage,display_name=#{@crm#crm_goal_stage_list_display_name},list=#{@crm#crm_goal_stage_list_opt1}\\,#{@crm#crm_goal_stage_list_opt2}\\,#{@crm#crm_goal_stage_list_opt3}\\,#{@crm#crm_goal_stage_list_opt4}\\,#{@crm#crm_goal_stage_list_opt5}\\,#{@crm#crm_goal_stage_list_opt6}",
    "bucket_name": "crm_goal_stage"
  },
  "crm_contract_type": {
    "class": "tsi.sdk.settings.LabelNameBucketData",
    "display_name": "Contract Type Tag Group",
    "description": "Please fill-in tag names that will be used as the contract types.",
    "tip": "Each must be comma-separated.",
    "sdleditor": "com.traction.sdl.admin.settings#labelname-bucket",
    "edit_type": "false",
    "edit_name": "false",
    "edit_display_name": "true",
    "labelname_list_size": "50",
    "usedefault": "true",
    "default": "type=list,name=crm_contract_type,display_name=Contract Type,list=",
    "bucket_name": "crm_contract_type"
  },
  "crm_mfr": {
    "class": "tsi.sdk.settings.LabelNameBucketData",
    "display_name": "Manufacturer Tag Group",
    "description": "Please fill-in tag names that will be used as the manufacturer names.",
    "tip": "Each must be comma-separated.",
    "sdleditor": "com.traction.sdl.admin.settings#labelname-bucket",
    "edit_type": "false",
    "edit_name": "false",
    "edit_display_name": "true",
    "labelname_list_size": "50",
    "usedefault": "true",
    "default": "type=list,name=crm_mfr,display_name=Manufacturer,list=",
    "bucket_name": "crm_mfr"
  },

// 省略

}


これで設定の定義ができました。

次に、プラグインの設定画面にこれらの設定項目が表示されるようにします。

com.traction.crm フォルダにある plugin.properties の db_settings= に crm_contract_type と crm_mfr を追加します。

db_settings=crm_locale,crm_preferred_post_project,crm_contact_title_format,crm_contact_use_pagenames,crm_company_use_pagenames,crm_contact_index_view_entry_format,crm_subtabs_allprojects,crm_subtab_companies_table_text,crm_subtab_contacts_table_text,crm_subtab_goals_table_text,crm_subtab_companies_feed_text,crm_subtab_contacts_feed_text,crm_subtab_goals_feed_text,crm_subtab_overview_text,crm_show_addmenu_allprojects,crm_show_addmenu_userprofile,crm_company_cat,crm_company_rank,crm_goal_rank,crm_goal_stage,crm_company_datatables_fields,crm_company_datatables_orderindex,crm_contact_datatables_fields,crm_contact_datatables_orderindex,crm_goal_datatables_fields,crm_goal_collapse_dashboard_info,crm_contract_type,crm_mfr


数字をテキスト入力する欄



入力用の部品



property_crm_maint_fee は数字のみを受け付けるテキスト入力欄です。

このフォーム上の部品の定義を crm.json ファイルの config/data/field/props セクションに新しいオブジェクトとして追加します。

数字のみを受け付けるテキスト入力欄の例として property_crm_budget が既にありますので、これをコピーして下記のように変更すれば良いでしょう。

"config/data/field/props": {

  // 省略

    "property_crm_maint_fee": {
      "type": "number",
      "entry_field": "crm_maint_fee",
      "class": "maint_fee"
    },

  // 省略

},


出力用の部品



出力用の部品(エントリー フィールド)は、config/entry/fields/props で定義します。エントリープロパティとして保存されたデータを取り出す、EntryPropertyEntryField を指定します。

"crm_maint_fee": {
  "class": "com.traction.sdk.token.EntryPropertyEntryField",
  "display_name": "Maintenance Fee",
  "diff_value_format_sdl": "com.traction.sdl.token.feedsummary#format-generic",
  "filter_selectable": "false"
},


定義された部品がページ上で実行されたとき、画面にどのように表示(レンダリング)するのかを次の場所で設定します。



一般的な HTML 出力に使われる定義は html 内に、テキスト出力用の定義は text に置きます。エントリープロパティとして保存されたデータをレンダリングする、entry-property-value 関数を指定します。

"config/entry/fields/html": {

  // 省略

  "crm_maint_fee": {
    "sdl": "com.traction.sdl.fields.html#entry-property-value"
  },

  // 省略

},

// 省略

"config/entry/fields/text": {

  // 省略

  "crm_maint_fee": {
    "sdl": "com.traction.sdl.fields.text#entry-property-value"
  },

  // 省略

},


日付を選択する欄



入力用の部品



property_crm_maint_due は「保守満了日」用の日付入力欄です。

このフォーム上の部品の定義を crm.json ファイルの config/data/field/props セクションに新しいオブジェクトとして追加します。

"config/data/field/props": {

  // 省略

    "property_crm_maint_due": {
      "type": "date",
      "entry_field": "crm_maint_due",
      "class": "maint_due"
    },

  // 省略

},


追加の日付情報を扱うために、案件記事の定義(config/entry/classes 内の "crm_goal" オブジェクト)に「この記事ではこのような日付を扱いますよ」という設定を追加します。

"config/entry/classes": {
  "crm_goal": {

    // 省略

    "standard_date_crm_maint_due_entry_property_name": "crm_maint_due",
    "standard_date_crm_maint_due_allday_entry_property_name": "crm_maint_due_allday",
    "standard_date_crm_maint_due_allday_entry_property_default": "true"

  }
}


出力用の部品



出力用の部品(エントリー フィールド)は、config/entry/fields/props で定義します。標準的な日付を扱うための EntryStandardDateEntryField を指定します。

"config/entry/fields/props": {

  // 省略

  "crm_maint_due": {
    "class": "com.traction.sdk.token.EntryStandardDateEntryField",
    "display_name": "Maint  Due",
    "date_name": "crm_maint_due",
    "diff_value_format_sdl": "com.traction.sdl.token.feedsummary#format-due",
    "filter_selectable": "false"
  },

  // 省略

},


そして、次の箇所にレンダリング用の定義を追加します。



一般的な HTML 出力に使われる定義は html 内に、テキスト出力用の定義は text に置きます。一般的な日付をレンダリングする、entry-standard-date 関数を指定します。

"config/entry/fields/html": {

  // 省略

  "crm_maint_due": {
    "sdl": "com.traction.sdl.fields.html#entry-standard-date"
  },

  // 省略

},

// 省略

"config/entry/fields/text": {

  // 省略

  "crm_maint_due": {
    "sdl": "com.traction.sdl.fields.text#entry-standard-date"
  },

  // 省略

},


フォームの動作テスト



SDL レイアウトを一度無効にする



上記で定義・設定した部品が投稿/編集フォームに表示されるかどうかを確認するため、一度、SDL ファイルによるレイアウト設定を無効にして、フォームの部品を「すっぴん」状態にします。

config/data/forms の crm_goal オブジェクトの sdl の値を空(から)にします。

下記のように、既存のものをコメントアウトし、値が空の行を追加するとわかりやすいです。

"config/data/forms": {

  "crm_goal": {
    // 省略

    //"sdl": "com.traction.sdl.crm.forms#goal",
    "sdl": "",

    // 省略
  }

},


このように sdl 行を空にすると、schema_elements で指定された部品を上から順番に並べただけのシンプルなレイアウトのフォームになります。(部品を 1 行に 2 列並べるなどする場合は、SDL によるレイアウトが必要です。)

「新しい案件」メニューからフォームを表示し、



…の部品がフォーム上に表示されることを確認します。

SDL レイアウトを再び有効にする



部品が表示されることを確認したら、sdl を元に戻し、com フォルダの下の、traction フォルダの下の、sdl フォルダの下の、crm フォルダの下の、forms.sdl ファイルをテキストエディターで開きます。

次の goal-rows 関数でフォームのレイアウトが決められています。

<sdl.function name="goal-rows">
  <fm#row-1col rowClass="fm-row" field="crm_connects_goal_with_company" colspan="3" />
  <fm#row-1col rowClass="fm-row" field="crm_connects_goal_with_contact" colspan="3" />
  <fm#row-1col rowClass="fm-row" field="property_crm_subject" colspan="3" />
  <fm#row-2col fieldName1="property_due" class1="due" fieldName2="color" class2="color" />
  <fm#row-2col fieldName1="crm_goal_rank" class1="rank" fieldName2="property_crm_goal_inquiry" class2="inquiry" />
  <fm#row-2col fieldName1="crm_goal_stage" fieldName2="status" />
  <fm#row-2col rowClass="budget" fieldName1="property_crm_budget" />
  <fm#row-2col rowClass="revenue" fieldName1="property_crm_sales_revenue" />
  <fm#row-2col rowClass="profit" fieldName1="property_crm_gross_profit" />
  <fm#row-1col rowClass="fm-row" field="content" class="vtop" colspan="3" />
  <fm#row-1col rowClass="fm-row" fieldName1="tags" class1="g" fieldName2="attachments" colspan="3" />
  <fm#row-1col rowClass="fm-row" field="property_owners" class="u" colspan="3" />
  <fm#row-1col rowClass="fm-row" field="property_members" class="u" colspan="3" />
  <fm#row-1col rowClass="fm-row" field="property_crm_goal_show_burnupchart" class="m" colspan="3" />
  <fm#row-1col rowClass="fm-row" field="property_goal_dashboard_milestones_max" class="m" colspan="3" />
  <fm#row-edit-description />
</sdl.function>


1行にひとつの部品を左右に広げて表示するには次のようにします。rowClass= は指定してもしなくても構いません。

<fm#row-1col rowClass="行クラス名" field="部品の名前" colspan="3" />


1行にふたつの部品を左右に並べて表示するには、次のようにします。rowClass=, class1=, class2= は指定しなくても構いません。

<fm#row-2col rowClass="行クラス名" fieldName1="部品名(1)" class1="部品(1)のクラス名" fieldName2="部品名(2)" class2="部品(2)のクラス名" />


ここでは、次のように、保守満了日、契約タイプ、メーカー、保守料金を配置することにします。



それを行うための goal-rows 関数は次のようになります。

<sdl.function name="goal-rows">
  <fm#row-1col rowClass="fm-row" field="crm_connects_goal_with_company" colspan="3" />
  <fm#row-1col rowClass="fm-row" field="crm_connects_goal_with_contact" colspan="3" />
  <fm#row-1col rowClass="fm-row" field="property_crm_subject" colspan="3" />

  <!--- ここに「保守満了日」と「契約タイプ」フィールドを表示 -->
  <fm#row-2col rowClass="fm-row" fieldName1="property_crm_maint_due" fieldName2="crm_contract_type" />

  <fm#row-2col fieldName1="property_due" class1="due" fieldName2="color" class2="color" />
  <fm#row-2col fieldName1="crm_goal_rank" class1="rank" fieldName2="property_crm_goal_inquiry" class2="inquiry" />
  <fm#row-2col fieldName1="crm_goal_stage" fieldName2="status" />

  <!--- 「予算」の右側に「メーカー」フィールドを表示 -->
  <fm#row-2col rowClass="budget_mfr" fieldName1="property_crm_budget" fieldName2="crm_mfr" />

  <!--- 「売上」の右側に「保守料金」フィールドを表示 -->
  <fm#row-2col rowClass="revenue_maint_due" fieldName1="property_crm_sales_revenue" fieldName2="property_crm_maint_fee" />

  <fm#row-2col rowClass="profit" fieldName1="property_crm_gross_profit" />
  <fm#row-1col rowClass="fm-row" field="content" class="vtop" colspan="3" />
  <fm#row-1col rowClass="fm-row" fieldName1="tags" class1="g" fieldName2="attachments" colspan="3" />
  <fm#row-1col rowClass="fm-row" field="property_owners" class="u" colspan="3" />
  <fm#row-1col rowClass="fm-row" field="property_members" class="u" colspan="3" />
  <fm#row-1col rowClass="fm-row" field="property_crm_goal_show_burnupchart" class="m" colspan="3" />
  <fm#row-1col rowClass="fm-row" field="property_goal_dashboard_milestones_max" class="m" colspan="3" />
  <fm#row-edit-description />
</sdl.function>


レイアウトどおりにフォームが表示されることを確認します。



詳細テーブルに表示



新しい部品で入力されたデータを記事に表示するカスタマイズを行います。

【完成イメージ図】



この「基本情報」テーブルは、下記の crm-goal-info-table 関数で作られています。

<sdl.function name="crm-goal-info-table">
  <div class="crm-goal-info-container">
    <table class="crm-goal-info">
      <#row-2cols rowClass="due" fieldName1="due" type1="due" />
      <tr class="company-contact">
        <td class="company l td1"><i></i>#{@crm#crm_connects_goal_with_company_label}</dt>
        <td class="company v td2"><#crm-related-entries direction="outgoing" verb="::*:response:relates" search="x(crm_company)"><#entry-title-and-link /></#crm-related-entries></dd>
        <td class="contact l td3"><i></i>#{@crm#crm_connects_goal_with_contact_label}</dt>
        <td class="contact v td4"><#crm-related-entries direction="outgoing" verb=":*:response:relates" search="x(crm_contact)"><#entry-title-and-link /></#crm-related-entries></dd>
      </tr>
      <#row-2cols rowClass="stage_rank" fieldName1="crm_goal_stage" type1="filtered_feed" fieldName2="crm_goal_rank" type2="filtered_feed" />
      <#row-2cols rowClass="inquiry" fieldName1="crm_goal_inquiry" type1="filtered_feed" />
      <#row-2cols rowClass="budget" fieldName1="crm_budget" type1="accounting" />
      <#row-2cols rowClass="revenue" fieldName1="crm_sales_revenue" type1="accounting" />
      <#row-2cols rowClass="profit" fieldName1="crm_gross_profit" type1="accounting" />
      <#row-owners />
      <#row-members />
    </table>
  </div>
</sdl.function>


保守満了日、契約タイプ、メーカー、保守料金を表示するため、次のように変更します。

<sdl.function name="crm-goal-info-table">
  <div class="crm-goal-info-container">
    <table class="crm-goal-info">
      <#row-2cols rowClass="due" fieldName1="due" type1="due" fieldName2="crm_maint_due" type2="due" />
      <tr class="company-contact">
        <td class="company l td1"><i></i>#{@crm#crm_connects_goal_with_company_label}</dt>
        <td class="company v td2"><#crm-related-entries direction="outgoing" verb="::*:response:relates" search="x(crm_company)"><#entry-title-and-link /></#crm-related-entries></dd>
        <td class="contact l td3"><i></i>#{@crm#crm_connects_goal_with_contact_label}</dt>
        <td class="contact v td4"><#crm-related-entries direction="outgoing" verb=":*:response:relates" search="x(crm_contact)"><#entry-title-and-link /></#crm-related-entries></dd>
      </tr>
      <#row-2cols rowClass="stage_rank" fieldName1="crm_goal_stage" type1="filtered_feed" fieldName2="crm_goal_rank" type2="filtered_feed" />
      <#row-2cols rowClass="contract_type_mfr" fieldName1="crm_contract_type" type1="filtered_feed" fieldName2="crm_mfr" type2="filtered_feed" />
      <#row-2cols rowClass="inquiry" fieldName1="crm_goal_inquiry" type1="filtered_feed" />
      <#row-2cols rowClass="budget_maint_fee" fieldName1="crm_budget" type1="accounting" fieldName2="crm_maint_fee" type="accounting" />
      <#row-2cols rowClass="revenue" fieldName1="crm_sales_revenue" type1="accounting" />
      <#row-2cols rowClass="profit" fieldName1="crm_gross_profit" type1="accounting" />
      <#row-owners />
      <#row-members />
    </table>
  </div>
</sdl.function>


テーブルに変更が反映されたことを確認します。



その他、設定など



国際化・日本語化



上記では、新しく追加した部品の見出しは「Contract Type」や「MFR」などとなっていました。

英語ではなく日本語を表示するには、日本語化したい部分をまず国際化(いろいろな言語で表示できるようにすること)し、config/i18n/resources フォルダにある言語ファイルに対応する項目を追加します。

詳しくは、下記リンク先ページを参照してください。



その他、カスタマイズの参考記事







Attachments:
crm.json.png
image01.png
goal_info_table_1.png
form1.png
form2.png
info_table_after.png
関連記事
Article: DocCRM96 (permalink)
Date: 2020/05/08; 15時37分28秒 JST

Author Name: TeamPage サポート
Author ID: jpbo