CookBook

Formaでスクリプトアイテムを使い、ボタン・見出し等の色やサイズを変更する方法

投稿日:

このCookBookでは、Formaでスクリプトアイテムを使い、デザインを変更する方法をご紹介します。
サンプルでは、「ボタンアイテム」の背景色の変更・「見出し」の背景色の変更・「ラジオボタン」のボタンのサイズ変更を実現します。

完成イメージ

レシピ

  1. 変更をかけたいアイテムとスクリプトアイテムを追加してください。
  2. スクリプトアイテムを追加し、プロパティにコードを記述してください。(jQueryのセレクタは一例です)

1. 変更をかけたいアイテムとスクリプトアイテムを追加してください。

2. スクリプトアイテムを追加し、プロパティにコードを記述してください。(jQueryのセレクタは一例です)

変更したいボタンのIDをbuttonIdsに設定してください。複数選択も可能です。

アイテムのIDは、実行画面を開き開発者ツールで確認できます。
スクリプトアイテムによってかかった変更は、Forma管理画面では確認できません、Formaアプリから確認できます。

その他:同様にスクリプトアイテムを使うことにより、見出しの色やラジオボタンのサイズを変更してください。

以下のコードをスクリプトアイテムのプロパティに記載してください。

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

IM-BloomMaker スプレッドシートの入力内容を DB に保存する

この CookBook では intra-mart Accel Platform 2020 Winter から利用可能になったスプレッドシートで、セルに入力した値を DB に保存する方法を紹介します。 …

no image

IM-FormaDesignerで作成したフォーム内で、外部連携を利用して最も簡単に値を渡す方法(テーブルアイテム編)

このCookBookでは、IM-FormaDesignerで作成したフォーム画面の中で、テーブルアイテムからテーブルアイテムへ値を渡す方法について紹介します。 今回は例として、グリッドテーブルを利用し …

no image

ウォッチ機能のご紹介

このCookBookでは「intra-mart Accel Collaboration」に備わっているウォッチ機能のご紹介です。 各会社様でグループで仕事をする機会が多いと思います。 仕事を行う上で、 …

no image

IM-BloomMaker エレメントを狙った位置に配置する方法

この CookBook ではエレメントを狙った位置に配置する方法について紹介します。エレメントを配置する方法として、エレメントをドラッグ&ドロップする方法がありますが、配置先のスペースが狭いとなかなか …

標準の画面アイテムを利用して「先頭へ戻る」ボタンを実現する

このCookBookでは、標準の画面アイテムを利用して「先頭へ戻る」ボタンを実現する方法について紹介しています。 本稿では、表示する項目が多く縦長い画面で下へスクロールすると右下に「先頭へ戻る」ボタン …