Update documentation

readme.md

@@ -11,7 +11,7 @@
 ![Control Expanded](img/operatingSystemExpanded.png)
 
 # How to get started
-## Visual Studio Team Services
+## Azure Devops Services
 
 Navigate to your work item form customization page and add a multivalue control.
 
@@ -21,7 +21,11 @@ Edit the control so it can use the right field to store your selection and the r
 
 ![Options](img/options.png)
 
-## TFS On-Premises
+Be sure to allow user inputed values if a picklisk (string) field is used to back the extension.
+
+![check the box to allow users to enter their own values](img/allowedValues.png)
+
+## Azure Devops Server
 We recommend TFS 2017 RC2 or later when running this extension.
 
 [Learn more](https://github.com/Microsoft/vsts-extension-multivalue-control/blob/master/xmldetails.md) about how to customize the multivalue control directly on XML.

src/MultiValueControl.tsx

@@ -16,7 +16,7 @@ interface IMultiValueControlProps {
     onSelectionChanged?: (selection: string[]) => Promise<void>;
     forceValue?: boolean;
     options: string[];
-    error: string;
+    error: JSX.Element;
     onBlurred?: () => void;
     onResize?: () => void;
 }

src/MultiValueEvents.tsx

@@ -7,6 +7,8 @@ import { getSuggestedValues } from "./getSuggestedValues";
 import { MultiValueControl } from "./MultiValueControl";
 
 initializeIcons();
+const HELP_URL = "https://github.com/Microsoft/vsts-extension-multivalue-control#azure-devops-services";
+
 export class MultiValueEvents {
     public readonly fieldName = VSS.getConfiguration().witInputs.FieldName;
     private readonly _container = document.getElementById("container") as HTMLElement;
@@ -15,7 +17,7 @@ export class MultiValueEvents {
     private _fired: number = 0;
 
     public async refresh(selected?: string[]): Promise<void> {
-        let error = "";
+        let error = <></>;
         if (!selected) {
             if (this._fired) {
                 this._fired--;
@@ -67,15 +69,18 @@ export class MultiValueEvents {
             this._onRefreshed = resolve;
         });
     }
-    private async _checkFieldType(): Promise<string> {
+    private async _checkFieldType(): Promise<JSX.Element> {
         const formService = await WorkItemFormService.getService();
         const inv = await formService.getInvalidFields();
         if (inv.length > 0 && inv.some((f) => f.referenceName === this.fieldName)) {
             const field = await getClient().getField(this.fieldName);
             if (field.isPicklist) {
-                return `Set the field ${field.name} to use suggested values rather than allowed values`;
+                return <div>
+                    {`Set the field ${field.name} to use suggested values rather than allowed values. `}
+                    <a href={HELP_URL} target="_blank">{"See documentation"}</a>
+                </div>;
             }
         }
-        return "";
+        return <></>;
     }
 }

src/multi-selection.css

@@ -21,4 +21,7 @@
 }
 #container .multi-value-control .error {
     color: red;
+}
+#container {
+    padding-bottom: 3px;
 }

vss-extension.json

@@ -1,7 +1,7 @@
 {
     "manifestVersion": 1.0,
     "id": "vsts-extensions-multivalue-control",
-    "version": "2.1.4",
+    "version": "2.1.14",
     "name": "Multivalue control",
     "description": "A work item form control which allows selection of multiple values.",
     "publisher": "ms-devlabs",