Components Import Guide

Published by Team Kumo

What are Components?

At the beginning of 2019, the PowerApps team introduced a new feature called components that allowed users to create pieces of functionality that could be packaged and duplicated across screens and even different apps. This is an experimental feature for the moment, however the capability has still been proven to be effective and quite handy.

Here at Kumo Partners, this functionality is a pivotal part of how we are able to offer our solutions to our partners and clients. This post is meant to be a guide for how users can download and install our applications and get them familiar with how the tooling works. This post will cover:

  1. Turning On the Components Feature in Your App
  2. Importing a Kumo Component file (.msapp file)

Quick Note:

For the solutions that Kumo Partners offer we will mostly be using components as a means of importing the related content into your app directly. As a result, we will handle how to configure components in a separate post later on.

I. Turning On the Components Feature

Turn on the Components Feature

  1. Open up a new or edit an existing app in the App studio (https://web.powerapps.com). 
  2. Once the app is open, go to File > App Settings > Advanced Settings.
  3. In the section called “Experimental Features” towards the bottom of the settings, you will find the ability to enable components.
  4. Once turned on, you will see them on the left hand side of the studio screen in the Tree View.
II. Importing a component file into your app

Now that we have the feature turned on, we can now try to import (and eventually export) a component file. At the moment components are managed as .msapp files (which is the same as the full PowerApps themselves) so make sure to use clear naming conventions when importing and exporting.

Starting with a Ready-To-Go component

If you are reading this most likely you are either looking to import one of our solutions into your own app or you’re simply curious how components work. Either way, we will be using one of our own Better Timer component to finish the rest of the post. Once you have it downloaded (the .msapp file) you can follow the steps below.

Steps to Import

  1. Open your app with the components feature turned on.
  2. Under the Insert Tab > select Components > Import Component.

  3. This will present you a wizard to either import a component from another app or to upload a component file. In this case we want to upload either the component we linked earlier or your own.
  4. Once successfully uploaded, you will now see on the left hand side the “Screens” and “Components” sections of the tree view. The “Components” section should now have your imported component.
Using The Components Feature to Migrate Functionality
Although Components can be configured in a way to input and output data, we will focus on using it as a means to move PowerApp content / functionality between apps, which it does very well. Following the steps above using the Better Timer component, we now need to copy that content over from the component into a respective screen in our app.
  1. Select the imported Component from the Components list on the left and review it’s contents.

    Our components are structured in a way to make this process as simple as possible and have notes provided inline to help the user be able to get this up and going. If you are not using are components the steps below may note apply.

  2. Within the white space, you can click and then drag to select multiple items and once selected click Ctrl + C to copy the content to your clipboard.
  3. Now on the left hand side select the screen you would like to copy the content too and once it appears, hit Ctrl + V to paste the content onto the screen.
  4. The Content will now appear (and the red errors should also go away as well).
We hope that you found this post useful. Let us know be leaving us a comment below! 
Categories: PowerApps

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *