1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

kintone 従業員名簿アプリのタブ表示例

Last updated at Posted at 2019-07-11

kintone アプリで項目数が多いと、タブ表示で項目を整理したいですね。
kintone で提供されている人事労務パックの従業員名簿アプリをタブ表示してみます。
使用するのは、rex0220 タブ表示プラグインです。

従業員名簿アプリのタブ表示例

項目を基本情報、業務情報、配属・異動の記録、給与、交通費のタブで分類しています。

レコード詳細画面
2019-07-11_10h53_14.png
レコード編集画面
2019-07-11_11h40_00.png

モバイル版タブ表示例

2019-09-22_15h11_45.png

モバイル版タブ表示操作例

2019-09-22_22h55_09.gif

アプリの作成手順

簡単にアプリ作成出来るように、kintoneアプリストアにいろいろなアプリが公開されています。
人事労務パックには、サンプルデータも用意されていますので、それを使ってタブ表示カスタマイズします。

  • kintone 環境
  • スペース作成
  • 人事労務パックのアプリ作成
  • 従業員名簿アプリのカスタマイズ
  • タブ表示プラグインの準備
  • タブ表示プラグインのインストール
  • 従業員名簿アプリへのプラグイン追加
  • タブ表示プラグインのアプリ設定

kintone環境

kintone には、一定期間無料で試用できる試用環境や開発環境がありますので、手軽にお試しできます。初めての方は、下記のどちらかの環境を準備しましょう。
既にkintone 導入済みまたは今後も活用予定の方は、開発者ライセンスがお勧めです。

30日間無料お試し
kintone 開発者ライセンス 案内

スペース作成

サンプルアプリを作成する場合、お試し用スペースを作成しスペース内にアプリを作成します。
アプリが不要になった場合、お試し用スペースごと削除できますので、後始末が簡単になります。

2019-07-11_12h28_49.png 「はじめから作る」をクリックし、スペース名を指定して作成します 2019-07-11_12h31_18.png

人事労務パックのアプリ作成

「アプリを追加」メニューからアプリストアを表示して、人事労務パックを選択します。
2019-07-11_12h37_22.png
「このアプリを追加」をクリック
2019-07-11_12h46_30.png

従業員名簿アプリのカスタマイズ

タブ表示のフッター部の例として、作成日時・作成者・更新日時・更新者を下部に配置します。
なおフッター部は、無くても問題ありません。
2019-07-11_13h02_50.png

タブ表示プラグインの準備

rex0220 stores で、タブ表示プラグイン試用版を入手します。
試用版は、無料でプラグインのお試しが出来ます。

kintone タブ表示プラグイン試用版
2019-07-11_13h11_49.png

タブ表示プラグインのインストール

kintone システム管理から「プラグイン」をクリックし、プラグイン画面で「読み込む」をクリック
タブ表示プラグイン試用版ファイルを指定します。
インストールは、kintone 環境に1回行えばOKです。

2019-07-11_13h17_52.png

従業員名簿アプリへのプラグイン追加

従業員名簿アプリのアプリ設定画面で、「プラグイン」を選択

2019-07-11_13h25_15.png

「プラグインを追加」をクリックして、タブ表示プラグインを追加します。
2019-07-11_13h23_47.png

タブ表示プラグインのアプリ設定

タブ設定、タブ名・表示行数を設定します。

2019-07-11_13h29_30.png
  • 表示幅:900 タブの枠幅
  • ヘッダ部固定表示行数:4
  • 全表示タイトル:全表示

左のAPPレイアウトを見ながら、タブ名と行数を指定します。

  • 基本情報 4
  • 業務情報 4
  • 配属・異動の記録 2
  • 給与 3
  • 交通費 2

「運用環境に反映」をチェックして「保存する」をクリックすると、即アプリに反映されます。

設定が終わったら「保存する」をクリック後、「アプリの更新」をクリックすると反映されます。
2019-07-11_13h37_29.png

参考

あとがき

kintoneアプリは、手軽に作成できますが、項目が多くなると目的の項目を探すのも大変です。
タブ表示で項目を整理すると、アプリがより使いやすくなると思います。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?