Skip to content

Commit aff9154

Browse files
committed
updates based on @Jaylyn-Barbee review
1 parent 0c26c0b commit aff9154

8 files changed

Lines changed: 51 additions & 32 deletions

File tree

57.7 KB
Loading

hub/powertoys/command-palette/add-top-level-commands-to-your-extension.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ public <ExtensionName>CommandsProvider()
5959
> The `ShowMessageCommand()` functionality was created prior at [InvokableCommand Command](adding-commands#invokableCommand-command)
6060
6161
1. Deploy your extension
62-
1. In command palette, `Reload`
62+
1. In Command Palette, `Reload`
6363

6464
![Screenshot of extension with send message command at top level](../../images/command-palette/top-level-command.png)
6565

hub/powertoys/command-palette/adding-commands.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ no-loc: [PowerToys, Windows, Insider]
1111

1212
**Previous**: [Creating an extension](creating-an-extension.md). We'll be starting with the project created in that article.
1313

14-
Now that you've created your extension, it's time to add some commands to it.
14+
Now that you've created your extension, it's time to add commands to it.
1515

16-
## Add some commands
16+
## Add commands
1717

18-
We can start by navigating to the `<ExtensionName>Page.cs` file. This file is the [ListPage](./microsoft-commandpalette-extensions-toolkit/listpage.md) that will be displayed when the user selects your extension. In there you should see:
18+
We can start by navigating to the `/Pages/<ExtensionName>Page.cs` file. This file is the [ListPage](./microsoft-commandpalette-extensions-toolkit/listpage.md) that will be displayed when the user selects your extension. In there you should see:
1919

2020
```csharp
2121
public <ExtensionName>Page()
@@ -32,7 +32,7 @@ public override IListItem[] GetItems()
3232
}
3333
```
3434

35-
Here you can see that we've set the icon for the page, the title, and the name that's shown at the top-level when you have the command selected. The `GetItems` method is where you'll return the list of commands that you want to show on this page. Right now, that's just returning a single command that does nothing. Let's instead try making that command open _this_ page in the user's default web browser.
35+
Here you can see that we've set the icon for the page, the title, and the name that's shown at the top-level when you have the command selected. The `GetItems` method is where you'll return the list of commands that you want to show on this page. Right now, it's just returning a single command that does nothing. Let's instead try making that command open _this_ page in the user's default web browser.
3636

3737
1. Update `GetItems` to the following:
3838

@@ -87,8 +87,8 @@ As your building your extension, you'll most likely want to debug it.
8787
}
8888
```
8989

90-
1. Deploy your extension, wait until it's successful
91-
1. Confirm You're in Debug Configuration
90+
1. Deploy your extension
91+
1. Confirm you're in Debug configuration
9292

9393
<details>
9494
<summary>Instructions to confirm debug configuration</summary>
@@ -114,7 +114,7 @@ As your building your extension, you'll most likely want to debug it.
114114

115115
Let's continue building a new command, that shows a **MessageBox**. To do that, we need to create a new class that implements `InvokableCommand`.
116116

117-
1. In Visual Studio, Add a New Class File
117+
1. In Visual Studio, Add a New Class File to your `Pages` directory
118118
- Keyboard Shortcut: Press Ctrl + Shift + A
119119
- Or in the Solution Explorer, go to Project > Add New Item...
120120
1. In the Add New Item dialog:
@@ -166,18 +166,18 @@ public override IListItem[] GetItems()
166166
```
167167

168168
1. Deploy your extension
169-
1. In command palette, `Reload`
169+
1. In Command Palette, `Reload`
170170

171171
And presto - a command to show a message box!
172172

173173
> [!TIP]
174174
> At about this point, you'll probably want to initialize a git repo / {other source control method of your choice} for your project. This will make it easier to track changes, and to share your extension with others.
175175
>
176-
> We recommend using GitHub, as it's easy to collaborate on your extension with others, and get feedback, and share it with the world.
176+
> We recommend using GitHub, as it's easy to collaborate on your extension with others, get feedback, and share it with the world.
177177
178178
## Types of Pages
179179

180-
So far, we've only worked with commands that "do something". However, you can also add commands that show additional pages within the Command Palette. There are basically two types of "Commands" in the Palette:
180+
So far, we've only worked with commands that "do something". However, you can also add commands that show additional pages within the Command Palette. There are two types of "Commands" in the Palette:
181181

182182
- `InvokableCommand` - These are commands that **do something**
183183
- `IPage` - These are commands that **show something**
@@ -249,10 +249,10 @@ internal sealed partial class MySecondPage : ListPage
249249
+ new ListItem(new MySecondPage()) { Title = "My second page", Subtitle = "A second page of commands" },
250250
];
251251
}
252-
```
252+
```f
253253

254254
1. Deploy your extension
255-
1. In command palette, `Reload`
255+
1. In Command Palette, `Reload`
256256

257257
You should now see a new page in your extension that shows 100 commands that copy a number to the clipboard.
258258

hub/powertoys/command-palette/command-results.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,10 @@ This is useful for commands that might have destructive actions, or that need to
6363

6464
## Example
6565

66-
Below is a page with one command for each kind of command result:
66+
Below is a page with one command for each kind of `CommandResult`:
67+
68+
1. Open `/Pages/<ExtensionName>Page.cs`
69+
1. Replace `GetItems` with the `GetItems` below:
6770

6871
```csharp
6972

@@ -72,7 +75,7 @@ using Microsoft.CommandPalette.Extensions.Toolkit;
7275

7376
internal sealed partial class <ExtensionName>Page : ListPage
7477
{
75-
public CommandResultsPage()
78+
public <ExtensionName>Page()
7679
{
7780
Icon = IconHelpers.FromRelativePath("Assets\\StoreLogo.png");
7881
Title = "Example command results";
@@ -111,6 +114,11 @@ internal sealed partial class <ExtensionName>Page : ListPage
111114
}
112115
```
113116

117+
1. Deploy your extension
118+
1. In Command Palette, `Reload`
119+
120+
![Screenshot of extension with several commands for CommandResult](../../images/command-palette/command-result.png)
121+
114122
### Next up: [Display markdown content](using-markdown-content.md)
115123

116124
## Related content

hub/powertoys/command-palette/creating-an-extension.md

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ You can deploy and run your extension:
6262
<summary>How to Deploy your extension</summary>
6363

6464
1. In the navigation bar, click on `Build`
65-
1. Click on `Deploy <ExtensionName>`
65+
1. Click on `Deploy \<ExtensionName\>`
6666

6767
</details>
6868

@@ -81,17 +81,20 @@ Once your package is deployed and running, Command Palette will automatically di
8181
> ```
8282
> These files are used by WinAppSdk to deploy your app as a package. Without it, anyone who clones your repo won't be able to deploy your extension.
8383
84-
1. In the Command Palette, scroll down the list of commands
85-
1. Press `Enter` on your <ExtensionName>
84+
1. In the Command Palette, type `Reload` and press `Enter`
85+
1. Make sure to select the `Reload` that has a subtitle of: `Reload Command Palette Extension`
86+
![Screenshot of reload](../../images/command-palette/reload.png)
87+
1. In the Command Palette, scroll all the way down to the bottom of the list of commands
88+
1. or `up arrow` once to get to the end
89+
1. Press `Enter` on your \<ExtensionName\>
8690
1. You should see a single command that says `TODO: Implement your extension here`.
8791
8892
![A screenshot of the empty extension template, running in the command palette](../../images/command-palette/initial-created-extension-list.png)
8993
9094
Congrats! You've made your first extension! Now let's go ahead and actually add some commands to it.
9195
92-
When you make changes to your extension, you can rebuild your project and deploy it again. Command Palette will **not** notice changes to packages that are re-ran through Visual Studio, so you'll need to manually run the "**Reload**" command to force Command Palette to re-instantiate your extension.
93-
94-
![Screenshot of reload](../../images/command-palette/reload.png)
96+
> [!TIP]
97+
> When you make changes to your extension, you can rebuild your project and deploy it again. Command Palette will **not** notice changes to packages that are re-ran through Visual Studio, so you'll need to manually run the "**Reload**" command to force Command Palette to re-instantiate your extension.
9598
9699
### Next up: [Add commands to your extension](adding-commands.md)
97100

hub/powertoys/command-palette/update-a-list-of-commands.md

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ Here, we're using ``AnonymousCommand`` to create a command that will update the
4747

4848
## Updating Subtitle of Page
4949

50-
You can of course create custom **ListItem** objects too:
50+
You can create custom **ListItem** objects too:
5151

5252
1. In the `Pages` folder, create a new class called `IncrementingListItem`
5353
1. Update the code to:
@@ -107,6 +107,8 @@ To do this, you can use the `RaiseItemsChanged` method on the `ListPage` object.
107107
1. Update the code to:
108108

109109
```csharp
110+
using <ExtensionName>
111+
110112
internal sealed partial class IncrementingListItem : ListItem
111113
{
112114
public IncrementingListItem(<ExtensionName>Page page) :
@@ -121,7 +123,7 @@ internal sealed partial class IncrementingListItem : ListItem
121123
}
122124
```
123125

124-
1. In `<ExtensionName>Page.cs`, replace code with:
126+
1. In `<ExtensionName>Page.cs`, replace code inside of the class:
125127

126128
```cs
127129
public <ExtensionName>Page()
@@ -145,7 +147,7 @@ private List<ListItem> _items;
145147
```
146148

147149
1. Deploy your extension
148-
1. In command palette, `Reload`
150+
1. In Command Palette, `Reload`
149151

150152
Now, every time you perform one of the `IncrementingListItem` commands, the list of items on the page will update to add another item. We're using a single **List** owned by the page to own all the items. Notably, we're creating the new items in the `Increment` method, before calling `RaiseItemsChanged`. The **Invoke** of a **InvokableCommand** can take as long as you'd like. All your code is running in a separate process from the Command Palette, so you won't block the UI. But constructing the items before calling `RaiseItemsChanged` will help keep your extension *feeling* more responsive.
151153

@@ -159,6 +161,10 @@ Everything so far has been pretty instantaneous. Many extensions however may nee
159161
1. In your `<ExtensionName>Page.cs`, replace the `Increment()`.
160162

161163
```csharp
164+
using System.Threading;
165+
166+
...
167+
162168
internal void Increment()
163169
{
164170
this.IsLoading = true;
@@ -173,7 +179,7 @@ internal void Increment()
173179
```
174180

175181
1. Deploy your extension
176-
1. In command palette, `Reload`
182+
1. In Command Palette, `Reload`
177183

178184
Best practice is to set `IsLoading` to `true` before starting the work. Then do all the work to build all the new `ListItems` you need to display to the user. Then, once the items are ready, call `RaiseItemsChanged` and set `IsLoading` back to `false`. This will ensure that the loading spinner is shown for the entire duration of the work, and that the UI is updated as soon as the work is done (without waiting for your extension to construct new `ListItem` objects).
179185

hub/powertoys/command-palette/using-form-pages.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ no-loc: [PowerToys, Windows, Insider]
1111

1212
**Previous**: [Display markdown content](using-markdown-content.md)
1313

14-
Now that we know how to present basic markdown content, let's try displaying something more elaborate by leveraging the power of **[Adaptive Cards](https://adaptivecards.io/)**. This is useful for creating forms, or for displaying more complex content.
14+
Now that we know how to present basic markdown content, let's try displaying something more meaningful by leveraging the power of **[Adaptive Cards](https://adaptivecards.io/)**. This is useful for creating forms, or for displaying more complex content.
1515

1616
## Working with forms
1717

@@ -109,6 +109,9 @@ internal sealed partial class SampleContentForm : FormContent
109109
Name = "Confirm",
110110
Result = CommandResult.KeepOpen(),
111111
},
112+
Title = "You can set a title for the dialog",
113+
Description = "Are you really sure you want to do the thing?",
114+
};
112115
return CommandResult.Confirm(confirmArgs);
113116
}
114117
}
@@ -131,7 +134,7 @@ public <ExtensionName>CommandsProvider()
131134
```
132135

133136
1. Deploy your extension
134-
1. In command palette, `Reload`
137+
1. In Command Palette, `Reload`
135138

136139
![Screenshot of extension using ContentPage for simple form](../../images/command-palette/form-simple.png)
137140

@@ -256,7 +259,7 @@ To add this content to your extension:
256259
```
257260

258261
1. Deploy your extension
259-
1. In command palette, `Reload`
262+
1. In Command Palette, `Reload`
260263

261264
![Screenshot of extension using ContentPage for simple form](../../images/command-palette/form-toggle-comdpal.png)
262265

hub/powertoys/command-palette/using-markdown-content.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ public <ExtensionName>CommandsProvider()
5959
```
6060

6161
1. Deploy your extension
62-
1. In command palette, `Reload`
62+
1. In Command Palette, `Reload`
6363

6464
In this example, a new `ContentPage` that displays a simple markdown string is created. The 'MarkdownContent' class takes a string of markdown content and renders it in the Command Palette.
6565

@@ -103,7 +103,7 @@ public class <ExtensionName>Page : ContentPage
103103
path =
104104

105105
+ Commands = [
106-
+ new CommandContextItem(new OpenUrlCommand("C:\\Path\\to\\file.txt")) { Title = "Open in File Explorer" },
106+
+ new CommandContextItem(new OpenUrlCommand(doc_path)) { Title = "Open in File Explorer" },
107107
+ ];
108108
}
109109
public override IContent[] GetContent()
@@ -119,13 +119,12 @@ public class <ExtensionName>Page : ContentPage
119119

120120
1. Update the path in the `doc_path` to a .txt file on your local machine
121121
1. Deploy your extension
122-
1. In command palette, `Reload`
122+
1. In Command Palette, `Reload`
123123
1. Select <ExtensionName>
124124
1. Press `Enter` key, the docs should open
125125

126126
![Screenshot of extension using CommandContextItem](../../images/command-palette/CommandContextItem.png)
127127

128-
129128
### Next up: [Get user input with forms](using-form-pages.md)
130129

131130
## Related content

0 commit comments

Comments
 (0)