What's the easiest way to test a createUIDefinion.json file for Azure solution templates?

Question

I'm in the process of publishing my solution template in the Azure marketplace.

My mainTemplate.json file, for example, is easy to test without publishing because I can deploy from Git. But I can't seem to test the UI file via Git deployment.

So the problem is getting my createUIdefinition.json file tested in a timely fashion. It seems like every time I made a change to the createUIdefinition.json file, I have to upload a new package to the publishing portal, which means I have to wait for Microsoft certification before I can stage a test. It's a 24-hour process.

Is there an easier way to test my createUIdefinition.json changes without going through that process?

For example, I have a bug somewhere in the regex that validates one of my user inputs:

 {
        "name": "EmailUser",
        "type": "Microsoft.Common.TextBox",
        "label": "Email Address",
        "toolTip": "The email address for your account",
        "defaultValue": "",
        "constraints": {
          "required": true,
          "regex": "\\w+([-+.']\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*",
          "validationMessage": "Must be a valid email address."
  }

(Side note, if anyone can spot my bug -- maybe when escaping the characters? -- please let me know! No email address validates properly.)

And it's driving me a bit batty having to wait a day just to test my supposed fixes. There must be a better way, thanks!

Answer 1

I found my answer. There's a specially crafted URL that can be used to preview createUIDefinition.json. The format is like this:

<a href="https://portal.azure.com/#blade/Microsoft_Azure_Compute/CreateMultiVmWizardBlade/internal_bladeCallId/anything/internal_bladeCallerParams/{"initialData":{},"providerConfig":{"createUiDefinition":"URL_ENCODED_LINK TO_createUiDefinition.json"}}">[Preview createUiDefinition.json]</a>

So the steps to test are:

1. upload createUIdefinition.json to a public-accessible URL (github or Azure blob storage both work fine)
2. Modify the above link with the full URL to your file.
3. Paste it into a browser.
4. Login to Azure when prompted, you will be redirected to your UI blade(s).
5. Use F12 to bring up your script console in your browser to see the json-formatted output after filling in your UI values.

Note that you can't do a full deployment here, these steps are only for testing your UI, validating your regex, etc. You still need to test the output and make sure it works with your mainTemplate.json file with a separate deployment.

Answer 2

The Azure Portal now has a more intuitive way of testing. Go to aka.ms/createuidef/sandbox, paste your createUiDefinition.json, and click preview to see how it looks. This way you can make changes and see them in real-time without having to republish.