2
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-05-24

はじめに

先日こんな記事を書きました。
kintoneの内部パラメータ「フィールドID」を使いこなす

入力するフィールドはこれで全部行けるんですが、
「ラベルフィールド」のDOMを取得したいときは、これでも無理。
どうやらラベルには、フィールドIDがそもそも付与されないっぽいです。

解決方法

100% DOM操作で行います。
例のごとく、今後動かなくなる可能性は大なので自己責任で。

divタグが多重になってますが、.control-label-field-gaiaクラスがラベル1個単位の大元のようです。
jQueryを使わずに書くなら、以下の2ステップで。

  • 全ラベルを取得
  • その中から特定の文字列のラベルを探す

こんな風に用途別に関数を作ってやると、取り回しやすいと思います。

// 全ラベルの取得
const allLabelElements = () => Object.values(document.querySelectorAll('div.control-label-field-gaia'))

// 特定の文字列と一致するラベルを1つ抽出
const findLabelElement = label => allLabelElements().find(_ => _.textContent === label)

// 特定の文字列を含むラベルを複数抽出
const filterLabelElements = label => allLabelElements().filter(_ => _.textContent.includes(label))

使用例

アプリストアの「旅費精算申請」の場合

「旅費」と一致するラベル

マッチしたElementオブジェクトが返る

スクリーンショット 2019-05-24 11.53.41.png

「旅費」を含むラベル

マッチした3つのElementが配列で返る

  1. 「旅費精算申請」にマッチ
スクリーンショット 2019-05-24 11.55.18.png
  1. 「旅費」にマッチ
スクリーンショット 2019-05-24 11.55.26.png
  1. 「旅費合計(円)」にマッチ
スクリーンショット 2019-05-24 11.55.34.png

あとは好きなようにhackしてくださいませ!
ではまた〜。

2
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
2
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?