다음을 통해 공유


Microsoft.Common.TextBox UI 요소

TextBox UI(사용자 인터페이스) 요소를 사용하여 서식 없는 텍스트를 추가할 수 있습니다. 요소는 한 줄 입력 필드이지만 multiLine 속성을 사용하여 여러 줄 입력을 지원합니다.

UI 샘플

TextBox 요소는 한 줄 또는 여러 줄 텍스트 상자를 사용합니다.

한 줄 텍스트 상자의 예입니다.

Microsoft.Common.TextBox UI 요소를 사용하는 한 줄 텍스트 상자의 스크린샷

여러 줄 텍스트 상자의 예입니다.

Microsoft.Common.TextBox UI 요소를 사용하는 여러 줄 텍스트 상자의 스크린샷

스키마

{
  "name": "nameInstance",
  "type": "Microsoft.Common.TextBox",
  "label": "Name",
  "defaultValue": "contoso123",
  "toolTip": "Use only allowed characters",
  "placeholder": "",
  "multiLine": false,
  "constraints": {
    "required": true,
    "validations": [
      {
        "regex": "^[a-z0-9A-Z]{1,30}$",
        "message": "Only alphanumeric characters are allowed, and the value must be 1-30 characters long."
      },
      {
        "isValid": "[startsWith(steps('resourceConfig').nameInstance, 'contoso')]",
        "message": "Must start with 'contoso'."
      }
    ]
  },
  "visible": true
}

샘플 출력

"contoso123"

설명

  • toolTip 속성을 사용하여 마우스 커서가 정보 기호 위에 있을 때 요소에 관한 텍스트를 표시합니다.
  • placeholder 속성은 사용자가 편집을 시작할 때 사라지는 도움말 텍스트입니다. placeholderdefaultValue를 둘 다 정의하면 defaultValue가 우선 적용되고 표시됩니다.
  • multiLine 속성은 부울, true 또는 false입니다. 여러 줄 텍스트 상자를 사용하려면 속성을 true로 설정합니다. 여러 줄 텍스트 상자가 필요하지 않은 경우 속성을 false로 설정하거나 속성을 제외합니다. 새 줄의 경우 JSON 출력은 줄 피드에 대해 \n을 표시합니다. 여러 줄 텍스트 상자는 CR(캐리지 리턴)에 대해 \r을 수락하고 LF(줄 피드)에 대해 \n을 수락합니다. 예를 들어 기본값은 CRLF(캐리지 리턴 및 줄 바꿈)를 지정하는 데 포함될 \r\n 수 있습니다.
  • constraints.requiredtrue로 설정하면 텍스트 상자에서 유효성을 성공적으로 검사할 수 있는 값을 포함해야 합니다. 기본값은 false입니다.
  • validations 속성은 텍스트 상자에 제공된 값을 확인하기 위한 조건을 추가하는 배열입니다.
  • regex 속성은 JavaScript 정규식 패턴입니다. 지정하면 텍스트 상자의 값이 유효성을 성공적으로 검사하기 위한 패턴과 일치해야 합니다. 기본값은 null입니다. regex 구문에 관한 자세한 내용은 정규식 빠른 참조를 참조하세요.
  • isValid 속성은 true 또는 false로 평가되는 식을 포함합니다. 식 내에서 텍스트 상자가 유효한지 여부를 결정하는 조건을 정의합니다.
  • message 속성은 텍스트 상자의 값이 유효성 검사에 실패할 때 표시할 문자열입니다.
  • requiredfalse로 설정되면 regex에 대한 값을 지정할 수 있습니다. 이 시나리오에서는 텍스트 상자에서 유효성을 성공적으로 검사하는 데 값이 필요하지 않습니다. 지정하는 경우 정규식 패턴과 일치해야 합니다.

예제

이 예제에서는 한 줄 텍스트 상자와 여러 줄 텍스트 상자를 사용하는 방법을 보여 줍니다.

한 줄

다음 예제에서는 Microsoft.Solutions.ArmApiControl 컨트롤이 있는 텍스트 상자를 사용하여 리소스 이름의 가용성을 확인합니다.

이 예제에서는 스토리지 계정 이름을 입력하고 텍스트 상자를 종료하면 컨트롤에서 이름이 유효한지와 사용 가능한지를 확인합니다. 이름이 유효하지 않거나 이미 있는 경우 오류 메시지가 표시됩니다. 유효하고 사용 가능한 스토리지 계정 이름이 출력에 표시됩니다.

{
  "$schema": "https://schema.management.azure.com/schemas/0.1.2-preview/CreateUIDefinition.MultiVm.json#",
  "handler": "Microsoft.Azure.CreateUIDef",
  "version": "0.1.2-preview",
  "parameters": {
    "basics": [
      {
        "name": "nameApi",
        "type": "Microsoft.Solutions.ArmApiControl",
        "request": {
          "method": "POST",
          "path": "[concat(subscription().id, '/providers/Microsoft.Storage/checkNameAvailability?api-version=2021-09-01')]",
          "body": {
            "name": "[basics('txtStorageName')]",
            "type": "Microsoft.Storage/storageAccounts"
          }
        }
      },
      {
        "name": "txtStorageName",
        "type": "Microsoft.Common.TextBox",
        "label": "Storage account name",
        "constraints": {
          "validations": [
            {
              "isValid": "[basics('nameApi').nameAvailable]",
              "message": "[basics('nameApi').message]"
            }
          ]
        }
      }
    ],
    "steps": [],
    "outputs": {
      "textBox": "[basics('txtStorageName')]"
    }
  }
}

여러 줄

이 예제에서는 multiLine 속성을 사용하여 자리 표시자 텍스트가 있는 여러 줄 텍스트 상자를 만듭니다.

{
  "$schema": "https://schema.management.azure.com/schemas/0.1.2-preview/CreateUIDefinition.MultiVm.json#",
  "handler": "Microsoft.Azure.CreateUIDef",
  "version": "0.1.2-preview",
  "parameters": {
    "basics": [
      {
        "name": "demoTextBox",
        "type": "Microsoft.Common.TextBox",
        "label": "Multi-line text box",
        "defaultValue": "",
        "toolTip": "Use 1-60 alphanumeric characters, hyphens, spaces, periods, and colons.",
        "placeholder": "This is a multi-line text box:\nLine 1.\nLine 2.\nLine 3.",
        "multiLine": true,
        "constraints": {
          "required": true,
          "validations": [
            {
              "regex": "^[a-z0-9A-Z -.:\n]{1,60}$",
              "message": "Only 1-60 alphanumeric characters, hyphens, spaces, periods, and colons are allowed."
            }
          ]
        },
        "visible": true
      }
    ],
    "steps": [],
    "outputs": {
      "textBox": "[basics('demoTextBox')]"
    }
  }
}

다음 단계