search

microsoft / azure-devops-extension-sample

Sample web extension for Azure DevOps
MIT License
240 stars 159 forks source link

Saving the value of custom group/control #29

Open arctern opened 5 years ago

arctern commented 5 years ago

Hi,

I'm probably missing something obvious here. I just copied the following lines and import statements from WorkItemOpen.tsx to WorkItemFormGroup.tsx. private workItemIdValue = new ObservableValue("1"); <TextField className="sample-work-item-id-input" label="Existing work item id" value={this.workItemIdValue} onChange={(ev, newValue) => { this.workItemIdValue.value = newValue; }} />

How to achieve the following things:

  1. Save button to be enabled when I enter any text in the textbox. Similar to how it behaves if you write in any other fields.

    Capture

  2. Actually save the custom control's/group's value. Do I have to save the value separately in onSaved event handler and then populate it on onLoaded when the work item is opened?

nystrup commented 4 years ago

The same button will be enabled automatically when you change one or more work item fields.

A html control, like the textbox in your case, isn't automatically backed by a work item field, however, so you must first create a new work item field in Azure DevOps, then you'll have to manually set/update this backing field with the value of the control at an appropriate time (perhaps whenever the control value changes). Note that this isn't the same as saving the value; you're just registring the value as having been changed in the UI, which is what enables the Save button.

You don't have to handle the onSaved event at all; any changes you've made to the work item fields will automatically be persisted when the user clicks the Save button.

In the onLoaded event handler, you'll have to update the UI with the value of the backing work item field.

Additionally, you'll probably want to handle the onReset and onUnload events, taking care not to enter into any infinite event loops.

const fieldName = "MyExistingWorkItemField";

// Get work item form service (allows you to access the contex work item and its fields).
let service = await SDK.getService<IWorkItemFormService>("ms.vss-work-web.work-item-form");

// Get current field value in context (the unsaved value if it has been changed and Save not yet clicked).
let fieldValue = await service.getFieldValue(fieldName);

// Get last saved field value.
fieldValue = await service.getFieldValue(fieldName, true);

// Register field value as changed.
await service.setFieldValue(fieldName, "SomeNewFieldValue");