サポートされているタグサポートされている TypeScript タイプ合成中のユーザーへの通信

フロントエンドウィザードを使用したブループリント機能の変更

のブループリント選択ウィザード CodeCatalyst は、 blueprint.ts ファイルのOptionsインターフェイスによって自動的に生成されます。フロントエンドウィザードは、スタイルコメントとタグ Options を使用して、ブループリントの変更と機能をサポートします。 JSDOC JSDOC スタイルコメントとタグを使用してタスクを実行できます。例えば、オプションの上に表示されるテキストを選択したり、入力検証などの機能を有効にしたり、オプションを折りたたむことができます。ウィザードは、Optionsインターフェイスから TypeScript タイプから生成された抽象構文ツリー (AST) を解釈することで機能します。ウィザードは、可能な限り最適なタイプに自動的に設定します。すべてのタイプがサポートされているわけではありません。サポートされている他のタイプには、リージョンセレクタと環境セレクタが含まれます。

以下は、ブループリントのでJSDOCコメントとタグを使用するウィザードの例ですOptions。


export interface Options {
  /**
   * What do you want to call your new blueprint?
   * @validationRegex /^[a-zA-Z0-9_]+$/
   * @validationMessage Must contain only upper and lowercase letters, numbers and underscores
   */
  blueprintName: string;

  /**
   * Add a description for your new blueprint.
   */
   description?: string;

   /**
    * Tags for your Blueprint:
    * @collapsed true
    */
  tags?: string[];
}

Options インターフェイスの各オプションの表示名はcamelCase、デフォルトでに表示されます。JSDOC スタイルコメントのプレーンテキストは、ウィザードのオプションの上にテキストとして表示されます。

サポートされているタグ

以下のJSDOCタグは、フロントエンドウィザードOptionsのカスタムブループリントでサポートされています。

@inlinePolicy ./path/to/policy/file.json

必須 - タイプのオプションRole。
使用状況 - ロールに必要なインラインポリシーを通信できます。policy.json パスはソースコードの下にあることが予想されます。ロールのカスタムポリシーが必要な場合は、このタグを使用します。
依存関係 - blueprint-cli 0.1.12以上
例 - @inlinePolicy ./deployment-policy.json


environment: EnvironmentDefinition{
    awsAccountConnection: AccountConnection{
      /**
       * @inlinePolicy ./path/to/deployment-policy.json
       */
      cdkRole: Role[];
    };
   };

@trustPolicy ./path/to/policy/file.json

必須 - タイプのオプションRole。
使用状況 - ロールに必要な信頼ポリシーを伝達できます。policy.json パスはソースコードの下にあることが予想されます。ロールのカスタムポリシーが必要な場合は、このタグを使用します。
依存関係 - blueprint-cli 0.1.12以上
例 - @trustPolicy ./trust-policy.json


environment: EnvironmentDefinition{
    awsAccountConnection: AccountConnection{
      /**
       * @trustPolicy ./path/to/trust-policy.json
       */
      cdkRole: Role[];
    };
   };

@validationRegex Regex 式

必須 - オプションを文字列にする必要があります。
使用状況 - 指定された正規表現を使用してオプションの入力検証を実行し、を表示します@validationMessage。
例 - @validationRegex /^[a-zA-Z0-9_]+$/
レコメンデーション - で使用します@validationMessage。デフォルトでは、検証メッセージは空です。

@validationMessage string

使用状況を確認するには - @validationRegexまたはその他のエラーが必要です。
使用状況 - @validation* 失敗時に検証メッセージを表示します。
例 - @validationMessage Must contain only upper and lowercase letters, numbers, and underscores。
レコメンデーション - で使用します@validationMessage。デフォルトでは、検証メッセージは空です。

@collapsed ブール値 (オプション）

必須 - 該当なし
使用状況 - サブオプションを折りたためるようにするブール値。折りたたまれた注釈がある場合、デフォルト値は true です。値をに設定すると、最初に開いている折りたたみ可能なセクション@collapsed falseが作成されます。
例 - @collapsed true

@displayName string

必須 - 該当なし
使用状況 - オプションの表示名を変更します。表示名の camelCase 以外の形式を許可します。
例 - @displayName Blueprint Name

@displayName string

必須 - 該当なし
使用状況 - オプションの表示名を変更します。表示名の camelCase 以外の形式を許可します。
例 - @displayName Blueprint Name

@defaultEntropy number

必須 - オプションを文字列にする必要があります。
使用状況 - 指定された長さのランダム化された英数字の文字列をオプションに追加します。
例 - @defaultEntropy 5

@placeholder 文字列 (オプション）

必須 - 該当なし
使用状況 - デフォルトのテキストフィールドプレースホルダーを変更します。
例 - @placeholder type project name here

@textArea number (オプション）

必須 - 該当なし
使用状況 - 文字列入力をテキストエリアコンポーネントに変換して、テキストのより大きなセクションにします。数値を追加すると、行数が定義されます。デフォルトは 5 行です。
例 - @textArea 10

@hidden ブール値 (オプション）

必須 - 該当なし
使用状況 - 検証チェックが失敗しない限り、ユーザーからファイルを非表示にします。デフォルト値は true です。
例 - @hidden

@button ブール値 (オプション）

必須 - 該当なし
使用状況 - 注釈はブール型プロパティにある必要があります。選択時に true として合成するボタンを追加します。トグルではありません。

例 - buttonExample: boolean;


/**
  * @button
  */
buttonExample: boolean;

@showName boolean (オプション）

必須 - 該当なし
使用状況 - アカウント接続タイプでのみ使用できます。非表示の名前の入力を表示します。デフォルトは default_environment です。

例 - @showName true


/**
  * @showName true
  */
accountConnection: AccountConnection<{
    ...
}>;

@showEnvironmentType boolean (オプション）

必須 - 該当なし
使用状況 - アカウント接続タイプでのみ使用できます。非表示の環境タイプのドロップダウンメニューを表示します。すべての接続のデフォルトはですproduction。オプションは非本番または本番です。

例 - @showEnvironmentType true


/**
  * @showEnvironmentType true
  */
accountConnection: AccountConnection<{
    ...
}>;

@forceDefault boolean (オプション）

必須 - 該当なし
使用状況 - ユーザーによって以前に使用された値の代わりに、設計図作成者によって提供されたデフォルト値を使用します。

例 - forceDeafultExample: any;


/**
  * @forceDefault
  */
forceDeafultExample: any;

@requires blueprintName

必須 - Optionsインターフェイスに注釈を付けます。
使用状況 - 現在の設計図の要件として、プロジェクトblueprintNameに指定されたを追加するようユーザーに警告します。

例 - @requires '@amazon-codecatalyst/blueprints.blueprint-builder'


/*
 * @requires '@amazon-codecatalyst/blueprints.blueprint-builder'
 */
export interface Options extends ParentOptions {
...

@filter 正規表現

必須 - Selectorまたは MultiSelectインターフェイスに注釈を付けます。
使用状況 - ウィザードのドロップダウンを、指定された正規表現に一致するオプションにフィルタリングします。

例 - @filter /blueprintPackageName/


 /**
     * @filter /myPackageName/
     */
    blueprintInstantiation?: Selector<BlueprintInstantiation>;
...

サポートされている TypeScript タイプ

以下の TypeScript タイプは、フロントエンドウィザードOptionsのカスタムブループリントでサポートされています。

数

必須 - タイプのオプションnumber。
使用状況 - 数値入力フィールドを生成します。
例 - age: number


{
  age: number
  ...
}

文字列

必須 - タイプのオプションstring。
使用状況 - 文字列入力フィールドを生成します。
例 - name: string


{
  age: string
  ...
}

文字列リスト

必須 - オプションをタイプの配列にする必要がありますstring。
使用状況 - 文字列リスト入力を生成します。
例 - isProduction: boolean


{
  isProduction: boolean
  ...
}

[Checkbox] (チェックボックス)

必須 - オプションをにする必要がありますboolean。
使用状況 - チェックボックスを生成します。
例 - isProduction: boolean


{
  isProduction: boolean
  ...
}

ラジオ

必須 - オプションは 3 つ以下の文字列の結合になります。
使用状況 - 選択したラジオを生成します。

注記
4 つ以上の項目がある場合、このタイプはドロップダウンとしてレンダリングされます。
例 - color: 'red' | 'blue' | 'green'


{
  color: 'red' | 'blue' | 'green'
  ...
}

必須 - オプションは 4 つ以上の文字列の結合です。
使用状況 - ドロップダウンを生成します。
例 - runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'


{
  runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'
  ...
}

拡張可能なセクション

必須 - オブジェクトにオプション。
使用状況 - 拡張可能なセクションを生成します。オブジェクトのオプションは、ウィザードの拡張可能なセクション内にネストされます。
例 -


{
     expandableSectionTitle: {
         nestedString: string;
         nestedNumber: number;
     }
}

タプル

必須 - オプションをタイプにする必要がありますTuple。
使用状況 - キーと値の有料入力を生成します。
例 - tuple: Tuple[string, string]>


{
    tuple: Tuple[string, string]>;
    ...
}

タプルリスト

必須 - オプションはタイプの配列ですTuple。
使用状況 - タプルリスト入力を生成します。
例 - tupleList: Tuple[string, string]>[]


{
  tupleList: Tuple[string, string]>[];
  ...
}

Selector

必須 - オプションをタイプにする必要がありますSelector。
使用状況 - プロジェクトに適用されるソースリポジトリまたはブループリントのドロップダウンを生成します。
例 - sourceRepo: Selector<SourceRepository>


{
    sourceRepo: Selector<SourceRepository>;
    sourceRepoOrAdd: Selector<SourceRepository | string>;
    blueprintInstantiation: Selector<BlueprintInstantiation>;
  ...
}

複数選択

必須 - オプションをタイプにする必要がありますSelector。
使用状況 - 複数選択入力を生成します。
例 - multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>


{
  multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>;
  ...
}

合成中のユーザーへの通信

ブループリント作成者は、検証メッセージだけでなく、ユーザーと通信することもできます。例えば、スペースメンバーは、明確でない設計図を生成するオプションの組み合わせを表示する場合があります。カスタム設計図は、合成を呼び出すことでエラーメッセージをユーザーに伝える機能をサポートしています。ベースブループリントは、明確なエラーメッセージを期待するthrowSynthesisError(...)関数を実装します。以下を使用してメッセージを呼び出すことができます。


//blueprint.ts
this.throwSynthesisError({
   name: BlueprintSynthesisErrorTypes.BlueprintSynthesisError,
   message: 'hello from the blueprint! This is a custom error communicated to the user.'
})

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

プロジェクト要件を満たすためのカスタム設計図の開発

入力の生成とフロントエンドウィザード要素のレンダリング

フロントエンドウィザードを使用したブループリント機能の変更

トピック

サポートされているタグ

@inlinePolicy ./path/to/policy/file.json

@trustPolicy ./path/to/policy/file.json

@validationRegex Regex 式

@validationMessage string

@collapsed ブール値 (オプション）

@displayName string

@displayName string

@defaultEntropy number

@placeholder 文字列 (オプション）

@textArea number (オプション）

@hidden ブール値 (オプション）

@button ブール値 (オプション）

@showName boolean (オプション）

@showEnvironmentType boolean (オプション）

@forceDefault boolean (オプション）

@requires blueprintName

@filter 正規表現

サポートされている TypeScript タイプ

数

文字列

文字列リスト

[Checkbox] (チェックボックス)

ラジオ

注記

ドロップダウン

拡張可能なセクション

タプル

タプルリスト

Selector

複数選択

合成中のユーザーへの通信