Skip to content

Latest commit

 

History

History
91 lines (51 loc) · 3.97 KB

portalfx-ui-concepts.md

File metadata and controls

91 lines (51 loc) · 3.97 KB

UI Concepts

Before you start building an extension for the portal, take a few minutes to review our terminology and concepts.

The dashboard

The dashboard is the first thing users see when they sign in to the portal. It's fully customizable - users can resize, re-order, pin, or unpin tiles to create a unique start experience. It also includes an integrated tile gallery, where users can pick and choose from new tiles that display information most relevant to them (and their resources).

alt-text

Blades

Blades are the primary way that users navigate through the portal. They show contextual information based on the object that opens them. There are several different blades types, but for the most part you can group them into two categories: non-customizable (or locked) blades, and customizable (or unlocked) blades. New blades open left to right, and stay open so users can visualize where they are in their workflow.

Blade

TemplateBlade

This is the main and recommended authoring model for UI in the portal. The basic idea is that you provide an HTML template with your UI and a ViewModel with the logic that binds to that HTML template.

MenuBlade

Show a menu at the left of a blade. This blade gets combined by the Shell with the blade that its opened at its right.

Locked blades

Locked blades are usually task-focused (looking at a list of data, performing an action, etc.) and can't be user customized. You should only use a Blade or Locked Blade when creating Resource blade.

Learn more

Commands

Users click a command to take a specific action in a specific resource. Commands can show dialogs to confirm a direct action, or they can open blades to perform an indirect action. Never use commands as a navigation tool.

alt-text

Learn more

Parts

A tile is the core UI component in the portal. Each one contains chunks of information updated in real time. Tiles can be resized, removed, pinned, or dragged to another blade.

Design each tile to work in at least 3 different sizes so they can be easily customized. UX and Dev need to create multiple layouts and define the appropriate data ramp to make sure that larger parts provide additional data and context.

Part

Learn more

Top bar

The top nav exposes global search (search works against resources only), notifications, settings, help, feedback and user directories (if they have more than one).

The top nav bar doesn't require any extension-specific work from you.

Left nav

By default, the left nav shows the most-used Azure services. Users can click Favorites in the Browse menu to add, remove, or reorder services.

The left nav doesn't require any extension-specific work from you.

Marketplace

The marketplace houses all Microsoft and partner offerings, ranging from simple resources to complex multi-tier applications. Each can be installed using a simple wizard.

Before your package is allowed into the marketplace, you'll need to onboard with the Marketplace team. You'll also be expected to supply a set of marketplace icons for each one of your packages.

Learn more