メインコンテンツまでスキップ

クイックスタート

本文書では、自定義コンポーネントのテキストコピー機能の実装という小さなケースを通じて、自定義コンポーネントの開発・デバッグおよびインストール使用の具体的な操作を体験します。

ケースシナリオ​

自定義コンポーネント機能を使用して、宜搭の既存テキストコンポーネントにローコード改造を加え、テキストコピー機能を実現します。テキストコンテンツをクリップボードにコピーして、ユーザーが繰り返しフィールドに入力できるようにします。

実現効果​

操作手順​

ステップ 1：自定義コンポーネントの作成​

コンポーネント名、タイプ、識別子などの属性を設定することで、ビジネスニーズに合ったカスタムコンポーネントを低コストで定義できます。 操作手順：

  1. 宜搭アプリ >> アプリ設定 >> コンポーネント管理 >> コンポーネントセンター（操作は下図参照）

  1. コンポーネント追加 >> コンポーネント名、コンポーネントタイプ、コンポーネント識別子などのコンポーネント属性を記入 >> 確定（操作は下図参照）

ステップ 2：自定義コンポーネントの開発・デバッグ​

コンポーネントの開発・デバッグを行い、異なるビジネスニーズを満たします。このケースではコンポーネントのカウント機能を実装します。 操作手順：

  1. コンポーネントセンター >> 自分のコンポーネント >> デバッグが必要なコンポーネントを探す >> 開発（操作は下図参照）

  1. 前述したように、コンポーネントはビューと属性で構成されています。コンポーネントを開発する際には、まずそのコンポーネントに必要な属性を抽象化する必要があります。まずはコンポーネントの属性構築から始めます。このコンポーネントにはテキストコンテンツの属性のみ必要です。属性設定 >> 属性定義、テキストコンテンツの属性を追加し、名前を content とし、属性タイプはテキスト、セッターは textSetter を選択します。

  1. コンポーネント属性の構築が完了したら、コンポーネントのビューを構築します。必要な宜搭通常コンポーネントをキャンバスに追加します（このケースでは2つのテキストコンポーネントが必要です。それぞれ「テキスト」と「コピー」と命名します）、基本属性を設定し、テキストコンポーネントのコンテンツを変数バインドします。先ほど構築した props.content 属性にバインドすることで、実行時に渡された属性値を表示できます。（操作は下図参照）

  1. ボタンコンポーネントにアクション設定を追加し、テキストコピー効果を実現します。「コピー」テキストを選択 >> 新規アクション >> onCopyText クリック。（操作は下図参照）

  1. JSパネルでコピー処理のロジックを記述します。（下図参照）

export function onCopyText() {
  const input = document.createElement('input');
  input.setAttribute('readonly', 'readonly');
  // this.props.xxx で属性を取得
  input.setAttribute('value', this.props.content);
  document.body.appendChild(input);
  input.select();
  input.setSelectionRange(0, 9999);
  document.execCommand('copy');
  document.body.removeChild(input);
  this.utils.toast('クリップボードにコピーしました');
}
  1. 保存 >> コンポーネントをプレビュー

  1. 公開 >> コンポーネント公開のバージョン番号および関連説明を記入 >> 確定。（操作は下図参照）

  1. 公開成功の通知が表示されます。（操作は下図参照）実際のコンポーネント開発では、保存後すぐに開発版（0.1.0）のコンポーネントをインストールしてリアルタイムデバッグが可能で、コンポーネントの開発が完了した後に正式バージョンを公開する必要があります。

ステップ 3：自定義コンポーネントのインストール​

開発・デバッグが完了した自定義コンポーネントをページにインストールすることで、ページ設計中に使用できます。コンポーネントインストールではページタイプを選択する必要があり、選択後に対応するページデザイナーで対応するカスタムコンポーネントが表示されます。 操作手順：

  1. フォーム設計ページ >> コンポーネントライブラリ >> カスタムコンポーネント >> コンポーネント管理。（操作は下図参照）

  1. コンポーネント管理ページ >> コンポーネントリスト >> インストールするカスタムコンポーネントを選択 >> インストール。（操作は下図参照）

  1. インストールバージョンおよびインストール範囲を選択 >> インストール。（操作は下図参照）

危険
  1. カスタムコンポーネントをオンラインで使用する際の安定性を保証するため、コンポーネントバージョン選択時、必ず1.x.x で公開された正式バージョンをインストールしてください。
  2. カスタムコンポーネントをページデザイナーで使用できるようにするため、インストール範囲を選択する際、対応するページタイプを選択した場合のみ、対応するページデザイナーで対応するインストールコンポーネントが表示されます。

ステップ 4：自定義コンポーネントの使用​

上記の手順により、カスタムコンポーネントはページコンポーネントライブラリのカスタムコンポーネントカテゴリにインストールされました。以下の手順で使用できます。 操作手順：

  1. フォーム設計ページ >> コンポーネントライブラリ >> カスタムコンポーネント >> 必要なコンポーネントを選択 >> キャンバスにドラッグアンドドロップしてください。（操作は下図参照）

ステップ 5：コンポーネント情報の表示/変更​

コンポーネント使用中に、コンポーネントのサムネイル、コンポーネントの説明ドキュメントアドレス、コンポーネントの説明情報を変更する必要がある場合は、以下のパスで操作できます。 操作手順

  1. アプリ設定 >> コンポーネント管理 >> コンポーネントセンター（操作は下図参照）

  1. 詳細を表示/変更するコンポーネントを選択 >> 詳細（操作は下図参照）

備考

**説明：**コンポーネント詳細ページは、基本情報、公開情報、管理者の3つのモジュールに分かれています（下図参照）。それぞれ：

  1. 基本情報：「編集」をクリックして、カスタムコンポーネントのサムネイル、ヘルプドキュメントアドレス、コンポーネント説明を変更できます。それ以外の設定はコンポーネント作成時に設定され、変更不可です。
  2. 公開情報：カスタムコンポーネントのイテレーション記録（コンポーネントバージョンおよび対応する公開説明）を確認できます。
  3. 管理者（カスタムコンポーネントの開発・デバッグ権限を持つデフォルトはコンポーネント作成者）：管理者の追加・削除操作が可能で、権限管理に使用されます。

カスタムコンポーネント属性​

カスタムコンポーネントは宜搭の既存コンポーネントの改造をサポートするだけでなく、生成されたカスタムコンポーネントの属性（propTypes）のカスタム操作もサポートします。これにより、カスタムコンポーネントは開発者の日常業務シナリオにさらに合致し、開発者の日常業務習慣にも合わせながら、カスタムコンポーネントの柔軟性とカスタマイズ性を高めます。

カスタムコンポーネント属性設定エントリ​

**パス：**ローコードコンポーネントデザイナー >> キャンバスの「ローコード業務コンポーネント」を選択 >> 右側の属性（パスは下図参照）

カスタムコンポーネント属性設定説明​

カスタムコンポーネント属性はデュアルエンド構築、属性定義（ propTypes）、ライフサイクル、一意識別子の4つのモジュールに分かれています。それぞれ：

  • **デュアルエンド構築：**デュアルエンド構築は設定スイッチで、有効にするとPC端とモバイル端を完全に分離してそれぞれデザインでき、デュアルエンド対応の個別ビジネスニーズを満たすことができます。
  • 属性定義（ propTypes ）：カスタムコンポーネントのタイトル、名前、タイプ（データ形式）、デフォルト値などの基本属性をカスタマイズできます。また、コンポーネントの非表示（コンポーネントの非表示状態）、**変化時（コンポーネント表示値の違い）**などのイベントバインドが可能で、多様なビジネスニーズを満たします。詳細は、コンポーネント属性設定を参照してください。
  • ライフサイクル：カスタムコンポーネントのライフサイクルはコンポーネントレンダリング完了（componentDidMount）、コンポーネント更新完了（componentDidUpdate）、コンポーネントエラー捕捉（componentDidCatch）、コンポーネント破棄前（componentWillUnmount**）**の4つの段階に分けられます。異なるライフサイクルで異なるロジックを記述し、複雑なビジネスニーズを満たします。
  • **一意識別子：**宜搭の通常コンポーネントと同様に、カスタムコンポーネントも一意識別子属性を持ち、コンポーネントの唯一の識別コードとしてシステムが自動生成し、通常変更は不要です。宜搭バックエンドのデータ保存、コードバインドなどに使用されます。
危険

特に注意：

  • コンポーネントの一意識別子（ fiedId ）は宜搭がこのコンポーネントを指す唯一の識別コードであり、識別子を変更すると、このコンポーネントで使用される数式、データ保存（データが失われる可能性もあります）、JS関数側の参照などに影響を与える可能性があります。コンポーネントの一意識別子属性を変更しないことを強く推奨します！
  • コンポーネント識別子の変更を継続的に実行する場合（現在はschemaインポート方法でのみ可能）は、この方法でコンポーネント一意識別子を変更することを選択した場合、その結果および結果について独自に責任を負うことを表明したものとします。宜搭はその結果について一切の責任を負いません。ご理解とご協力ありがとうございます。
この文書は機械翻訳により生成されています。翻訳により生じた齟齬や相違点は拘束力を持たず、コンプライアンスや執行目的において法的効力はありません。
© DingTalk (Singapore) Private Limited