If you didn’t catch the first two parts of this series, you can do that here and here.  In this part, we’ll get a little more technical and use Microsoft Flow to do some pretty cool things. 

Remember when we talked about the size and quality of the images we take with our PowerApp and store as the entity image? When saved as the Entity Image for a CDS/D365 item, the image loses quality and is no longer good for an advertisement photo.  This is done automatically and as far as I can tell, the high-res image is gone once this conversion takes place (someone please correct me if I’m wrong on that!).  On the flip side of that, it doesn’t make a whole lot of sense to put all this tech together only to have my end users be required to take two pictures of an item, one for hi-res and one for low-res.  We don’t want to store a high-res in a relational database for 10,000 plus items because the database could bloat immensely.

Microsoft Flow and SharePoint to the rescue!  

PRO TIP:  Dynamics 365 will crop and resize the image before saving it as the entity image.  All entity images are displayed in a 144 x 144 pixel square.  You can read more about this here.  Make sure to save/retain your original image files.  We’re going to stick ours in a SharePoint Picture Gallery App.

Objective 

Create a Microsoft Flow that handles… 

  • Pulling the original image off the Dynamics record and storing it in SharePoint. 
  • Setting the patch image to the Entity Image for the Dynamics record 
  • Create an advertisement list item for the patch 
  • Save the URLs for the ad and image back to the patch record 

Create the Flow 

We’re going to write this Flow so that it’s triggered by a Note record being created. 

 Flow screenshot with Create from blank highlighted

  • On the next page, click “Search hundreds of connectors and triggers” at the bottom of the page. 
  • Select Dynamics 365 on the All tab for connectors and triggers. 
  • Select the “When a record is created” trigger. 

 Dynamics 365 is highlighted

  • Set the properties for Organization Name and Entity Name.  Entity Name should be “Notes”. 
  • Save the Flow and give it a name. 

Verifying a Few Things 

  • Add a new step and select the Condition item. 
  • The Condition should check to see if the Note has an attachment. We do this using the “Is Document” field.  

 Condition Control is highlighted 

  • In the “Yes” side of the conditional we want to check if the Object Type is a Patch (ogs_patch in this case).  

At this point, if the Flow has made it through both conditionals with a “Yes”, we know we are dealing with a new Note record that has an Attachment and belongs to a Patch record.   

Update the Patch Record 

Now we want to update the batch record’s Entity Image field with the attachment.  First we need to get a handle on the Patch record.  We’ll do that by adding an Action to the Yes branch of our new Conditional. 

  • Add a Dynamics 365 Update a Record Action.
  • Set the Organization Name, Entity Name, and Record identifier accordingly.  For our Patch Record identifier, we’ll use the Regarding field in the Dynamic content window. 

 

  • Click on Show advanced options and find the Picture of Patch field. 
  • For the Picture of Patch field we need to get the document body of the attachment and convert it from Base-64 encoding to binary.  We do this using the “Expression” area again.  Use the “base64ToBinary” function to convert the document body like so. 

 

  • Save your work!  I can’t tell you how many times I had to retype that function. 

Create Our SharePoint Items & Clean-up 

Now that we’ve updated our entity image with the uploaded patch picture we want to do a couple of things, but not necessarily in sequence.  This is where we’ll use a parallel branch in our Flow.   

Dealing with a Parallel Branch 

  • Under the last Update a Record action, add a Conditional.  After adding this Conditional hover over the line between the Update action and the new conditional.  You should see a plus sign that you can hover over and select “Add a parallel branch.” 



  • Select this and add a Compose action.  You may need to search for the Compose action. 

 

PRO TIP:  With Modern Sites in SharePoint, we now have three solid options for displaying images in SharePoint.  The Modern Document Library allows viewing as tiles and thumbnails within a document library, the Picture Library which has often been the place to store images prior to the Modern Document Library, and then we can simply just display an image, or images, on a page directly.

Saving the Attachment as an Image in SharePoint

  • Let’s deal with Compose branch first.  Our compose will have the same function as our Picture of Patch did above for the Input field.  base64ToBinary(triggerBody()?[documentbody’]) 
  • After the Compose, we’ll add a Create File Action for SharePoint and use the name from our Patch record as the name for our image in SharePoint.  I’m using a Picture Gallery App in SharePoint and for now, only using the .JPG file type.  The File Content should use the Output from our Compose Action. 

 

Delete the Note

  • Finally, we want to delete that Note from Dynamics (and the Common Data Service) so that the image attachment is no longer taking up space in our Common Data Service.  Add a Dynamics Delete a Record Action after the SharePoint Create file action.  Set the Organization Name, Entity Name, and use the Dynamics content for Note as the Item identifier.

 

Creating Our Advertisement

Let’s jump back to the new Conditional we added after the Update a record Action where we set the entity image. 

  • Set the conditional to check for the Generate Advertisement field being set to true. 
  • If this is true, add a SharePoint Create Item Action and let’s set some values.  What we’re doing here is creating a new SharePoint List Item that will contain some starter HTML for a Patch advertisement. 
  • Save our work! 

 

 

Updating Our Patch Record With Our URLs From SharePoint

  • Under the SharePoint Create Item Action for creating the Ad, AND after the SharePoint Create file action for creating the picture in the Picture Gallery, we’re going to add Dynamics Update record Actions that will be identical with one difference. 
  • The Organization Name, Entity Name, Record Identifier (set to Dynamic Content “Regarding”) should be the same. 
  • On the Ad side, the Update record should set the SharePoint Ad for Patch field to “Link to Item”. 

 

  • On the image side, the Update record should set the SharePoint Image for Patch to the “Path” 

 

Seeing It In Action 

Of course, I’ve been saving my work so let’s go ahead and give this a whirl. 

  • At the top right of your Flow you’ll see a Test button.  We’re going to click that and select “I’ll perform the trigger action.” 
  • To make this more interesting, I’m going to run this from SharePoint! I’ll update a patch and kickoff my Flow from the embedded PowerApps Canvas App on my SharePoint home page. 

 

  • I select the patch, then I click the edit button (pencil icon at the top right). 
  • Notice the Attach file link and the Generate Advertisement switch.  We’ll use the first for our image and the second for generating our ad item in SharePoint. 

 

  • Finally, I click the checkmark at the top right to save my changes.  This kicks off our Flow in less than a minute, and when we navigate back over to the Flow we can see that it completed successfully. 

 Verifying the flow

  • I’ll hop back over to SharePoint to make sure that my ad was created and my entity image was set.  I’ll also make sure the high-quality image made it to the SharePoint Picture Library and the Note was deleted from the Patch record in Dynamics.  I also want to make sure the URLs for the ad and image in SharePoint were set back to the Patch record. 

verifying in SharePoint Verifying in SharePoint image

One last thing: When we store the image in a SharePoint Picture Gallery App we can retain the dimensions, size, and quality of the original image, unlike when storing the image as a Dynamics 365 entity image.  Check out the properties in the next screen shot and compare that to the properties on the SharePoint page in the same screen shot.   


Comparing image file sizes

Conclusion 

I hope you are enjoying this series and continue to tune in as the solution for our dad’s beloved patch collection grows.  I constantly see updates and upgrades to the Power Platform so I know Microsoft is working hard on making it even better. 

A variety of screens displaying Power Platform capabilities
Microsoft recently released a lot of new capabilities in their business applications, including the Microsoft Power Platform, which combines Flow, Power BI, Power Apps, the Common Data Service for apps, and Dynamics 365. To help people gain insights into the power of these applications, the Microsoft Technology Center in Reston, VA offered a Microsoft Business Applications Workshop for Federal Government, which I attended with two AIS colleagues.

As a User Experience (UX) Researcher who joined AIS earlier this year, I am new to Microsoft business applications. In addition, code writing is not my job responsibility and expertise, unlike my two colleagues. However, I found the workshop intriguing and registered for it right away because it was designed to:

  • Help people gain an understanding of the business applications
  • Be “interactive,” with hands-on opportunity for attendees to build a working application
  • Include topics like “solution envisioning and planning” and “no-code business workflow deployment” (Note that the workshop did offer coding exercises for developers on the last day of the workshop, which I did not attend.)

Indeed, attending the workshop allowed me to see the possibilities of these Microsoft applications, which is very relevant to what I do as a UX Researcher. It motivated me to further explore resources on this topic to better meet the needs of our current and future clients.

The User-Centered Design Process

The first project that I worked on after joining AIS was to help a client understand their employees’ needs and collect user requirements for a new intranet to be built on Office 365. In addition, the key stakeholders wanted to:

  • Streamline and automate their business processes, workflows, and document management
  • Drive overall collaboration and communication within the organization

I had extensive experience conducting user research for websites and web applications. To collect employee insights for this new intranet, we followed a user-centered design process:

  1. We started by interviewing stakeholders, content owners, and general employees to understand:
    • Their existing intranet use, areas that worked well, and areas that needed to improve
    • Intranet content that is important to them
    • Existing business processes, workflows, document management, internal collaboration, and communication
  2. Based on the interview findings, we then:
    • Compiled a list of important content pieces that the new intranet should include
    • Set up an online card sorting study for the employees to participate to inform the information architecture (IA) of the new intranet
    • Documented employees’ needs and expectations in other business areas
  3. Proposed a draft IA for the new intranet based on card sorting findings
  4. Developed a wireframe intranet prototype (using Axure), which reflected the draft IA, contained employee desired content, and mimicked the Office 365 structure and capabilities
  5. Conducted remote usability testing sessions with stakeholders and general employees to evaluate the wireframe prototype
  6. Finalized the intranet prototype and documented UX findings and recommendations to help developers build the new intranet using Office 365 in the next phase

As shown above, we made sure that the Intranet would meet the needs and expectations of the stakeholders and general employees, before it was coded and developed. However, as a UX researcher who does not code, I did not develop our solutions using the Microsoft business applications. I was curious to see how my technical colleagues would apply the capabilities of these applications to improve, streamline, and automate business processes and workflows.

Our user research showed that employees experienced a lot of frustration and pain points during their daily work. For example, both managers and general employees complained that their business processes heavily relied on emails, email attachments, and even hand-written notes, which were easy to miss or misplace and hard to locate. They described how difficult it was for them to keep track of project progresses and updates, especially when people from multiple departments were involved. Some of them also mentioned they had to manually enter or re-enter data during a workflow, which was error-prone. All these were real and common business process problems.

The Power of the Power Platform

This workshop provided me with a starting point and a glimpse into the power of the business applications. I’m still learning about their full power, the technical descriptions or details, and the rationale or logic behind each step that we went through when we built the model-driven app during the workshop. However, I was excited to walk away knowing about:

  • The use of a single, connected, and secure application platform to help organizations break down silos and improve their business outcomes
  • The availability of hundreds of out-of-box templates, connectors, and apps, including those that our client can take advantage of and easily customize, such as for onboarding tasks, leave requests, expense reimbursements, and shout-outs to co-workers
  • Building solutions and applications quickly and easily with simple drag-and-drop user interface, without the need to write a single line of code
  • Higher work efficiency of business people and non-developers to achieve what they want to do independently, relying less on IT support or developers, reducing overall cost, and saving time

After the workshop, I found a wealth of online resources and videos on Microsoft Business Applications. Below are some Microsoft webpages that describe the similar content or steps that we went through during the workshop:

I look forward to more in-depth learning about this topic to better understand the power of Microsoft business applications. With this knowledge and together with my colleagues, we will propose and build the best business solutions based on user research, helping our clients achieve desired outcomes by improving their employee experience.

If you didn’t catch the first part of this series, you can read that here.  In this part, things should get a little more interesting as we set up a PowerApp and our SharePoint site.

Objectives

  1. Create SharePoint Online Team Site.
  2. Create a PowerApp for team members to collect data with.
  3. Embed this PowerApp into a SharePoint page so we can do more work in a single environment.

Creating Our SharePoint Team Site

Using our existing SharePoint Online instance, I’m going to create a new Team site off of the root site collection.

  1. From the home page of the root site collection, click the “Create site” button.

Create site screenshot

2. Select Team site on the panel that opens.

Create a Site screen with Team Site hightlighted3. Fill in the information on the next page and click Next.

Team Site information input page

4. Add any additional users and click Finish.

Add additional users screenshot

If all went well, you should be redirected to the new site.

Screenshot of new Team Site

Creating the PowerApp

To be clear, we are going to create a “canvas” PowerApp as opposed to a model-driven PowerApp.  To get this going I’ll navigate to my PowerApps environment and create a new app.

Screenshot of PowerApps environment

    1. From your PowerApps home page, click Create.
    2. On this page you can see various templates for making both model-driven and canvas apps. We’re going to use the “Start from data” Canvas app.Screenshot with Start From Data option highlighted
    3. On the next page we see multiple choices for apps that start with our data. I’m going to use the Common Data Service here.Screenshot with Common Data Service hightlighted
    4. With my Common Data Service account instance selected under “Connections,” I scroll to find and select the “Patches” table, then click “Connect.”

Screenshot of Connections

PRO TIP:  If you get to this point and you still don’t see your data, make sure to check the “Environment” at the top right of the window.  You may not have the correct environment selected where your data is stored.  You can read more about Environments in PowerApps here.
Screenshot with Environments highlighted

        1. Once PowerApps is done creating the new app, the app designer will appear.

      Screenshot of App Designer

Let’s pause and look at this screen for a minute.  On the right, we have our properties and some other items, in the middle we have our design canvas, and on the left we have our Screens Explorer.  In our Screens Explorer we see three screens already created for us: the browse, detail, and edit screens.

If you look under each of those screens you’ll see a primary user interface object that is collapsed (meaning it has content/child nodes underneath it), along with some other user interface elements that usually provide some other functionality or a label.  When you select an element in the Screens Explorer it will also be selected on the design canvas.  In the previous screen shot, the Search Icon is selected under the Browse Screen 1 item.  Consequently, the search hourglass on the design canvas is also selected.

We don’t want to change this up much, but I think we can all agree that it would be a lot more helpful to have something other than the created-on date and item id as our main fields for each row.

PRO TIP:  PowerApps provides us with a super fast way of spinning up apps by automatically building things into our apps like navigation and search controls.  Be careful about changing or removing these unless you plan to replace them with a control of your own that provides the same functionality.  Oftentimes if you remove one of these you render a portion of the app unusable or difficult to access.  To see what a given user interface item does, select it in the designer and check out the “OnSelect” Action in the Advanced tab on the right.

Screenshot with OnSelect option highlighted

      1. Select the bolded date field on the row item on the design canvas and make sure the Advanced tab is selected on the right.
      2. In the Data section under the Advanced tab, we can use the Text field to change what we want displayed in each of these user interface elements. I’m going to change the first to name, the second to city, and the last one to state.Screenshot of text field

Once we’re done tweaking the browser display we’ll want to work on the detail and edit forms.  These work a bit differently.

      1. Select the Detail Form under the Detail Screen node. In the right pane under Properties, select the Fields link that indicates the number of fields currently selected.
      2. Check any fields you would like that aren’t currently on the form. Similarly uncheck any fields the system put on the form that you want to remove.  You can also reorder the fields to your liking.

After a little bit of tweaking to both our detail and edit forms we’re ready to publish this PowerApp.  You can preview the app with the “Play” arrow icon near the top right, or just switch over to your File menu to wrap things up.

      1. Click the File menu and under App Settings give your app a name and feel free to play around with the icon and background color. There are other settings you can explore too but for now we’ll just cover the basics.
      2. Click “Save” to save your app to your gallery.

Screenshot of gallery

In this next screen shot I’ve captured our three screens from left to right: display, detail, and edit. Screenshot of app screens.
You might be wondering what the Generate Advertisement switch is for on the edit screen.  We’ll use that to toggle that specific functionality later in our Flow.

Finally, if you click on the ellipsis for the new app in our PowerApps app gallery, you can click “Details” and get additional helpful information for the app such as the app URL.  This will come in handy for what we do next.

Here are some screen shots from my mobile phone as I helped gather inventory for this massive side project!

Screenshots of app data

Embedding the PowerApp in SharePoint

As mentioned, we don’t want to find ourselves jumping back and forth between application instances for managing inventory.  Thankfully we’re able to embed our PowerApp into the SharePoint page we want so we can do a lot of our common work from that one screen.

      1. Open the SharePoint site we created earlier and edit the home page. I’ve tweaked mine so we only have the Documents Library web part and some empty columns.
      2. Click the plus button in the right column to add a new web part. Find the Microsoft PowerApps web part and select it.Screenshot
      3. Paste the link from your PowerApp into the “App web link or ID” field in the right pane that opens. The app should come up in the new web part.Screenshot
      4. Publish the page.

We can now use the same PowerApp that everyone else will be using on their mobile devices, right here in SharePoint.

Screenshot of PowerApp in SharePoint

Tune in next time, when we’ll use Microsoft Flow to move some data around, automatically generate advertisements, and notify team members of important events.

With the wide variety of updated features available through Office 365, organizations can now create robust, beautiful intranets right out-of-the-box. In contrast to SharePoint classic sites, SharePoint modern sites have a clean interface, are responsive and adaptive to mobile devices, and offer significant performance improvements.

Read part one of this three-part blog series here. 

Read part two here.

Now that you set up your SharePoint libraries to use custom content types, you can add content. Go to the Documents library and upload a few documents to the library. For each document, edit the properties and choose any appropriate values for your custom site columns.

In the example below, All isselected for the AIS Office Location field, Human Resources is selected for the AIS Support Team (department) field, and the value for Show on AIS Connect Home is set to Yes.

Adding content to SharePoint

Read More…

Calling all SharePoint users and Office 365 developers! AIS is sponsoring this month’s Meetup for the Triangle SharePoint User Group in Morrisville, North Carolina. It’s shaping up to be a great one, so RSVP today to claim your spot.

About the Session:

Artificial Intelligence and Machine Learning are the new buzzwords in the industry. In this session, we will cover Artificial Intelligence and Cognitive Services for Office 365 developers.

About the Speaker:

Prashant G. Bhoyar is a Microsoft Office Server & Services MVP and Microsoft Certified Professional. He currently works as a Solution Architect at WithumSmith+Brown, P.C. (formerly Portal Solutions), one of the top 30 accounting and advisory firms in the country. He is a trusted advisor and Subject Matter Expert and specializes in the development and post-implementation adoption of complex custom solutions in Azure, Office 365, and SharePoint. Prashant has supported many government agencies and non-profit organizations in the Washington D.C. metropolitan area. Prashant was the co-author of the book PowerShell for Office 365 and was the technical reviewer of the book Pro SharePoint 2013 Administration.

He serves on the leadership committee for the Artificial Intelligence and Machine Learning User Group, and D.C. Metro Office 365 User Group, and SharePoint Saturday Baltimore event and SharePoint Saturday Washington DC event. He actively speaks at technical conferences across the country, most recently in Chicago, Seattle, New Orleans, Baltimore, Philadelphia, as well as, at many events throughout North America. Prashant is a recipient of the “Antarctic Service Medal of the United States of America” for his outstanding service in Antarctica.

Click here for the event’s agenda, location and to claim your spot! Space is limited so RSVP today!

Our own Senior Infrastructure Engineer Daniel Suenkel recently hosted a Breakfast and Learn to share his knowledge and passion for Azure OMS with his AIS colleagues. Continuing with his theme, he explained why Azure OMS truly is the “One Tool to Rule Them All!”

In addition to the material that he provided in his previous blog (Azure OMS: One Tool To Rule Them All), he provided a deeper dive into what Azure OMS is and exactlywhat is offered in each service. Continue reading to find out why Azure OMS continues to be the “One Tool To Rule Them All”… Read More…

Microsoft PowerApps and Flow have been generally available since late 2016. They’re both tools that allow business users to streamline business processes without the use of code. Microsoft positioned PowerApps as their recommended replacement for InfoPath as the business user’s forms designer, and Flow as their replacement for SharePoint Workflow.

While these are welcomed replacements, both solutions also provide a broader level of support to the Microsoft stack and across a wide array of third-party applications.  I’ve recently been working with PowerApps and Flow to replace some internal applications, as well as to build proof-of-concepts for our existing clients. Here’s what I think of each, both separately and when putting them together… Read More…

2017 was another great year overall here at AIS, and also marked the fifth anniversary of our blog! We hope you enjoyed reading and found our posts helpful and interesting. We’re all pretty passionate about what we do here, and look forward to sharing more thoughts, insights and solutions in 2018 and beyond!

As we close out the year, here are the top 10 most read and shared blog posts of 2017:

1) Office 365 Groups vs. Microsoft Teams by Jason Storch

2) Lift & Shift: Migrating Legacy Applications to Azure Cloud by Nasir Mirza

3) Dockerization of Azure PaaS (Beyond Azure Container) by Vishwas Lele

4) Managed Images in Azure (Create & Deploy) by Justin Baca

5) Building Stateless Microservice Using Microsoft Service Fabric Series by Kasi Srinivasan

6) Azure PaaS Options: When to Use What? by Vishwas Lele

7) A three-way tie (!) for Parts One, Two & Three of Automated Deployments with Azure Resource Manager Templates, Azure Automation, & Octopus Deploy by Harun Davood

8) It’s Time to Review the Failure Modes of Your #cloud App(s) by Vishwas Lele

9) Pattern Matching vs. Deep Learning by Vishwas Lele

10) A Fix for the SharePoint Search Query/Result Mismatch by Clint Richardson

Happy New Year to all our readers and bloggers! Be sure to follow AIS on Twitter, Facebook or LinkedIn so you’ll never miss a post.

With the recent release of Microsoft Teams, you may be wondering what the differences between Teams and Office 365 Groups are. At AIS, we’re always on the forefront of the latest Office 365 services, and given our long-time partnership with Microsoft, we’ve actually been using both Microsoft Teams and Office 365 Groups for while now. We’ve gotten a solid sense of what both services are good at and what they’re…not so good at. At least not yet. Read More…

These disciplines can play a significant role in building stable release processes that help ensure project milestones are met.

Continuous Integration (CI) and Continuous Delivery (DC) are rapidly becoming an integral part of software development. These disciplines can play a significant role in building stable release processes that help ensure project milestones are met. And in addition to simply performing compilation tasks, CI systems can be extended to execute unit testing, functional testing, UI testing, and many other tasks. This walkthrough demonstrates the creation of a simple CI/CD deployment pipeline with an integrated unit test.

There are many ways of implementing CI/CD, but for this blog, I will use Jenkins and GiHub to deploy the simple CI/CD pipeline. A Docker container will be used to host the application.  The GitHub repository hosts the application including a Dockerfile for creating an application node. Jenkins is configured with GitHub and Docker Plugin. Read More…