【kintone】Kintone Portal Designer と kintone UI Component v1でポータルにボタンを設置する

こんにちは！

今回はKintone Portal Designer と kintone UI Component v1 を使って、
kintoneのポータルにボタンを設置してみたいと思います！

Kintone Portal Designer の準備

Kintone Portal Designer をChromeにインストールして、簡単なデザインを作ります。
↓詳しくは公式ページへ

kintone UI Component v1 の準備

kintoneシステム管理から、JavaScript / CSSでカスタマイズを選択し
kintone UI Component v1 のCDNを追加しておきます。

https://unpkg.com/kintone-ui-component/umd/kuc.min.js

デザインの作成

HTMLやCSSはこちらのサイトからお借りしてwidthやmarginの調整をしました。

HTML

Kintone Portal Designer 上でHTML、CSS、JavaScriptを編集します。

ボタンを置く用にid="button-test"なdivタグを置いておきます。

<div class="box30">
    <div class="box-title">ボタンを置くところ</div>
    <p>ボタンを置くところ</p>
    <div id="button-test"></div>
</div>

ブラウザ上ではこのような感じ。CSS、JavaScriptを書く時はタブを切り替えます。

CSS

CSSタブに切り替えて書いていきます。

.box30 {
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
    width:80%;
    margin: 30px auto;
}
.box30 .box-title {
    font-size: 1.2em;
    background: #5fc2f5;
    padding: 10px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0 ;
}

JavaScript

ボタンを設置＆ボタンクリックのコードを書きます。

(() => {
  "use strict";
  kintone.events.on(["portal.show"], (event) => {
    //ボタン設置
    const divButton = document.getElementById("button-test");
    const sutekiButton = new Kuc.Button({
      text: "素敵なボタン",
      type: "submit",
    });
    divButton.appendChild(sutekiButton);
   
    //グラフ設定更新ボタンクリック
    sutekiButton.addEventListener("click", async () => {
      alert("ボタンをクリック！");
    });

    return event;
  });
})();

動作確認

ボタンが表示され、クリックでメッセージが表示されたでしょうか？

まとめ

Kintone Portal Designerを使うことにより、HTMLやCSSを自分で書いてデザインすることができます。自由度が高く、TwitterのTLを表示することもできます。

また、HTMLやCSSが苦手・・・という方でも、
kintoneポータルデザインテンプレートギャラリーから気に入ったものを選び、値や文字列を変更するだけで素敵なデザインのポータルにすることもできます。
次回は、Sample TemplateからデザインをImportしてポータルを作ってみたいと思います。