01 Infor デザインシステム インターフェースプレビュー 概要と連絡先を検証し、ローカルのリクエストを準備してから、何も送信せずにクリアします。
確認済みのIDS core/lightトークン値とシステムフォントのフォールバックを使用した、独自のHTML/CSS解釈です。ネイティブのIDSランタイムではありません。·
実装リファレンス 02
Infor デザインシステム デザインリファレンス この修正作業で参照した、公開されているInforのトークンテーブル用テーマスタイルシートと、公開済みのids-enterprise-wc 1.17.1および公式の入力・ボタンの例。最新のトークンテーブルのURLは、パッケージのバージョンを保証するものではなく、常に更新されるスナップショットです。
名前 / ルール 値 / 設定 用途 --ids-color-action-defaultvar(--ids-color-blue-60)公開されているcore/lightテーマのセマンティックエイリアス。 --ids-color-action-strongervar(--ids-color-blue-70)公開されているcore/lightテーマのセマンティックエイリアス。 --ids-color-background-defaultvar(--ids-color-white-100)公開されているcore/lightテーマのセマンティックエイリアス。 --ids-color-foreground-default-defaultvar(--ids-color-neutral-100)公開されているcore/lightテーマのセマンティックエイリアス。 --ids-color-foreground-default-secondaryvar(--ids-color-neutral-80)公開されているcore/lightテーマのセマンティックエイリアス。 --ids-color-border-defaultvar(--ids-color-neutral-60)公開されているcore/lightテーマのセマンティックエイリアス。 --ids-color-border-weakvar(--ids-color-neutral-40)公開されているcore/lightテーマのセマンティックエイリアス。
名前 / ルール 値 / 設定 用途 --ids-color-blue-60#0072ed 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 --ids-color-blue-70#0066d4 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 --ids-color-neutral-100#161618 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 --ids-color-neutral-80#3b3b3f 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 --ids-color-neutral-60#6f6f76 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 --ids-color-neutral-10#f5f5f5 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。 --ids-color-red-60#da1217 公開テーマのプリミティブ値です。ダークモードやコントラストモードで同じ値になるとは限りません。
名前 / ルール 値 / 設定 用途 --ids-space-2xsvar(--ids-space-04)カスタムアプリケーションのスペーシングにはエイリアスを使用します。 --ids-space-xsvar(--ids-space-08)カスタムアプリケーションのスペーシングにはエイリアスを使用します。 --ids-space-smvar(--ids-space-16)カスタムアプリケーションのスペーシングにはエイリアスを使用します。 --ids-space-mdvar(--ids-space-24)カスタムアプリケーションのスペーシングにはエイリアスを使用します。 --ids-space-lgvar(--ids-space-32)カスタムアプリケーションのスペーシングにはエイリアスを使用します。 --ids-space-xlvar(--ids-space-40)カスタムアプリケーションのスペーシングにはエイリアスを使用します。 --ids-space-2xlvar(--ids-space-48)カスタムアプリケーションのスペーシングにはエイリアスを使用します。
名前 / ルール 値 / 設定 用途 --ids-space-044pxトークンのスタイルシートに定義された具体的なスケール値。 --ids-space-088pxトークンのスタイルシートに定義された具体的なスケール値。 --ids-space-1616pxトークンのスタイルシートに定義された具体的なスケール値。 --ids-space-2424pxトークンのスタイルシートに定義された具体的なスケール値。 --ids-space-3232pxトークンのスタイルシートに定義された具体的なスケール値。 --ids-space-4040pxトークンのスタイルシートに定義された具体的なスケール値。 --ids-space-4848pxトークンのスタイルシートに定義された具体的なスケール値。
名前 / ルール 値 / 設定 用途 --ids-font-family-sanssource sans proタイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 --ids-font-family-monosource code proタイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 --ids-font-size-defaultvar(--ids-font-size-sm)タイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 --ids-font-size-smvar(--ids-font-size-40)タイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 --ids-font-size-3014pxタイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 --ids-font-size-4016pxタイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 --ids-font-size-5020pxタイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。 --ids-font-size-6024pxタイポグラフィのリファレンスです。フォントファイルは別途読み込む必要があります。
名前 / ルール 値 / 設定 用途 --ids-border-radius-xsvar(--ids-border-radius-04)エイリアスはプリミティブを参照します。すべてのコントロールで最大の角丸が使われるとは限りません。 --ids-border-radius-smvar(--ids-border-radius-08)エイリアスはプリミティブを参照します。すべてのコントロールで最大の角丸が使われるとは限りません。 --ids-border-radius-mdvar(--ids-border-radius-16)エイリアスはプリミティブを参照します。すべてのコントロールで最大の角丸が使われるとは限りません。 --ids-border-radius-lgvar(--ids-border-radius-24)エイリアスはプリミティブを参照します。すべてのコントロールで最大の角丸が使われるとは限りません。 --ids-border-radius-circlevar(--ids-border-radius-99)エイリアスはプリミティブを参照します。すべてのコントロールで最大の角丸が使われるとは限りません。
名前 / ルール 値 / 設定 用途 labelVisible input labelプレースホルダーだけに頼らず、フィールドの識別に使用します。 validaterequired / email requiredドキュメントに記載された入力検証ルール。 readonlytrue編集できないアセット識別子を、読みやすい状態で保持します。 disabledtrue入力不可の状態を個別に示します。 clearabletrueフィールド単位のクリア操作。 dirty-trackertrue変更された値を任意で追跡します。 text-alignstart | center | endテキストや数値表示の論理的な配置。
名前 / ルール 値 / 設定 用途 appearanceprimaryローカルの下書きを作成します。 appearancesecondary下書きのクリアは補助的なアクションです。 appearancetertiary強調を抑えた代替アクション。 appearanceprimary-destructive / tertiary-destructive通常のキャンセルではなく、実際に破壊的な操作を行う場合に使用します。 disabledBoolean attributeネイティブコンポーネントが利用できない状態。
03 Infor デザインシステム 完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
DESIGN-infor.md 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
ガイドをダウンロード Infor デザインシステム レコード識別子が固定されたエンタープライズ向けフォーム 機器識別子は編集可能な依頼内容と分けて表示する InforはSoHoをデザイン言語として掲げ、IDSではエンタープライズの役割と生産性を重視しています。このサンプルでは、その考え方を保守依頼に適用しています。資産識別子は固定し、作業概要、連絡先、緊急度を編集可能な依頼情報として扱います。
IDの02006は意図的に文字列として扱います。数値に変換すると先頭のゼロが失われ、識別子が変わってしまうためです。ネイティブIDSの例では読み取り専用の入力欄を使い、レコードのコンテキストを表示したまま、フィールドが欠落または利用不可のように見えないようにしています。
関連する仕様を確認する
Infor デザインシステム エイリアスはプリミティブを参照して解決される 用途に合ったエイリアスを使う 取得した公開テーマでは、action-defaultはblue-60、default foregroundはneutral-100、secondary foregroundはneutral-80を参照します。この2層構造により、アプリケーション内で色のリテラル値を重複させずに、カスタムフォームをテーマと一貫させられます。
公開トークンページでは、Core、Dark、Contrast の各モードを利用できます。このガイドの値は、Core（ライト）スタイルシートのスナップショットに基づいています。プレビューは、3つのモードすべてで同じ青の16進数値が使われることを示すものではありません。本番コンポーネントではセマンティックエイリアスを参照し、選択したテーマに値を解決させてください。
関連する仕様を確認する
Infor デザインシステム 独自の密度体系を作らず、具体的なスケールを示す スペース、タイポグラフィ、角丸にはそれぞれ別のエイリアスセットがある スペーシングエイリアスには、プリミティブ値が8ピクセルのxs、16ピクセルのsm、24ピクセルのmd、32ピクセルのlgがあります。付属のネイティブCSSでは、メインの内側余白にmd、フィールド間の間隔にsmを使っています。ソースコードで意図を明確にしつつ、参照表では具体的な値を確認できます。
デフォルトのフォントファミリーはSource Sans Pro、等幅フォントはSource Code Proです。font-size-defaultエイリアスは16ピクセルのスケール項目を参照します。ライブラリを読み込んでも、パッケージのREADMEに記載されたフォントアセットを用意する必要があります。オフラインプレビューでは一般的な代替フォントを使用します。
角丸の名前はスペーシングの名前とは別です。radius-smは8ピクセル、space-smは16ピクセルを参照します。どちらも名前の末尾がsmだからといって、覚えている数値を流用すると誤った値になります。
関連する仕様を確認する
Infor デザインシステム 変更追跡と入力検証は役割が異なる 編集を追跡しても、入力値が有効とは限らない 公式のIDS入力ギャラリーでは、初期値のある入力にdirty-tracker="true"を指定しています。変更追跡はフィールドの編集を対象とし、許容される入力を定義するvalidate属性とは別の機能です。連絡先フィールドが変更されていても、メールアドレスが無効な可能性があります。
公開されているInput宣言にはcheckValidation(): voidが定義されています。これを呼び出すとコンポーネントの検証動作が実行されますが、作業指示のアクションを許可するBoolean条件としては使いません。ネイティブのサンプルでは、下書きを作成する前に必須のアプリケーション値も確認します。クリア可能な作業概要と読み取り専用の資産情報は、ほかの独立した入力機能を示しています。
変更追跡は公式に文書化された拡張機能ですが、このプレビューでは有効にしていません。デモでは編集後に準備済みの概要をクリアし、フォーカスを作業概要フィールドに戻します。保守依頼が保存されたとは表示しません。
関連する仕様を確認する
Infor デザインシステム フォームを隠さず、2つの領域で構成する フォームを主役に、コンテキストを補足として配置する プレビューでは、フォームにコンパクトな機器情報カードと、シンプルなオリジナルの機械図を組み合わせています。主要な読み順は、見出し、フィールド、アクション、結果です。画面幅が狭い場合、入力欄を読みにくい列に押し込まず、機器情報をフォームの下に移動します。
ライブラリの例では、ブレークポイントごとの列属性を指定したids-layout-gridを使用しています。このサンプルでは、よりシンプルな独自のレスポンシブレイアウトを採用しています。最大幅とブレークポイントはアプリケーション側の値です。ここで示すのは、トークンに基づく間隔とネイティブコントロールのラベルです。
関連する仕様を確認する
Infor デザインシステム ネイティブパッケージのバージョンを固定し、値を読み取る前に初期化する 公開パッケージを確実な導入元として使う 検証済みのパッケージには、バージョン1.17.1、ESモジュールのエントリーポイントenterprise-wc.js、現在のInforホストのソースリポジトリが記載されています。そのため、以前のGitHubの場所は信頼できるインストール手順ではありません。コードでは公開パッケージをインポートしてコンポジションを挿入し、カスタム要素の定義が完了してから動作を設定します。
公式のライブサンプルには、ビルドごとに異なるチャンクURLが含まれています。無作為に選んだチャンク名をアプリケーションにコピーすると、デプロイ成果物に依存してしまいます。パッケージのエントリーポイントを使えば、依存関係はバンドラーが解決します。このガイドでは公開メソッドの宣言を検証し、ブラウザーでのサンプルがネイティブビルドを示すものではないことを明確にしています。
固定したパッケージをViteのVanillaスキャフォールドにインストールし、ドキュメントに記載されたフォントをアプリケーションのアセットポリシーに従って組み込んでください。 用意されているエントリーポイントとCSSを使用し、カスタム要素の準備を待ってから、メインアクションとリセットアクションを紐付けてください。 概要が空の場合、不正なメールアドレス、有効なローカル下書き、その後の編集をテストし、表示されるスナップショットが古い状態にならないことを確認してください。 関連する仕様を確認する
Infor デザインシステムのコンポーネント例 完全なスタンドアロンのインタラクティブ見本 ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。検証済みIDSコア／ライトのトークン値とシステムフォントへのフォールバックを用いた、独立したHTML／CSSの解釈です。ネイティブのIDSランタイムではありません。
html コードをコピー
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Maintenance request — IDS interpretation</title><style>*{box-sizing:border-box}body{margin:0;color:#161618;background:#f5f5f5;font:16px/1.45 Arial,sans-serif}main{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;border-bottom:1px solid #bbbbbf;padding-bottom:16px;gap:16px}header b{font-size:14px}header span{font-size:13px;color:#3b3b3f}h1{font-size:32px;line-height:1.2;font-weight:500;margin:24px 0 8px}h2{font-size:20px;font-weight:500;margin:0 0 16px}.intro{color:#3b3b3f;margin:0 0 24px}.grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}.form,.context{background:white;border:1px solid #e0e0e1;border-radius:8px;padding:24px}label,.label{display:block;font-size:14px;margin-bottom:8px}input{width:100%;font:inherit;border:1px solid #6f6f76;border-radius:4px;padding:10px 12px;color:#161618}input[readonly]{background:#f5f5f5}input:focus,button:focus-visible{outline:3px solid #8abff7;outline-offset:2px}.field{margin-bottom:16px}.hint{font-size:12px;color:#3b3b3f;margin:4px 0 0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}button{font:inherit;border-radius:4px;padding:10px 16px;cursor:pointer;border:1px solid #6f6f76;background:white;color:#161618}.primary{background:#0072ed;color:white;border-color:#0072ed}.primary:hover{background:#0066d4}fieldset{padding:0;border:0;margin:24px 0 0}legend{font-size:14px;margin-bottom:8px}.radios{display:flex;gap:16px;flex-wrap:wrap}.radios label{display:flex;gap:8px;align-items:center;margin:0}.radios input{width:auto;accent-color:#0072ed}.equipment{height:190px;background:#e6f1fd;display:grid;place-content:center;margin-bottom:24px;border-radius:4px}.machine{border:3px solid #0054b1;width:165px;height:100px;position:relative;background:white}.machine:before{content:'';position:absolute;left:14px;top:16px;width:55px;height:55px;border:8px double #0054b1;border-radius:50%}.machine:after{content:'02006';position:absolute;right:10px;top:27px;color:#0054b1;font:16px monospace}.context dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;font-size:14px}.context dt{color:#3b3b3f}.context dd{margin:0;text-align:right}.notice{font-size:13px;background:#f5f5f5;padding:16px;margin-top:24px}.error{color:#a30d11;font-size:14px;min-height:20px}.result{background:#e6f1fd;padding:16px;border-left:3px solid #0072ed;margin-top:20px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}.result[hidden]{display:none}.foot{font-size:12px;color:#3b3b3f;margin-top:24px}@media(max-width:650px){main{padding:20px}.grid{grid-template-columns:1fr}.form,.context{padding:20px}header{flex-direction:column;gap:4px}h1{font-size:28px}.equipment{height:140px}}</style><main><header><b>ASSET SERVICE / LOCAL NOTEBOOK</b><span>Independent Infor IDS interpretation</span></header><h1>Prepare the work. Keep the context.</h1><p class="intro">Build a local maintenance draft for a fixed equipment record.</p><div class="grid"><form id="form" class="form" novalidate><div class="field"><label for="asset">Asset identifier</label><input id="asset" value="02006" readonly><p class="hint">Read-only record identity; leading zero preserved.</p></div><div class="field"><label for="summary">Work summary</label><input id="summary" required placeholder="For example, inspect the drive belt" aria-describedby="error"></div><div class="field"><label for="contact">Contact email</label><input id="contact" type="email" required placeholder="[email protected] " aria-describedby="error"></div><fieldset><legend>Planning urgency</legend><div class="radios"><label><input type="radio" name="urgency" value="Routine" checked>Routine</label><label><input type="radio" name="urgency" value="Soon">Soon</label></div></fieldset><div class="actions"><button class="primary" type="submit">Prepare local draft</button><button id="clear" type="button">Clear draft</button></div><p id="error" class="error" role="alert"></p><div id="result" class="result" role="status" hidden></div></form><aside class="context"><div class="equipment" role="img" aria-label="Original schematic of fictional equipment 02006"><div class="machine"></div></div><h2>Equipment context</h2><dl><dt>Record</dt><dd>02006</dd><dt>Area</dt><dd>Sample workshop</dd><dt>Type</dt><dd>Drive assembly</dd><dt>Connection</dt><dd>Offline sample</dd></dl><p class="notice">Preparing a draft changes only this page. It does not create a work order or send a message.</p></aside></div><p class="foot">Core/light IDS token values with native HTML controls and a system-font fallback. Original illustration and application layout; no native IDS runtime.</p></main><script>const form=document.querySelector('#form'),summary=document.querySelector('#summary'),contact=document.querySelector('#contact'),error=document.querySelector('#error'),result=document.querySelector('#result');function clearResult(){result.hidden=true;result.textContent='';error.textContent='';summary.removeAttribute('aria-invalid');contact.removeAttribute('aria-invalid')}form.addEventListener('input',clearResult);form.onsubmit=e=>{e.preventDefault();clearResult();if(!summary.value.trim()){error.textContent='Enter a work summary.';summary.setAttribute('aria-invalid','true');summary.focus();return}if(!contact.value.trim()||!contact.validity.valid){error.textContent='Enter a valid contact email.';contact.setAttribute('aria-invalid','true');contact.focus();return}result.hidden=false;result.textContent='LOCAL DRAFT / NOT SENT\n\nAsset: 02006\nSummary: '+summary.value.trim()+'\nContact: '+contact.value.trim()+'\nUrgency: '+form.elements.urgency.value};document.querySelector('#clear').onclick=()=>{form.reset();clearResult();summary.focus()};</script></html>
コードリファレンス
アセット02006は文字列のまま扱います。カスタム要素の登録とcheckValidation()を検証するのは、こちらのHTMLフォームではなくネイティブIDSの例です。どちらも作業指示を作成しません。 読み取り専用の識別子、必須の概要、連絡先の検証 IDSの入力検証は明示的に呼び出します。アプリケーション側のチェックで、空のローカル下書きを防ぎます。ユーザー入力はtextContentで表示します。
JavaScript コードをコピー
// Vite vanilla project: npm install [email protected]
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`<ids-container><main>
<h1>Maintenance request</h1><p>Local draft only; no work order is sent.</p>
<ids-input id="asset" label="Asset identifier" value="02006" readonly="true"></ids-input>
<ids-input id="summary" label="Work summary" validate="required" clearable="true"></ids-input>
<ids-input id="contact" label="Contact email" validate="email required"></ids-input>
<ids-button id="prepare" appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button id="reset" appearance="secondary"><span>Clear draft</span></ids-button>
<p id="message" role="status"></p><pre id="draft"></pre>
</main></ids-container>`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
summary.checkValidation();contact.checkValidation();
const title=summary.value.trim(),email=contact.value.trim();
if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});
/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
コードリファレンス
checkValidation()の戻り値はvoidです。Booleanの結果として扱いません。 アセット02006はテキストなので、先頭のゼロが保持されます。 プレビューの準備で変わるのは、ページ内の状態だけです。 アクションの見た目を明確にする メインとサブのコンポーネントバリエーションにより、ワークフローの主なアクションが明確になります。
html コードをコピー
<ids-button appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button appearance="secondary"><span>Clear draft</span></ids-button> コードリファレンス
コンポーネントを使用できない場合は、薄く表示するだけでなくdisabledを設定します。 04
Infor デザインシステム AIエージェントのセットアップ 実装の出発点 #appを使用するViteのVanillaスキャフォールド向けのエントリーファイルとスタイルシート一式です。パッケージのバージョンとメソッドは公開パッケージで確認済みですが、ここではコンパイルを実行していません。承認済みのフォントソースからSource Sans Proを提供してください。埋め込みプレビューは、独立したネイティブHTML実装です。
javascript / css サンプルをコピー
// Vite vanilla project: npm install [email protected]
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`<ids-container><main>
<h1>Maintenance request</h1><p>Local draft only; no work order is sent.</p>
<ids-input id="asset" label="Asset identifier" value="02006" readonly="true"></ids-input>
<ids-input id="summary" label="Work summary" validate="required" clearable="true"></ids-input>
<ids-input id="contact" label="Contact email" validate="email required"></ids-input>
<ids-button id="prepare" appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button id="reset" appearance="secondary"><span>Clear draft</span></ids-button>
<p id="message" role="status"></p><pre id="draft"></pre>
</main></ids-container>`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
summary.checkValidation();contact.checkValidation();
const title=summary.value.trim(),email=contact.value.trim();
if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});
/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
あなたのプロジェクト向けプロンプト AI エージェント用プロンプト プロンプトをコピー
検証済みのライトテーマのエイリアスと、ドキュメントに記載された入力／ボタンの構造を使って、Infor IDSのメンテナンス下書きを作成します。アセット識別子は文字列かつ読み取り専用にします。編集可能なフィールドを検証し、編集後は古い出力をクリアして、ローカルの下書きと送信済みの作業指示を区別してください。checkValidation()がBooleanを返すものとして扱わないでください。 05
Infor デザインシステム参考資料と対象範囲 独立したOpenDesignガイドです。アセットとワークフローは架空のもので、送信は行われません。ネイティブコードは確認済みの1.17.1パッケージを参照し、トークン値は別途取得したライブのコア／ライトテーマのスナップショットとして示しています。
