{"id":243,"date":"2017-03-11T04:00:26","date_gmt":"2017-03-11T12:00:26","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/part-2-of-tabbed-user-interface-mobile-version\/"},"modified":"2025-06-11T08:15:21","modified_gmt":"2025-06-11T15:15:21","slug":"part-2-of-tabbed-user-interface-mobile-version","status":"publish","type":"post","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/part-2-of-tabbed-user-interface-mobile-version\/","title":{"rendered":"Part 2 of Tabbed User Interface &#8211; Mobile Version"},"content":{"rendered":"<p>Last week Carlos gave us an excellent example of a tabbed format within a tablet format PowerApp. Check it out <a href=\"https:\/\/powerapps.microsoft.com\/en-us\/blog\/design-tips-part-1-handling-tab-control-scenarios-in-powerapps-for-full-screen-formats\/\">here<\/a>. This is another example of a tabbed format for mobile phones. The design is by Mehdi Slaoui Andaloussi who is ingenious when it comes to PowerApps patterns. I&#8217;ve enjoyed using this format as well because it&#8217;s\u00a0quick, easy to configure, and data driven. We&#8217;ve purposely left the actual screens blank to focus on the tabs, but you can just about do anything you want with that space. (See the last\u00a0section of this blog\u00a0where I\u00a0share screen shots of a\u00a0Bug Progress Reporting\u00a0PowerApp that I created using Mehdi&#8217;s pattern.)<\/p>\n<p>Full Screen View<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/MehdiTabsGif.gif\" style=\"width: 320px; height: 536px;\"\/><\/p>\n<p>\u00a0<\/p>\n<p>Close up of gallery navigation area on the bottom.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/TabbedNavigation.png\" style=\"width: 597px; height: 80px;\"\/><\/p>\n<p>\u00a0<\/p>\n<p>Here are the steps to build Mehdi&#8217;s app in 5 simple steps:<\/p>\n<p><strong>Preparation<\/strong>: Gather your media in preparation for this app build. You&#8217;ll need\u00a04 icons for the navigation using blue outline color: name them<\/p>\n<ul>\n<li>home_selected<\/li>\n<li>\u200bfavs_selected<\/li>\n<li>discover_selected<\/li>\n<li>\u200bmore_selected<\/li>\n<\/ul>\n<p>and 4 icons just like those but with grey outline color, named as follows:<\/p>\n<ul>\n<li>home<\/li>\n<li>favs<\/li>\n<li>\u200bdiscover<\/li>\n<li>\u200bmore<\/li>\n<\/ul>\n<p>Once you have saved your icons to your desktop, open a brand new\u00a0blank PowerApp\u00a0in Phone Layout and upload the 8 icons into the media storage.<br \/>\n<strong>(Content Tab&gt;&gt;Media&gt;&gt;Browse (top right)&gt;&gt;&gt;Browse to and select the icons <\/strong>you&#8217;ve prepared.<\/p>\n<p>Screen shot below showing 3 of the sets of icons in the media of the app.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/Images2Color.png\"\/><\/p>\n<p><strong>Ok&#8230;.now we&#8217;re ready to do this!<\/strong><\/p>\n<p><strong>STEP 1<\/strong>: Since\u00a0this tabbed\u00a0format\u00a0is really a simple method of screen navigation, we start by adding\u00a04 screens to a blank phone format app (You can delete the default Screen1). Here are the names of the\u00a04 screens, please rename each one to match these:<\/p>\n<ul>\n<li>\u200bHomeScreen<\/li>\n<li>FavsScreen<\/li>\n<li>DiscoverScreen<\/li>\n<li>MoreScreen<\/li>\n<\/ul>\n<p><b>STEP 2: <\/b>Now set the <strong>OnVisible<\/strong> property of the first screen (<strong>HomeScreen<\/strong>) to the following (this creates a new collection called <strong>MenuItems\u00a0<\/strong>every time the app opens with\u00a04 data fields):<\/p>\n<p>UpdateContext({selectedScreen:HomeScreen});<br \/>\nClearCollect(MenuItems, {<br \/>\n\u00a0 Name: &#8220;Feed&#8221;,<br \/>\n\u00a0 Screen:HomeScreen,<br \/>\n\u00a0 Icon: home,<br \/>\n\u00a0 SelectedIcon: home_selected<br \/>\n}, {<br \/>\n\u00a0 Name: &#8220;Profile&#8221;,<br \/>\n\u00a0 Screen:FavsScreen,<br \/>\n\u00a0 Icon:\u00a0 fav,<br \/>\n\u00a0 SelectedIcon: fav_selected<br \/>\n}, {<br \/>\n\u00a0 Name: &#8220;Discover&#8221;,<br \/>\n\u00a0 Screen:DiscoverScreen,<br \/>\n\u00a0 Icon: discover,<br \/>\n\u00a0 SelectedIcon: discover_selected}<br \/>\n, {<br \/>\n\u00a0 Name: &#8220;More&#8221;,<br \/>\n\u00a0 Screen:MoreScreen,<br \/>\n\u00a0 Icon: more,<br \/>\n\u00a0 SelectedIcon: more_selected<br \/>\n})<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/Ribbon.png\"\/><\/p>\n<p>\n<strong>STEP 3<\/strong>: Next, we insert a Horizontal Text Gallery Control (Insert&gt;&gt;&gt;Gallery&gt;&gt;&gt;Horizontal Text)<\/p>\n<p>Configure the <strong>Items <\/strong>property of the gallery to our new collection <strong>MenuItems<\/strong><\/p>\n<p>Select the template of the new gallery (left most section), removing all but\u00a01\u00a0data field. Set the remaining data field <strong>Text<\/strong> property to ThisItem.<strong>Name<\/strong><\/p>\n<p><strong>\u200b<\/strong>\u200bLastly, set the <strong>Color <\/strong>property of <strong>Name <\/strong>to (adjust colors to match your own icons)<strong>:<\/strong><\/p>\n<p><strong>If(ThisItem.Screen = selectedScreen, RGBA(74, 144, 226, 1),RGBA(40, 40, 40, 1))<\/strong><\/p>\n<p>(This might be a good time to <strong>save your app<\/strong> for safe keeping.)<\/p>\n<p>\n<strong>STEP 4<\/strong>: Now we are going to complete the configuration of the Trigger Region where our app users will tap to change screens. Reselect the template region, and <strong>insert an Image\u00a0control<\/strong> (use your mouse to resize things as needed). Set the <strong>Image<\/strong> property of the Image Control to:<\/p>\n<p><strong>If(ThisItem.Screen = selectedScreen, ThisItem.SelectedIcon, ThisItem.Icon)<\/strong><\/p>\n<p>The\u00a0template region itself\u00a0should be renamed\u00a0<strong>triggerRegion.<\/strong><\/p>\n<p><strong>\u200bReselect the entire gallery:\u00a0<\/strong>set the <strong>Height<\/strong> property to <strong>75<\/strong>, and the <strong>Width<\/strong> property\u00a0to <strong>640<\/strong>.<\/p>\n<p>See screen shots below:<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/triggerRegion.png\"\/><\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/triggerRegionAdvancedProperties.png\"\/><\/p>\n<p>\n<strong>STEP 5<\/strong>: Copy and Paste the Gallery onto the bottom of each screen. <strong>Also add a label near the top of\u00a0each screen with the screen name<\/strong> for now, as this will help you validate that you are on the right screen for testing.<\/p>\n<p><strong>Run and test your new app<\/strong>, you&#8217;ll see that it just works!<\/p>\n<p>(Save and share your app as needed.)<\/p>\n<p>\u00a0<\/p>\n<p>Here is an app I\u00a0designed using the approach I learned from Mehdi:<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/3screens.png\"\/><\/p>\n<p>I have uploaded Mehdi&#8217;s app to my OneDrive <a href=\"https:\/\/1drv.ms\/u\/s!AlVv8XuldHRznm6kvGdROIvVAxMT\">here<\/a>\u00a0so that you may download it to see how it works!<\/p>\n<p>I hope this helps you to extend your tabbed formats onto your phone apps as well.<\/p>\n<p>Happy PowerApping,<\/p>\n<p>Audrie<br \/>\n(Twitter: ArtsyPowerApper)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last week Carlos gave us an excellent example of a tabbed format within a tablet format PowerApp. Check it out here:: https:\/\/powerapps.microsoft.com\/en-us\/blog\/design-tips-part-1-handling-tab-control-scenarios-in-powerapps-for-full-screen-formats\/. This is another example of a tabbed format for mobile phones. The design is by Mehdi Slaoui Andaloussi who is ingenious when it comes to PowerApps patterns. I&#8217;ve enjoyed using this format as well because it&#8217;s quick, easy to configure, and data driven.<\/p>\n","protected":false},"author":106,"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":[2058],"class_list":["post-243","post","type-post","status-publish","format-standard","hentry","audience-it-professional","product-power-apps","topic-application-modernization"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Part 2 of Tabbed User Interface - Mobile Version - 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\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Part 2 of Tabbed User Interface - Mobile Version - Microsoft Power Platform Blog\" \/>\n<meta property=\"og:description\" content=\"Last week Carlos gave us an excellent example of a tabbed format within a tablet format PowerApp. Check it out here:: https:\/\/powerapps.microsoft.com\/en-us\/blog\/design-tips-part-1-handling-tab-control-scenarios-in-powerapps-for-full-screen-formats\/. This is another example of a tabbed format for mobile phones. The design is by Mehdi Slaoui Andaloussi who is ingenious when it comes to PowerApps patterns. I&#039;ve enjoyed using this format as well because it&#039;s quick, easy to configure, and data driven.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/part-2-of-tabbed-user-interface-mobile-version\/\" \/>\n<meta property=\"og:site_name\" content=\"Microsoft Power Platform Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-11T12:00:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T15:15:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/MehdiTabsGif.gif\" \/>\n<meta name=\"author\" content=\"Audrie Gordon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Audrie Gordon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 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\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/\"},\"author\":[{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/audrie-gordon\/\",\"@type\":\"Person\",\"@name\":\"Audrie Gordon\"}],\"headline\":\"Part 2 of Tabbed User Interface &#8211; Mobile Version\",\"datePublished\":\"2017-03-11T12:00:26+00:00\",\"dateModified\":\"2025-06-11T15:15:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/\"},\"wordCount\":675,\"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\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/MehdiTabsGif.gif\",\"keywords\":[\"Building UI\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/\",\"name\":\"Part 2 of Tabbed User Interface - Mobile Version - 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\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/MehdiTabsGif.gif\",\"datePublished\":\"2017-03-11T12:00:26+00:00\",\"dateModified\":\"2025-06-11T15:15:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#primaryimage\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/MehdiTabsGif.gif\",\"contentUrl\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/MehdiTabsGif.gif\",\"width\":320,\"height\":536,\"caption\":\"shape, square\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Part 2 of Tabbed User Interface &#8211; Mobile Version\"}]},{\"@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\/5622f11b1629eeff57465c794c80c936\",\"name\":\"Audrie Gordon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/8a060fc178064c33f81ec0c74cf167a845dc0a9f86c71fd9a276c1eae2d7ae30?s=96&d=mm&r=g84a7fd97215038815e0a810e606188f3\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8a060fc178064c33f81ec0c74cf167a845dc0a9f86c71fd9a276c1eae2d7ae30?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8a060fc178064c33f81ec0c74cf167a845dc0a9f86c71fd9a276c1eae2d7ae30?s=96&d=mm&r=g\",\"caption\":\"Audrie Gordon\"},\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/audrie\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Part 2 of Tabbed User Interface - Mobile Version - 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\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/","og_locale":"en_US","og_type":"article","og_title":"Part 2 of Tabbed User Interface - Mobile Version - Microsoft Power Platform Blog","og_description":"Last week Carlos gave us an excellent example of a tabbed format within a tablet format PowerApp. Check it out here:: https:\/\/powerapps.microsoft.com\/en-us\/blog\/design-tips-part-1-handling-tab-control-scenarios-in-powerapps-for-full-screen-formats\/. This is another example of a tabbed format for mobile phones. The design is by Mehdi Slaoui Andaloussi who is ingenious when it comes to PowerApps patterns. I've enjoyed using this format as well because it's quick, easy to configure, and data driven.","og_url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/part-2-of-tabbed-user-interface-mobile-version\/","og_site_name":"Microsoft Power Platform Blog","article_published_time":"2017-03-11T12:00:26+00:00","article_modified_time":"2025-06-11T15:15:21+00:00","og_image":[{"url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/MehdiTabsGif.gif","type":"","width":"","height":""}],"author":"Audrie Gordon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Audrie Gordon","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#article","isPartOf":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/"},"author":[{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/audrie-gordon\/","@type":"Person","@name":"Audrie Gordon"}],"headline":"Part 2 of Tabbed User Interface &#8211; Mobile Version","datePublished":"2017-03-11T12:00:26+00:00","dateModified":"2025-06-11T15:15:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/"},"wordCount":675,"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\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#primaryimage"},"thumbnailUrl":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/MehdiTabsGif.gif","keywords":["Building UI"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/","name":"Part 2 of Tabbed User Interface - Mobile Version - 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\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#primaryimage"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#primaryimage"},"thumbnailUrl":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/MehdiTabsGif.gif","datePublished":"2017-03-11T12:00:26+00:00","dateModified":"2025-06-11T15:15:21+00:00","breadcrumb":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#primaryimage","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/MehdiTabsGif.gif","contentUrl":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/MehdiTabsGif.gif","width":320,"height":536,"caption":"shape, square"},{"@type":"BreadcrumbList","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/03\/11\/part-2-of-tabbed-user-interface-mobile-version\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/"},{"@type":"ListItem","position":2,"name":"Part 2 of Tabbed User Interface &#8211; Mobile Version"}]},{"@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\/5622f11b1629eeff57465c794c80c936","name":"Audrie Gordon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8a060fc178064c33f81ec0c74cf167a845dc0a9f86c71fd9a276c1eae2d7ae30?s=96&d=mm&r=g84a7fd97215038815e0a810e606188f3","url":"https:\/\/secure.gravatar.com\/avatar\/8a060fc178064c33f81ec0c74cf167a845dc0a9f86c71fd9a276c1eae2d7ae30?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8a060fc178064c33f81ec0c74cf167a845dc0a9f86c71fd9a276c1eae2d7ae30?s=96&d=mm&r=g","caption":"Audrie Gordon"},"url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/audrie\/"}]}},"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\/243","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\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/comments?post=243"}],"version-history":[{"count":7,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/243\/revisions"}],"predecessor-version":[{"id":125038,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/243\/revisions\/125038"}],"wp:attachment":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/media?parent=243"}],"wp:term":[{"taxonomy":"audience","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/audience?post=243"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/content-type?post=243"},{"taxonomy":"job-role","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/job-role?post=243"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/product?post=243"},{"taxonomy":"property","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/property?post=243"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/topic?post=243"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/coauthors?post=243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}