{"id":1659,"date":"2019-02-26T10:08:00","date_gmt":"2019-02-26T18:08:00","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/powerapps-ten-reusable-components\/"},"modified":"2025-06-11T08:05:05","modified_gmt":"2025-06-11T15:05:05","slug":"powerapps-ten-reusable-components","status":"publish","type":"post","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/powerapps-ten-reusable-components\/","title":{"rendered":"10 Reusable Components: tab control, calendar, dialog box, map control and more"},"content":{"rendered":"

This blog post will present a set of custom controls built using the new PowerApps component feature for Canvas apps.<\/p>\n

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

\"Control<\/p>\n

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

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.<\/p>\n

2) The interface of the control should remain simple and clean. By interface here, I mean the input and output parameters of the components.\u00a0 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).<\/p>\n

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.<\/p>\n

You can download the demo app package\u00a0here<\/span> <\/a>and the individual components here<\/a>.<\/p>\n

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

Here is an overview of the components:<\/p>\n

Map Control<\/strong><\/h3>\n

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

\"\"<\/p>\n

\u00a0<\/p>\n\n\n\n\n\n\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Latitude<\/td>\nSets the latitude of the location.<\/td>\n<\/tr>\n
Longitude<\/td>\nSets the longitude of the location.<\/td>\n<\/tr>\n
Zoom<\/td>\nZoom level of the map component.<\/td>\n<\/tr>\n
Key<\/td>\nRequired Bing Map Key to use the component.<\/p>\n

https:\/\/docs.microsoft.com\/en-us\/bingmaps\/getting-started\/bing-maps-dev-center-help\/getting-a-bing-maps-key<\/a><\/td>\n<\/tr>\n

Pushpins<\/td>\nSets a collection of pins that is rendered within the map.<\/p>\n
Table({Latitude:Location.Latitude,Longitude:Location.Longitude,PinStyle:1,Label:\"A\"},\n{Latitude:47.582119,Longitude:-122.141265,PinStyle:4,Label:\"C\"})<\/pre>\n<\/td>\n<\/tr>\n
Show Zoom<\/td>\nSets the visibility of the zooming buttons.<\/td>\n<\/tr>\n
Styles<\/td>\nSets a collection of styles that controls various visual aspects of the map.<\/p>\n
Table({Key: \"Imagery\", Value:\"Road\"}, {Key: \"PinStyle\", Value:\"50\"})<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Radial Gauge Control
\n<\/strong>The Gauge Control\u00a0displays a value in a certain range using a needle on a circular face.<\/p>\n
\"\"<\/p>\n\n\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Default<\/td>\nSets the default\u00a0% value of the Gauge. Range from 0-100.<\/td>\n<\/tr>\n
Indicator Image Url<\/td>\nSets the image representing the needle of the gauge.<\/td>\n<\/tr>\n
Gauge Background Url<\/td>\nSets the image representing the semi-circle<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Geo-Fence Control<\/strong><\/h3>\n
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.\u00a0 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.<\/p>\n
\"\"<\/p>\n\n\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Latitude<\/td>\nSets the latitude of the target location.<\/td>\n<\/tr>\n
Longitude<\/td>\nSets the longitude of the target location.<\/td>\n<\/tr>\n
Radius<\/td>\nRadius in Kilometer<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Output<\/strong><\/span><\/p>\n\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
IsWithinRadius<\/td>\nGets a boolean value signaling whether the distance between current location and specified location (Latitude and Longitude) is within the radius.<\/td>\n<\/tr>\n
Distance<\/td>\nGets the distance in Kilometer between current location and specified location<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Tab Control<\/strong><\/p>\n
A tab control is a flexible navigation component that can be used to build tabbed interfaces in PowerApps applications.\u00a0 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.<\/p>\n
\"\"<\/p>\n
\u00a0<\/p>\n\n\n\n\n\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Color<\/td>\nSets the text color.<\/td>\n<\/tr>\n
Selected Color<\/td>\nSets the text color when the tab is selected.<\/td>\n<\/tr>\n
Size<\/td>\nSets the font size of the text.<\/td>\n<\/tr>\n
IsVertical<\/td>\nSets the orientation of the tab control.<\/td>\n<\/tr>\n
Items<\/td>\n\n
Table({ Label: \"Tab 1\", Screen: Screen1, Icon: \"\", SelectedIcon:\"\" },\n   { Label: \"Tab 2\", Screen: Screen2, Icon: \"\", SelectedIcon:\"\" },\n   { Label: \"Tab 3\", Screen: Screen3, Icon: \"\", SelectedIcon:\"\" }\n)<\/pre>\n<\/td>\n<\/tr>\n
Styles<\/td>\nSets a collection of styles that controls various visual aspects of the tab control.<\/p>\n
e.g:\nTable({Key: \"TabControlImageWidth\", Value:\"30\"},\n      {Key: \"Font\", Value:\"Segoe UI\"})<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Output<\/strong><\/span><\/p>\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Selected<\/td>\nSets the selected tab item.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Customization:<\/span><\/strong><\/p>\n
With a little bit of customization, we can achieve a\u00a0 different look and feel for the tab control:<\/p>\n
\"\"<\/h3>\n
Dialog Control<\/strong><\/h3>\n
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.<\/p>\n
\"\"<\/p>\n\n\n\n\n\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
OpenClose<\/td>\n<\/td>\n<\/tr>\n
Buttons<\/td>\n\n
Table({Label: \"Cancel\", Fill:\"#FFFFFF\", Color:\"#0086D0\"},\n      {Label: \"Ok\", Fill:\"#0086D0\", Color:\"#FFFFFF\"})<\/pre>\n<\/td>\n<\/tr>\n
Title<\/td>\nSets Title of the Dialog Box.<\/td>\n<\/tr>\n
Description<\/td>\nSets the body text of the dialog box.<\/td>\n<\/tr>\n
Styles<\/td>\n\n
e.g:\nTable({Key: \"Font\", Value:\"Segoe UI\"},\n{Key: \"DialogTitleFontSize\", Value:16},\n{Key: \"DialogDescriptionFontSize\", Value:12})\n\n<\/pre>\n<\/td>\n<\/tr>\n
OverlayColor<\/td>\nSets a collection of styles that controls various visual aspects of the tab control<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
NumericUpDown Control<\/strong><\/h3>\n
The NumericUpDown control allows users to increase or decrease a numeric value using the increment and decrement buttons.<\/p>\n
\"\"<\/p>\n
\u00a0<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Min<\/td>\nSets the minimum value to which the user can set for the NumericUpDown.<\/td>\n<\/tr>\n
Max<\/td>\nSets the maximum value to which the user can set for the NumericUpDown.<\/td>\n<\/tr>\n
Increment<\/td>\nSets the increment used when user increments or decrements the NumericUpDown.<\/td>\n<\/tr>\n
BorderThickness<\/td>\nSets the border thickness of the NumericUpDown.<\/td>\n<\/tr>\n
BorderColor<\/td>\nSets the border color of the NumericUpDown.<\/td>\n<\/tr>\n
BorderRadius<\/td>\nSets the border radius of the NumericUpDown.<\/td>\n<\/tr>\n
ButtonsColor<\/td>\nSets the color of the increment and decrement buttons.<\/td>\n<\/tr>\n
Styles<\/td>\nSets a collection of styles that controls various visual aspects of the NumericUpDown.<\/p>\n
e.g:\nTable({Key: \"Font\", Value:\"Segoe UI\"},\n{Key: \"NudIconPadding\", Value:10})<\/pre>\n<\/td>\n<\/tr>\n
Increment Button Icon<\/td>\nSets the image for the increment button.<\/td>\n<\/tr>\n
Decrement Button Icon<\/td>\nSets the image for the decrement button.<\/td>\n<\/tr>\n
Default<\/td>\nSets the default value of the NumericUpDown<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Output<\/strong><\/span><\/p>\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Value<\/td>\nGets Current Value of the NumericUpDown.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Customization:<\/span><\/strong><\/h3>\n
\u00a0<\/p>\n
\"\"<\/p>\n
Bar-code<\/b>\u00a0Generator<\/strong><\/h3>\n
Barcode generator for code39<\/p>\n
\"barcode<\/p>\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Code<\/td>\nSets the text used the generate the code bar using code 39.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Calendar Control
\n<\/strong>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.
\n<\/strong><\/h3>\n
\"Calendar<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Color<\/td>\nSets color of the text.<\/td>\n<\/tr>\n
Select Range<\/td>\nSet the mode of operation of the calendar. When set to true, user can select a range of dates. When false, user can only select a unique date<\/td>\n<\/tr>\n
BorderRadius<\/td>\nSets the border radiaus of the selected date rectangle.<\/td>\n<\/tr>\n
Selected Date Color<\/td>\nSets the color of the text of the selected date.<\/td>\n<\/tr>\n
Selected Date Fill<\/td>\nSets the background color of the selected date rectangle<\/td>\n<\/tr>\n
Default Start Date<\/td>\nSets the default start date.<\/td>\n<\/tr>\n
Default End Date<\/td>\nSets the default end date.<\/td>\n<\/tr>\n
Styles<\/td>\n\n
e.g: Table({Key: \"Font\", Value:\"Segoe UI\"})<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Output<\/strong><\/span><\/p>\n\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
StartDate<\/td>\nThe selected start date.<\/td>\n<\/tr>\n
EndDate<\/td>\nThe selected end date. This default to start date when the Select Range is set to false.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
ColorPicker Control
\n<\/strong>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.
\n<\/strong>
\n\"\"<\/p>\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Default<\/td>\nSets the default color for the Color Picker in Hex representation<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Output<\/strong><\/span><\/p>\n\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
SelectedColor<\/td>\nGets the selected Color value.<\/td>\n<\/tr>\n
SelectedHexColor<\/td>\nGets the selected Color value in Hex representation.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Preloader Control
\n<\/strong>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.<\/h3>\n
\"\"<\/p>\n\n\n\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Animated Gif<\/td>\nSets the animated Gif for the Preloader animation.<\/td>\n<\/tr>\n
Text<\/td>\nSets the text for the preloader<\/td>\n<\/tr>\n
Color<\/td>\nSets the color of the preloader text.<\/td>\n<\/tr>\n
Styles<\/td>\nSets a collection of styles that controls various visual aspects of the Preloader.<\/p>\n
e.g:\nTable({Key: \"Font\", Value:\"Segoe UI\"})<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Give it a try !\u00a0 We would love to hear your feedback. We have more open-source components coming soon to the PowerApps Tools github<\/a> repository…. If you have any feedback or issues, please feel free to add to\u00a0https:\/\/github.com\/Microsoft\/powerapps-tools\/issues.\u00a0<\/a><\/p>\n
\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":101,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ms_queue_id":[],"ep_exclude_from_search":false,"_classifai_error":"","_classifai_text_to_speech_error":"","_alt_title":"","ms-ems-related-posts":[],"footnotes":""},"audience":[3378],"content-type":[],"job-role":[],"product":[3473],"property":[],"topic":[3421],"coauthors":[2051],"class_list":["post-1659","post","type-post","status-publish","format-standard","hentry","audience-it-professional","product-power-apps","topic-application-modernization"],"yoast_head":"\n10 Reusable Components: tab control, calendar, dialog box, map control and more - Microsoft Power Platform Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Reusable Components: tab control, calendar, dialog box, map control and more - Microsoft Power Platform Blog\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/powerapps-ten-reusable-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Microsoft Power Platform Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-26T18:08:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T15:05:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/02\/Controls-1024x450.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2490\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mehdi Slaoui Andaloussi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mehdi Slaoui Andaloussi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/\"},\"author\":[{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/mehdi-slaoui-andaloussi\/\",\"@type\":\"Person\",\"@name\":\"Mehdi Slaoui Andaloussi\"}],\"headline\":\"10 Reusable Components: tab control, calendar, dialog box, map control and more\",\"datePublished\":\"2019-02-26T18:08:00+00:00\",\"dateModified\":\"2025-06-11T15:05:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/\"},\"wordCount\":1282,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/02\/Controls-1024x450.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/\",\"name\":\"10 Reusable Components: tab control, calendar, dialog box, map control and more - Microsoft Power Platform Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/02\/Controls-1024x450.png\",\"datePublished\":\"2019-02-26T18:08:00+00:00\",\"dateModified\":\"2025-06-11T15:05:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#primaryimage\",\"url\":\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/02\/Controls-1024x450.png\",\"contentUrl\":\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/02\/Controls-1024x450.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Reusable Components: tab control, calendar, dialog box, map control and more\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\",\"name\":\"Microsoft Power Platform Blog\",\"description\":\"Innovate with Business Apps\",\"publisher\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization\",\"name\":\"Microsoft Power Platform Blog\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"contentUrl\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"width\":194,\"height\":145,\"caption\":\"Microsoft Power Platform Blog\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/person\/cb94deacde69a416821745caea3a4ea9\",\"name\":\"Mehdi Slaoui Andaloussi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=gee4168e8cdfe65faaf608acb5baeaed5\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=g\",\"caption\":\"Mehdi Slaoui Andaloussi\"},\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/mehdis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"10 Reusable Components: tab control, calendar, dialog box, map control and more - Microsoft Power Platform Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/","og_locale":"en_US","og_type":"article","og_title":"10 Reusable Components: tab control, calendar, dialog box, map control and more - Microsoft Power Platform Blog","og_description":"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.","og_url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/powerapps-ten-reusable-components\/","og_site_name":"Microsoft Power Platform Blog","article_published_time":"2019-02-26T18:08:00+00:00","article_modified_time":"2025-06-11T15:05:05+00:00","og_image":[{"width":2490,"height":1095,"url":"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/02\/Controls-1024x450.png","type":"image\/png"}],"author":"Mehdi Slaoui Andaloussi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mehdi Slaoui Andaloussi","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#article","isPartOf":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/"},"author":[{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/mehdi-slaoui-andaloussi\/","@type":"Person","@name":"Mehdi Slaoui Andaloussi"}],"headline":"10 Reusable Components: tab control, calendar, dialog box, map control and more","datePublished":"2019-02-26T18:08:00+00:00","dateModified":"2025-06-11T15:05:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/"},"wordCount":1282,"commentCount":0,"publisher":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#primaryimage"},"thumbnailUrl":"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/02\/Controls-1024x450.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/","name":"10 Reusable Components: tab control, calendar, dialog box, map control and more - Microsoft Power Platform Blog","isPartOf":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#primaryimage"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#primaryimage"},"thumbnailUrl":"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/02\/Controls-1024x450.png","datePublished":"2019-02-26T18:08:00+00:00","dateModified":"2025-06-11T15:05:05+00:00","breadcrumb":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#primaryimage","url":"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/02\/Controls-1024x450.png","contentUrl":"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/02\/Controls-1024x450.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2019\/02\/26\/powerapps-ten-reusable-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Reusable Components: tab control, calendar, dialog box, map control and more"}]},{"@type":"WebSite","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/","name":"Microsoft Power Platform Blog","description":"Innovate with Business Apps","publisher":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization","name":"Microsoft Power Platform Blog","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","contentUrl":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","width":194,"height":145,"caption":"Microsoft Power Platform Blog"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/person\/cb94deacde69a416821745caea3a4ea9","name":"Mehdi Slaoui Andaloussi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=gee4168e8cdfe65faaf608acb5baeaed5","url":"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7d08f4b5403b8c9bcddc1a86d1029fe871d0429f3b1bcf391b42f4f6de826c74?s=96&d=mm&r=g","caption":"Mehdi Slaoui Andaloussi"},"url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/mehdis\/"}]}},"bloginabox_animated_featured_image":null,"bloginabox_display_generated_audio":false,"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Microsoft Power Platform Blog","distributor_original_site_url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog","push-errors":false,"_links":{"self":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/1659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/users\/101"}],"replies":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/comments?post=1659"}],"version-history":[{"count":1,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/1659\/revisions"}],"predecessor-version":[{"id":130942,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/1659\/revisions\/130942"}],"wp:attachment":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/media?parent=1659"}],"wp:term":[{"taxonomy":"audience","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/audience?post=1659"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/content-type?post=1659"},{"taxonomy":"job-role","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/job-role?post=1659"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/product?post=1659"},{"taxonomy":"property","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/property?post=1659"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/topic?post=1659"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/coauthors?post=1659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}