Crafting Custom CommandBar Components

Once you’ve got your CommandBar up and running, what’s the next move? If you’re someone who enjoys design, you’re probably eager to give it a unique and stylish look, right? 💅

Throughout these steps, we’ll be tailoring the CommandBar to reflect your brand identity.

Default CommandBar theme

… into this. 😎

Perfecto theme that you’re about to re-create

Here’s what you exactly need 👇:

• CommandBar into your website.
• CommandBar PRO needed for customizing theme/skins and custom components integration.

Steps:

1. Open Editor → Settings tab → Styles → Skins (Theme)

Here’s where your theme/skin is currently at…

You need to initially add Commands, Categories and Tabs

2. Navigate to Base and add these values.

3. Now, go to Bar to adjust width and Placeholder to update the font color.

4. Then, go to Input and adjust padding styles.

At this point you should have something like this… easy right? 😎

CommandBar with simple styles adjustments

…shall we continue?

5. Go to Category Header and update the default values.

6. Navigate to the Search Tab and Option Selected styles section and add these values.

Your CommandBar should look something like this…

CommandBar almost Perfecto theme

7. Now, here’s the fun part. Let’s add the custom header and footer using CommandBar Enterprise SDK.

Add custom footer component using windows.CommandBar.setCustomComponent('footer', () => ...);

This is what it should look like..

CommandBar with custom footer components

Add custom header component using windows.CommandBar.setCustomComponent('header', () => ...);

Here’s what it should look like…

CommandBar with custom header components

…and you’re done 🎉

Thanks for reading and following along. I hope that this story will give value to you at some point. Please feel free to reach out if you have any questions.