안녕하세요!
이번에 사용Kintone Portal Designer과kintone UI Component v1킨톤의 포털에 버튼을 설정하고 싶습니다!

Kintone Portal Designer 준비

크롬은 Kintone Portal Designer를 설치해 심플한 디자인을 제작했다.
↓ 자세한 내용은 홈페이지 참조

kintone UI Component v1 준비

kintone 시스템 관리에서 JavaScript/CSS를 통해 사용자 정의 선택
kintone UI Componentv1의 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를 직접 작성하여 디자인할 수 있습니다.자유도가 높아 트위터의 TL을 표시할 수 있다.

또한 HTML과 CSS를 잘 못하는 사람도
포털 디자인 템플릿 갤러리에서 자신이 좋아하는 것을 선택하면 수치와 문자열만 바꾸면 디자인이 정교한 포털 사이트가 될 수 있다.
다음에는 임포트 제작 포털을 Sample Template로 디자인하고 싶습니다.