I am a newbie to Azure Devops extensions (and indeed to Typescript although I have considerable programming experience in other technologies). Nevertheless, I need to get something done and hoped I could get up the steep learning curve fairly quickly although the microsoft documentation is woefully inadequate.
I managed to get one part of what I needed done by triggering building a workItemFormGroup extension which was triggered on the onFieldChanged event and that works quite nicely. Now, however, the second part of what I want to do is proving more difficult.
I want a backlog view of a Portfolio backlog which displays a panel in the right-hand side (where the backlog Planning panel shows up if you select it from the configuration menu) and indeed, I can render and populate this panel from the extension just fine. However the documentation suggests that you should be able to register a workItemSelectionChanged event via the SDK.register() function which will fire when the user clicks on a different workitem in the backlog list.
However, this event never fires. The documentation is super-sketchy around this event and the panel samples from Microsoft's Github sample repository don't use it so I'm beginning to wonder if it even exists. Does anyone know?
Here's the code skeleton of what I'm trying to do - I stripped out all the other extraneous crap
import * as React from 'react';
import * as SDK from 'azure-devops-extension-sdk';
import { showRootComponent } from "../../Common";
const BacklogPanel: React.FC = () => {
React.useEffect(() => {
// Initialize your extension here and set up any event listeners
async function initSDK() {
console.log("Here - init SDK");
await SDK.init();
const contributionId = SDK.getContributionId();
console.log(contributionId);
//Register a listener for work item selection changes
SDK.register(SDK.getContributionId(), () => {
return {
//@ts-ignore
workItemSelectionChanged: (args: any) => {
// Handle selection changes
console.log(args);
}
};
});
console.log("Registered");
};
initSDK();
}, []);
return (
<div>Stuff goes here if/when the event triggers.</div>
);
};
export default BacklogPanel;
showRootComponent(<BacklogPanel />);
Since the panel appears in the right place and the text in it renders ok, I believe I have the right Target and Contribution in my vss-extension.json plus the output in the Console log is all as expected so now I'm just baffled, or - as I said - believe that Microsoft have lied and that there is no such event in that panel?