カテゴリー内の他の記事

AngularJSを使ってオリジナルのビューをつくる方法

フォローする

(著者:サイボウズ KADOYA Ryo

AngularJSは、Googleとコミュニティによって開発されているオープンソースのJavaScriptフレームワークです。AngularJSをkintoneに組み込むことで、MVCアーキテクチャーを使ったビューのカスタマイズが可能です。

以下にその方法を説明します。

AngularJSのダウンロード

AngularJSは以下のサイトからダウンロードできます。
http://angularjs.org/

アプリの作成

ここでは、レコード番号と氏名だけのシンプルな名簿アプリを作ってみます。

フィールド名 フィールドコード
レコード番号 rec_no
氏名 name

 

一覧の設定で、「カスタマイズ」を選択します。

カスタマイズ形式のビューを作成するには、kintoneの管理権限が必要です。

  • このページに表示されている一覧IDを覚えておく(下記記載のサンプルコード内で使用します)
  • 「ページ切り替えを表示する」にチェック
  • 絞込み条件:すべてのレコード
  • ソート:作成日時(降順)

HTML欄に以下を入力して、保存します。

次に、詳細設定から「JavaScript / CSSでカスタマイズ」を開き、以下の順番でJavaScriptファイルを読み込ませます。

  • AngularJSのJavaScriptファイル
  • 以下のように記述したJavaScriptファイル

ビューの確認

作成されたビューは、通常の一覧画面と同じようにレコードの並び替えや絞込みを行うことができます。

 

このTipsは、2014年4月版で確認したものになります。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
marron

お世話になっております。

こちらのサンプルを再現しようとしたところ、

Uncaught TypeError: Cannot read property '$apply' of undefined

というエラーが出てビューが表示されませんでした。

 

AngularJSは、Cybozu CDNの https://js.cybozu.com/angularjs/v1.6.0/angular.min.js を入れています。

この問題の解決方法を教えていただきたいです。

宜しくお願い致します。

Avatar
cybozu Development team

marron 様

確認したところ、この記事の内容はAngularJSの古いバージョン(v1.2.x)のみで動作するようです。暫定回避策として古いバージョンでお試しいただけますでしょうか。最新バージョン対応については修正を検討いたします。

よろしくお願いいたします。

Avatar
cybozu Development team

marron 様

HTMLとJavaScriptを修正し、https://js.cybozu.com/angularjs/v1.6.0/angular.min.js でも動作するように変更いたしました。問題が改善するか試していただけますでしょうか。

よろしくお願いいたします。

Avatar
marron

cybozu Development team 様

お世話になっております。

修正して頂いたものを試してみたところ、エラーは検出されずビューも表示されました。

クリックした際のアラートも出てきました。

 

迅速なご対応ありがとうございます!

これからもよろしくお願いします!

Avatar
sasa

こちらのサンプルを参考にして、ファイル管理アプリをカスタマイズしたいのですが、

フォーム部品の「ファイル」から取得できるJSONデータの配列の中から複数のファイル名を取得して

表のセル内で縦に羅列する方法がどうしてもわかりません。

どのように取得し、htmlに表示すれば良いでしょうか?

また、表に表示したファイル名に、そのファイルへのリンクを貼りたいのですが、

この方法もわかりません。

お手数ですが、教えていただけませんでしょうか?

 

 

 

 

 

Avatar
cybozu Development team

sasa 様

ご質問ありがとうございます。

1.複数ファイル名を取得して縦に羅列

22~24行のスースコードを次のように変更すると、↓こういう感じになります。(2つレコードから取得した添付ファイル)

for (var i = 0; i < e.records.length; i++) {

var record = e.records[i];
var files = record.file;
for (var j = 0; j < files.value.length; j++){
students.push({'name': files.value[j].name});
}
}

2.リンク

また、添付ファイルをカスタマイズビューに表示して、そのファイルへのリンクを貼るなら、

次のTipsは参考になるかと思います。
https://developer.cybozu.io/hc/ja/articles/203126440

こちらのTipsだと、ファイルをクリックすると、ダウンロードしてしまうので、
クリックしてそのファイルのレコードへリンクしたいのであれば、
aタグのURLをレコード詳細画面のURLに設定することができます。

 

 

ログインしてコメントを残してください。
Powered by Zendesk