How to preselect checkbox in showQuickPick in vscode-CodePudding

I am using quickpick to display list of items and allowing user to do multiselect. I am using quickpick like this.

context.subscriptions.push(vscode.commands.registerCommand('accurev.showCpkFields', async () => {
  const cpkFieldsList = await vscode.window.showQuickPick(AccurevOperations.cpkFieldsList, { placeHolder: localize(Messages.LIST_OF_CPK_FIELDS), ignoreFocusOut: true, canPickMany: true});
  writeCpkFieldsToCnfFile(cpkFieldsList);
}));

I trying to make like if user previously selected some items in the quick pick and next time use opened this quick pick I want to preselect the previously selected values. Is it feasible to do it in vscode extension development.

CodePudding user response：

the object vscode::QuickPickItem has a property

picked

Optional flag indicating if this item is picked initially.

CodePudding user response：

There are two options. In both cases you'll have to make QuickPickItems out of your AccurevOperations.cpkFieldsList as you cannot just pass strings as the first argument and use the pre-selection capability. It isn't difficult to do this, just loop through that AccurevOperations.cpkFieldsList array and create objects with the QuickPickItem properties you want, like:

const arr = ["1", "2", "3"];

// const quickPickItems = arr.map(item => ( { label: item, picked: true } ) ); // but this would select them all

const quickPickItems = arr.map(item => {
  if (Number(item) % 2 != 0) return { label: item, picked: true };
  else return { label: item }
});

So you would use your logic to set the items you want pre-selected to have the picked:true object property. Then

const options = { canPickMany: true };
const qp = vscode.window.showQuickPick(quickPickItems, options);

should show a QuickPick with your selected items.

The other option is to use the createQuickPick method instead, because with that you can use its selectedItems property. So starting with your array:

const arr = ["1", "2", "3"];
const quickPickItems = arr.map(item => ( { label: item } ) ); // and whatever other properties each item needs, perhaps nothing other than label

const qp = vscode.window.createQuickPick();
qp.canSelectMany = true;
qp.items = quickPickItems;
qp.selectedItems = [quickPickItems[0], quickPickItems[2]]; // your logic here

qp.show();

You will have to create an array of objects to assign to the selectedItems property. Perhaps by filtering the quickPickItems array (from above) for the labels you want pre-selected:

qp.selectedItems = quickPickItems.filter(item => {
  return item.label === "1" || item.label === "3";
});