PowerApps – Camera Integration Part 1
Part one of the ‘Those Dynamics Guys’ PowerApps Series.
As promised via Linked-In I am going to publish a series of Blogs on how to start using PowerApps. PowerApps is part of the Dynamics 365 stack that allows a user to create various application that connect with not only Dynamics 365 Data Sources but a prodigious plethora of others such as:
- Skype For Business
- Bing Maps
- Google Maps
Selecting a connection/data set:
This will then take you to the next step which is where you can either create a new connection and select a connector of your choice (this example would use Dynamics 365 for Finance and Operations – known as jsut Dynamics 365 for Operations in PowerApps) or if you have pre-existing connections available select the Dynamics 365 for Operations connector and choose an environment, preferably Test Environment that you have full System Administrative access too, and select it as your data set.
Selecting a table:
Now we have our data source we need to let the system know which Data Entity we wish for it to use – for this example we are going to use ‘Projects’, use the search functionality to filter through the various DEs to find the correct one choose it and select “Connect”:
A ‘Building Your App’ process will kick off then you’ll be greeted by the PowerApps designer. Then we are ready to start throwing this beast together!
Navigation of the PowerApps Designer (an Introduction):
Please note the menu is dynamic in nature so options will disappear and reappear depending on what has been selected – the navigation shown here is when no items are selected and should be seen as an introductory overview.
- Home – the home area on the action pane allows the user to choose from a various array of formatting option (text size, text weight, Italics, borders, fill, pre-set themes etc.)
- Insert – Allows the user to insert various items such as; buttons, icons, various controls, input text, labels, data, media, charts etc.
- Action – this allows you to create certain actions for various items including; ‘Navigation’ (where you’d like a certain item (Icon, button etc.)) to take you to a certain screen within the app, ‘Collect’ allows the user to create collections (this will be covered later on in the article), ‘Flows’ allows to integrate a flow or the option to create a new one. There are other options but this is enough to start with.
- Screen – select images for the background of the screen, state positioning for background images and select various colours to fill the background with.
- New Screen (Home Tab) – this allows the user to insert a new screen and select from various options such as whethere you wish for a blank fixed screen, a scroll enabled screen etc.
- Tree View – this view displays a break-down structure of the selected screen. Which allows you to navigate around the design of your app.
- Thumbnail view – this view represents the screens via small thumbnail images. Which allows you to navigate around the design of your app.
- Tree View (break-down) – separates into various items that can be drilled into to focus on each item independently.
- Play Icon – this allows the user to preview the app in it’s current, unpublished, state – you can also push F5 as a shortcut.
- Properties – allows to set various options for the selected item such as formatting of the item itself, default values etc.
- Rules – this allows the user to apply a rule that modifies an app based on predetermined criteria on the item selected.
- Advanced- depending the item selected this is where the user can apply various commands (some of which we’ll address in this article) applied to data elements, action elements and design elements.
One final item is the ‘View’ tab which allows the user to view the ‘Data Sources’ being used by the application (create new connections, refresh connections and delete connections), view any media being used by the App, view collections and variables.
Presenting the ‘Projects’ DE in a more useful manner:
The first stage to build our camera app is to have the first browse screen render the data in a more useful manner. Currently it is browse screen with some values in my case the “Allow Negative Values To Be Carried Forward” value:
To achieve this select the main ‘Browse Gallery 1’ area – then select, from the ‘Properties’ area within the ‘Layout’ grouping “Title, Subtitle and body” this will bring up the data dialogue where was can start picking and choosing the data from the Projects Data Entity that we wish to expose onto the gallery.
To change what is shown in the gallery we can change the following data inputs for the labels:
I am going to change the drop down for each one of these to the following values:
- Body1 = DeliveryName
- Subtitle1 = ProjectStage
- Title1 = ProjectName
This will then populate the Gallery with the selected values (push F5 of the play icon to view the app in it’s current state).
Now we have presented the Gallery in a more readable manner we now have a basic app that will allows us to view projects, select a project to view further details on the selected project and even edit certain values and publish them back to Dynamics 365 for Finance & Operations.
We will come back to adding further fields to the project details area but for now let’s jump straight in to, what I deem, the more exciting part- building the camera functionality and storage.
Building the camera functionality:
Right now on to the awesome part let’s build a camera app! First stage is creating a new screen. To achieve this go Home>New Screen then select Scrollable Screen.
Insert a new screen:
Change a label value:
This will generate and insert a new screen into the viewing pane and the designer will take you to the newly inserted screen The first thing i’d like to do and familarise ourselves with is changing the label which in this case is the Title. It is possible to change the label text in three locations:
- Formula bar (by selecting ‘Text’ from the list and put quotations “” around it)
- Properties – within the ‘Text’ area
- Direct – by typing into the label itself
The next stage is to insert the ‘Camera’ Control – to achieve this first select the ‘Add an item from the insert tab’ (this isn’t a necessity but is a quick and easy way to remove the text from the screen) from the ‘Insert’ tab on the action pane and select Media>Camera.
Insert Camera and capture images:
This will then insert the Camera:
Now we need to start a collection that allows us to capture a picture and store it (we will then look into passing the image through to SharePoint and email later on in this article series). First select the Camera and go to the ‘Advanced’ area- we are now going to put in an ‘OnSelect command’ this come be achieved in two ways:
- Advanced – within the advanced area there is an OnSelect field.
- Formula Bar – change the list to ‘OnSelect’.
Type in the ‘OnSelect’ field the following: ClearCollect(CameraImage,Camera3.Photo)
- ClearCollect means that it’ll only store one image in the collection at a time (remove ‘Clear’ to amass a large collection.
- “CameraImage” is the name of the collection – rename this this to whatever you’d like the collection to be called.
- “Camera3” is the name of the Camera item and “Photo” the media the collection is expected to capture.
Now whilst still in the screen that contains the Camera ‘Play’ (Push F5) the app – this will open the App in the screen that you are currently in – now click the area that contains the camera. This will engage the ‘OnSelect’ command which will engage the ‘Collection’ to grab a still image from the camera.
Now let’s view the image. Go to View>Collections:
This will take you to the collections list where we can select ‘CameraImage’ (the name we chose as the collections name in the step above) and view the captured photo.
The next article will show us how to present the image under the camera (shown below), then we’ll move on to flows! Article 2 click here!