Tech Sketch Bucket of Technical Chips by TIS Inc.

SugarCRMをお気軽にカスタマイズしてみた その2

Pocket

前回の記事 ではスタジオ機能を使った既存モジュールのカスタマイズについて触れました。
今回はもう一つの開発者向けツール「モジュールビルダー」を利用して、新機能の追加を行ってみます。


「画像」モジュールを作ってみる

中古車の売買などで商品写真と商談データを結びつけて管理したい、という用途を想定してみました。
標準モジュールの「ドキュメント」でのアップロード機能と似ていますが、アップロードした画像はファイル名のリンク表示でなく、ページ内に直接表示したいと思います。

元ネタにする「ドキュメント」モジュール
  • 詳細ビュー
    2012082310401700.JPG
  • 一覧ビュー
    2012082310241300.JPG

まずは、ツールだけでどこまで作れるか、やってみます。

パッケージの設定

最初に行うのはパッケージ作成です。パッケージとはいくつかのモジュールを一まとめで管理する単位で、SugarCRMにインストールする場合もこのパッケージ単位で行います。親子関係をもつモジュールも同じパッケージで管理していれば一気に配布/インストールが可能です。
さて、モジュールビルダーを開くと、真ん中にパッケージ一覧が表示されますが、初回は作成済みパッケージが存在しないので、「新規パッケージ」アイコンだけが表示されています。アイコンをクリックして新規パッケージを作成します。
なお、パッケージ名はあとからいくらでも変更できますが、キーはデータベースのテーブル名/クラス名/ディレクトリ名などパッケージ内のいたるところで接頭辞として使われるため、一度設定すると変更できません。注意しましょう。
例えば、キー値を「sample」とした場合、このパッケージ内で作成された「hoge」モジュールは「sample_hoge」というモジュール名になります。

2012080901371900.JPG

モジュールタイプを選択する

作成したパッケージのアイコン→新規モジュールアイコンで作成するモジュールのタイプを決定します。

類似機能を基にしたテンプレートがいくつか用意されているので、その中から選択します。
「標準のXXと似たモジュールを追加したい」場合に近いタイプを選択することで、あらかじめ用意されたフィールドとレイアウトのテンプレートを利用することが出来ます。

タイプ 代表的なフィールド 類似モジュール
セールス リードソース、商談ステージ、合計、確度 商談
ファイル ファイル名、文書タイプ、公開日 ドキュメント
ベーシック 名前、担当ユーザ、作成日付、詳細
会社情報 会社名、業種、請求先 取引先
問合せ 番号、ステータス、優先度、詳細 問合せ、不具合管理
担当者 名前、住所、職位、電話番号 取引先担当者、リード

近いものがない場合、一番自由度が高い(=自分で色々設定しなければならない)「ベーシック」を選択すればよいでしょう。
今回は「ドキュメント」の表示だけ変えたようなものを作りたいので、「ファイル」を選択します。
2012080703200400.JPG

フィールドの設定

操作方法はスタジオ機能のフィールド設定と同様で、テンプレート以外に追加で保持させたい情報などを追加します。

を出力するフィールドを配置したいので、フィールドの追加からデータタイプ:HTMLの新規フィールドを追加します。
データタイプを選択すると、各タイプに合わせた設定項目に切り替わります。
HTMLの場合、タグを記述する編集欄が現れるので、ここでimgタグを編集します。
アップロードしたファイルは、index.php?entryPoint=download&id= <ファイルのレコードID> &type= <パッケージのキー_モジュール名> でダウンロードできます。
画像ファイルを強制ダウンロードにしないためには、type=SugarFieldImage、isTempFile=1のパラメータが必要なようです。

URLの途中に入るレコードID等、フィールドに設定された値は、{$fields. <fieldName> .value}で取得可能です。

2012080901130200.JPG

関連

各モジュール間の関係を定義します。基本的にスタジオの関連設定と同様です。
 ・商談1つごとに関連する写真は複数ある
 ・1つの写真は複数の商談と関連する(買い取る時と売る時の2つはあるだろう)
 →画像と商談は多対多の関係が適当そうなので、真ん中のタイプ欄に多対多を設定します。
ラベル欄は詳細ビューにぶら下がるサブパネルのタイトルです。今回はデフォルトのモジュール名のまま変更しません。
2012080901185100.JPG

レイアウト

編集、リスト、詳細、ダッシュレット等モジュール内の各画面の項目レイアウトをドラッグアンドドロップで編集します。サブパネルは関連設定でテンプレートを選ぶことが出来るのみでレイアウトの変更は出来ないようです。
配置可能なパーツはフィールドで定義された項目です。
新規で追加したフィールドは、非表示になっているので、忘れずに配置します。
今回は一覧ビュー、詳細ビューに配置しました。
2012080901262600.JPG

インストール

モジュールの設定が完了後パッケージ編集画面にもどり、「配置」ボタンを押すと、設定が保存され、システムにインストールされます。
2012080901285700.JPG

作成開始~インストールまで大体15分程度。さくっと出来てしまいました。

動作確認

メニューバーを見てみると、一番下に「画像」機能が追加されてます。
2012080901482000.JPG

早速写真をアップロードして使ってみると...
画像が表示されたのが詳細ビューだけ。
2012080901553500.JPG

※アップロードした写真は コチラの素材サイト からお借りしました。

リストビューではタグがそのまま出力されてしまいました。
2012080902034300.JPG

同じフィールドでも、画面によって表示されるものが違うようです。
世の中うまくいかないものです。

と、いうわけで次回はうまく表示されなかったビューの表示をコーディングで手直ししてみたいと思います!

エンジニア採用中!私たちと一緒に働いてみませんか?