10 Reusable Components: tab control, calendar, dialog box, map control and more

This blog post will present a set of custom controls built using the new PowerApps component feature for Canvas apps.

As a prerequisite, check out Yifie Wang’s blog post introducing the PowerApps components feature and Brian Dang’s “start your journey with components” blog post that includes instructions on importing/exporting components and more.

Before we delve into individual components, I would like to share 2 guiding principles we used as much as possible when building these controls.

1) A reusable control should offer a degree of customization and flexibility so that consumers of the controls do not need to delve into the component’s internal implementation in order to meet their requirements.

2) The interface of the control should remain simple and clean. By interface here, I mean the input and output parameters of the components.  One has to carefully consider which input parameters are worth exposing. There is a balance between providing a flexible controls and over bloating the control with too many parameters (Interface bloat).

To follow these 2 principles, we used a simple strategy where exposed only important input parameters and used a generic Styles property (a value-pair collection) to include more refined style related parameters that are useful for those who wants to further change the look and feel of the control.

You can download the demo app package here and the individual components here.

Special Thanks to Denise Moran for her contribution to this v1 iteration. You too can be a contributor. Head over to the PowerApps tools github and join the community in adding your own components.

Here is an overview of the components:

Map Control

Static Bing Map component. Allow you to render static map based on Latitude and Longitude. User can specify zoom levels, push-pins…etc

Table({Latitude:Location.Latitude,Longitude:Location.Longitude,PinStyle:1,Label:"A"},
{Latitude:47.582119,Longitude:-122.141265,PinStyle:4,Label:"C"})

Table({Key: "Imagery", Value:"Road"}, {Key: "PinStyle", Value:"50"})

Radial Gauge Control
The Gauge Control displays a value in a certain range using a needle on a circular face.

Geo-Fence Control

A non visual component that signals when the mobile device enters or leaves a particular area within a certain radius. This component will only be visible in the PowerApps Studio and will not render when the app is running.  Given Latitude, Longitude and a radius, this control will compute given the current geo-location of the device whether we are withing the specified radius.

Output

Tab Control

A tab control is a flexible navigation component that can be used to build tabbed interfaces in PowerApps applications.  Tabs can be configured to navigate to other screens or to trigger any action such as launching a different app or opening the browser. A tab control can be used for vertical and horizontal menus.

Table({ Label: "Tab 1", Screen: Screen1, Icon: "", SelectedIcon:"" },
   { Label: "Tab 2", Screen: Screen2, Icon: "", SelectedIcon:"" },
   { Label: "Tab 3", Screen: Screen3, Icon: "", SelectedIcon:"" }
)

e.g:
Table({Key: "TabControlImageWidth", Value:"30"},
      {Key: "Font", Value:"Segoe UI"})

Output

Customization:

With a little bit of customization, we can achieve a  different look and feel for the tab control:

Dialog Control

Dialog controls are modal UI overlays that provide contextual app information. They block interactions with the app window until being explicitly dismissed. They often request some kind of action from the user.

Table({Label: "Cancel", Fill:"#FFFFFF", Color:"#0086D0"},
      {Label: "Ok", Fill:"#0086D0", Color:"#FFFFFF"})

e.g:
Table({Key: "Font", Value:"Segoe UI"},
{Key: "DialogTitleFontSize", Value:16},
{Key: "DialogDescriptionFontSize", Value:12})

NumericUpDown Control

The NumericUpDown control allows users to increase or decrease a numeric value using the increment and decrement buttons.

e.g:
Table({Key: "Font", Value:"Segoe UI"},
{Key: "NudIconPadding", Value:10})

Output

Customization:

Bar-code Generator

Barcode generator for code39

Calendar Control
A calendar view lets a user view and interact with a calendar that they can navigate by month or year. A user can select a single date or a range of dates.

e.g: Table({Key: "Font", Value:"Segoe UI"})

Output

ColorPicker Control
A color picker is used to browse through and select colors. By default, it lets a user navigate through colors on a color spectrum, or specify a color in either Red-Green-Blue (RGB) or Hexadecimal textboxes.

Output

Preloader Control
A progress control provides feedback to the user that a long-running operation is underway. It can mean that the user cannot interact with the app when the progress indicator is visible, and can also indicate how long the wait time might be, depending on the indicator used.

e.g:
Table({Key: "Font", Value:"Segoe UI"})

Give it a try !  We would love to hear your feedback. We have more open-source components coming soon to the PowerApps Tools github repository…. If you have any feedback or issues, please feel free to add to https://github.com/Microsoft/powerapps-tools/issues.