Power Apps Portals: Adding Related Subgrids

December 11, 2020
This video demo and blog provide a step-by-step walkthrough of adding related subgrids to a Power Apps portal for a Trip Planner Application.

You may consider adding a related subgrid to your portal if you have tables associated with each other. For example, you have a Trip table that is your main table and a Traveler table. You want your traveler table to be directly related to your trip table so that any data you add to your traveler table for a specific trip will be added to that trip and not all.

The steps to achieving this include creating the relationship between tables, modifying the forms and views, adding the related subgrid to the main Trip form, and configuring the Portal Management App and portal designer.

I have created a Trip Planner application where Trip is the main table and Traveler is the related table in this walkthrough. By the end, we will have one Trip to many travelers and ensure the travelers for one Trip don’t get added to a different trip.

Traveler Subgrid Example

This example image is what the Traveler subgrid will look like inside the beach trip.

Steps:

  1. In your solution, create a Trip table with custom columns
  2. Create a Lodging Table
  3. Create a 1:M relationship between Trip and Travelers
    One to Many from Related table
  4. Customize the view for both Trip and Traveler
  5. Add a new Main form inside the Trip table
    1. Add custom columns by dragging or clicking it from the left panel
    2. Add a related subgrid in the same tab
      Component LayoutNew Trip Layout
    3. Save and Publish the form, Click Back
  6. Navigate to the Portal Management App
    1. Create 2 new Entity Forms
    2. One for “New Traveler”
    3. One for “Update Traveler”
      New Traveler UpdateUpdate Traveler Image Edit and Record Source Type
  7. Create a new entity form called “Update Main Form”
    Select New Entity Step

    1. Navigate to Entity Form Metadata tab, click New Entity Form Metadata
  8. Select Subgrid from Type
  9. Select the correct subgrid from the drop-down
  10. Select the New Traveler form for Create
  11. Select Update Traveler form for all other actions
    Update Traveler and Create Entity
  12. Create an Entity form called “New Main Form” and follow the same steps for the subgrid configuration but ensure the Mode is Insert in the General tab
  13. Your Entity Forms should look like this
    Active Entity Forms
  14. Navigate to Entity Lists inside the Portal Management App and create a new list called “Main List”
    Main Entity List
  15. Under the Options tab, Add Main Form to Grid ConfigurationAdd Main List Entity to Configuration
  16. Navigate to the Portal Designer editor
    Navigate Trip Planner portal
  17. Add a List from Components
    Add list from components
  18. Select Use Existing, since we already created an Entity List in the Portal Management app
    1. Select Main List
      Update existing list
  19. Click Sync Configuration, then Browse Website
  20. You’ll see your Trip view and you’ll be able to Create New or Update an existing Trip
  21. Notice your related Traveler subgrid is added to both forms for editing
    Related Traveler Subgrid for editing 1
    Viewing Trip Details

As you can see, adding a related subgrid to your Power Apps Portal can be done out of the box with no code needed! The purpose of this is to be able to link multiple tables to each other and have them displayed in Power Apps Portals. Feel free to follow along using my instructional video for more detailed instructions.

Build a Leave Request App with Power Apps

October 6, 2020
This blog is a step-by-step walkthrough of building a fully functioning leave request app for any organization with a vacation, sick leave, military leave, bereavement leave, holidays, Jury Duty, and so on. This app will include a solution in the Common Data Service, a Model-Driven App, a Canvas App, and Power Automate. The Canvas App is for employees to submit a request. The Model-Driven App will be a back-office system used by admin or supervisors to check everyone’s requests. The Power Automate flow will trigger an approval email to the employee’s supervisor and an automated email to the employee once the supervisor has either approved or rejected the leave request.

The app’s flow will start with the employee using the Canvas App to submit a leave request form. Once that form is submitted, an email is sent to the supervisor, and, simultaneously, a new row is added to the Model-Driven App with the new leave request entry. Once the supervisor has approved or rejected the request, the employee will receive an email with the decision.

Pre-requisites

  1. A Microsoft PowerApps Trial Plan 2, this can be a Free Trial
  2. Ensure you are using an environment with a database

Common Data Service (CDS)

  1. Navigate to https://make.powerapps.com/
  2. Create a New Solution called “Leave Request Solution”
    1. Create a New Publisher called “Leave Request App”Create a New Publisher
  3. Select New > Entity name it “Leave Request Entity” and Enable Attachments
    Enable Attachments CDS
  4. Select Add Fields
    Add Fields DSC
  • Add Field: First name
    • Data Type: Single Line Text
    • Required
  • Add Field: Last name
    • Data Type: Single Line Text
    • Required
  • Add Field: Email
    • Data Type: Email
    • Required
  • Add Field: Supervisor Email
    • Data Type: Email
    • Required
  • Add Field: Start date
    • Data Type: Date Only
    • Required
  • Add Field: End date
    • Data Type: Date Only
    • Required
  • Add Field: Request Type
    • Data Type: Option Set
      • Create New: “Request Type”
        Request New Option
    • New Option: Vacation Leave
    • New Option: Sick Leave
    • New Option: Military Leave
    • New Option: Bereavement Leave
    • New Option: Jury Duty
  • Add Field: Work Items
    • Data Type: Multiline Text
    • Required: Recommended
  1. SAVE ENTITY
  2. Navigate to the Views tab
  3. Select Active Leave Request Entities
    Leave Request Entity
  • Right-click on Created On Column > Remove
  • Add Last Name by clicking the field on the left
  • Add Email by dragging the field to the editor
  • Add Start Date
  • Add End Date
    Add Start and End Date
  1. Once your View looks like the above, click Save, Publish, then Back
  2. Navigate to the Forms tab
    1. Click on the row with the Form type “Main”
      Form type “Main”
    2. Add all custom fields by clicking them directly on the left
    3. Select the section so that it is outlined in purple
    4. Click Formatting on the right, select 2 columns
      Formatting
  3. Once your Form looks like the above, select Save, Publish, then Back

Model-Driven App

  1. Navigate to the “Leave Request Solution”
  2. Select New > App > Model-Driven App
  3. Name it “Leave Request Back Office”
  4. Check “Use the existing solution to create the App”
  5. Select Next
  6. Select Solution: * “Leave Request Solution”
  7. Select Site Map to configure it
    Select Site Map to Configure

    1. Select the pencil next to New Subarea
    2. Select the “Leave Request Entity” from the dropdown on the right
      Leave Request Entry from dropdown
  8. Publish, and Save and Close
  9. In the App Designer view, select Publish then Play
  10. Select New
    1. Add test data
    2. Select Save & Close

Canvas App

  1. Navigate back to the “Leave Request Solution”
  2. Select New > App > Canvas App > Tablet form factor
  3. Select the Insert tab > Forms > Edit
  4. A box will appear in the editor, select Connect to data
    1. Select “Leave Request Entities” on the left
    2. Under Data source on the right, select “Leave Request Entities”
    3. Select Edit Fields
    4. Add the remaining fields in the popup modal
    5. Set Default mode to New
    6. Change name to “Leave Form”
      Change Name to Leave Form
  5. Navigate to Insert tab > Button
    1. Select OnSelect from dropdown
    2. Type “SubmitForm(‘Leave Form’);Navigate(Screen2);” in the functions(fx) box
      Functions box

      1. Select Text from dropdown and type “Submit Request”
  6. Navigate to Insert tab > New Screen > Success
  7. Navigate to the File tab > Save > Publish > Play
    Save and Publish, then play
  8. Add test data, select Submit, navigate back to the Model-Driven App to see the new entry

Power Automate

  1. Navigate back to the “Leave Request Solution”
  2. Select New > Flow
  3. In the search box type “When a record is created” and select the Common Data Service option
    Common Data Service Trigger Box
  4. Fill in the trigger box:
  5. Select New Step
  6. Then the Choose an Action box, type “Start and wait for an approval” in the search box and select it
  7. Fill in the action box using the Dynamic Content box
    1. Click inside the input field and then select the correct dynamic field from the Dynamic Content popup box
      Dynamic Content Box
  8. Select New Step
  9. Select Condition
  10. Fill in the boxes:
    Fill in the Boxes for the Trigger
  11. Select Save >Test > Check “I’ll perform the trigger action” > Select Save & Test
  12. Navigate to your Canvas App, select Play, add test data, and Submit Form
  13. You should see an approval email in the inbox you sent the supervisor email to, select Approve
    Approve Email
  14. Another email will be sent to the employee’s email with the response
    Approved Request

Final Thoughts

Congratulations! You have completed the Leave Request app using the Common Data Service, a Model-Driven App, a Canvas App, and Power Automate. You have a fully functioning application that can be used right away! The next steps would be to implement a status field where the Approve or Reject decision will be updated in the Model-Driven App so supervisors can keep track of any pending requests. This app can be adjusted to your organization’s needs and requirements, but this app is a great starting point.

INFOPATH FORM MODERNIZATION WITH POWER PLATFORM
Discover how we helped a Fortune 100 Insurance Company modernize their InfoPath forms with Power Platform.

View Case Study

Things to Consider when Presenting at a Conference

August 10, 2020
How do you know you’re ready to present at a conference? You may have a good understanding of how something works, or you can build and explain how you reached a specific solution. I’m writing this article not because I am a presentation expert, but because I presented once at a large conference (and have seen a fair share of live presentations). If you follow the path that I took, presentations don’t have to be scary, but an opportunity for you to present your work to your peers!

Background Info

I presented at the Power Platform World Tour in DC. My manager suggested I put together a few ideas for a proposal, and he would help guide me in the right direction. I submitted three different plans, and the one below was accepted!

Screenshot of Breakout Session

Pre-Presentation Day

  1. Prepare in advance – This blog is for a 1-hour presentation
    • About one month before presentation day, start building out a slide deck
    • Don’t include YouTube videos; the audio will probably fail or slow you down
    • Try a screen recorder for videos instead!
    • Add more images than text
  2. Practice going through your slides on your own a few times
  3. Record yourself presenting and play it back
    • Time yourself to ensure you don’t go over 30 minutes
  4. Build a demo – this should bring your slide deck to life
    • It can be a live walk-through or pre-recorded
    • Go through your demo alone to expose any bugs or technical difficulties you run into
  5. Demo to some colleagues/friends
    • A demo is a safe place to get input and ideas and run into more technical challenges to troubleshoot later

At this point, you should be ready to present

To Be Safe!

  1. Do a dry run of your slide deck and demo the day before – this will give you peace of mind
    • Fix any last-minute bugs
    • Ensure you are within the allocated time
  2. Set up your demo material and prepared for your presentation
  3. Have a backup demo prepared
    • If all else fails and you’re in the middle of your demo, and things start to break, have a backup demo plan, one that already works
  4. Have a few ideas prepared if your presentation runs fast
    • You could allocate time in the end for questions, but you also run into the risk of there being no questions, so have something in mind to present or demo if you run 10-15 minutes short
  5. Bring an extra adapter for your laptop and plenty of business cards
  6. Optional: purchase a presentation slides clicker

Day of Presentation

If you’ve followed the pre-presentation day steps, you should feel prepared. If you still feel nervous/anxious, imagine that you are a member of the audience. The audience does not know that you are worried. As an audience member, you walk into a presentation, not knowing much about the topic or the presenter (for the most part). The audience has come prepared to listen and isn’t focused on how nervous the presenter might be. Loosen up, make sure to have fun, and remember your practice!

Don’t skip meals and drink plenty of water.

  1. Arrive at your session 10-15 minutes before your allocated start time
    • Connect your machine to the display board
    • Set up your microphone
    • Pull your slides up on your laptop.
    • Have your demo ready in the background
  2. Go through your presentation, just like you practiced.
    • Don’t forget that you are the subject matter expert in the room. Your presentation is what they have come to listen to.  Be confident.
  3. Pay attention to the time.
  4. Thank everyone for coming, provide QR codes on the display screen for any social media and remind them to take your business card

Presenting at a Conference

Final Thoughts

You’ve completed your first conference speaker gig! Even if it didn’t go as planned, presenting in front of a crowd is an accomplishment, you should be proud. Try not to be too hard on yourself and learn from your experience. Most importantly, don’t shy away from the next one. It can only go up from here.

Level Up with Power Apps Portals

April 22, 2020
Getting started with Power Apps Portals is simple; knowing how to customize the portal to your needs and requirements will require more guidance. This guide will take you through important links, tips, tricks, gotchas, and other information you will need to level up on your Power Apps Portals.

Getting Started

Here is the simple part I was talking about in the introduction. You will need a trial environment or your own environment with access to portals to follow these steps.

  1. Navigate to https://make.powerapps.com
  2. Click Create
  3. Select Portal from Blank

Reference: https://docs.microsoft.com/en-us/powerapps/maker/portals/create-portal

Portal Designer and Portal Management App

Two types of applications are created when Portal from Blank is selected; the portal and the portal management app, a model-driven app. To better customize your portal, since the designer is limiting, I have included resources such as the XrmToolBox for code editing and Liquid Language for access to server-side code.

Portal Designer

This is the WYSIWYG portion of the portal. Some of its capabilities include:

  1. Creating webpages and deleting a component
  2. Customizing page layout, templates, sections, colors
  3. Configuring forms, lists, iframe, image, text, breadcrumb
  4. Viewing the live site

Portal Designer Dashboard

Reference: https://docs.microsoft.com/en-us/powerapps/maker/portals/compose-page

XrmToolBox

The portal designer is limiting your ability to fully customize your site. XrmToolBox has a plugin that will allow you to edit code attributes to your portal.
Download XrmToolBox https://www.xrmtoolbox.com/ to get started.

Plugin: Portal Code Editor

  1. Go into edit mode in the portal
  2. Select a webpage
  3. Select the Portal Code Editor plugin in XrmToolBox
  4. Connect your portal using the URL
  5. Select the webpage from the left column
  6. Make a code change
  7. Hit CTL+S to save
  8. Hit CTL+U to update the portal page
  9. Go back to the Portal
  10. Click Browse Website to see the changes

Liquid Language

Liquid is an open-source template language that can be used to add dynamic content to portals without needing direct access to the server-side code. Liquid can write scripts that take data from databases and create html on a webpage. Liquid can be categorized into objects, tags, and filters.
Below is an example of how to load a Power Apps entity by ID. If the entity exists, an entity object will be returned. If an entity with the given ID is not found, null will be returned.

Liquid Language

Reference: https://docs.microsoft.com/en-us/powerapps/maker/portals/liquid/liquid-objects

Portal Management App

The portal management app that is built alongside the portal app is your advanced configuration. This model-driven app will give you access to the below entities for portal configuration.

Portal Management App

Active Websites

Reference: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/configure-portal

Authentication

There are several options to configure authentication for your portal. Local authentication will store users inside the contact record of the Common Data Service. External authentication will be handled by a third-party provider such as Yahoo! and Google. OAuth 2.0 can be configured to use Twitter, Facebook, LinkedIn, and Microsoft.
Reference: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/configure-portal-authentication

Configuration

There are two options to export your portal configuration data and migrate the configuration elsewhere. You can use the XrmToolBox Plugin called Portal Records Mover or you can download the Configuration Migration tool and following these instructions: https://docs.microsoft.com/en-us/powerapps/maker/portals/admin/migrate-portal-configuration

A few things to note if using the Configuration Migration tool:

  • You’ll be able to import your existing configuration once you create a new portal app manually, this tool will not create a new one automatically.
  • When this new portal is hosted, it is configured with all the web pages visible by default and requires manual removal of the unwanted pages.
  • Code added separately is not exported and needs to be configured again.
  • The export creates a reference in the configuration for forms and lists, but the entity is not imported directly. The related entities need to be imported into the environment before starting this process.

Admin Center

To access your portal’s admin center, find your portal under apps, click on the ellipses for your portal, click Settings, click Administration. This will give you access to your portal’s name, the type, changing your base URL, adding a custom domain name using an SSL certificate, ability to download a public key for Live Assist, diagnostic logging, enable maintenance mode, and even resetting your portal.
Reference: https://docs.microsoft.com/en-us/powerapps/maker/portals/admin/admin-overview

Other Notes:

  • Once you have selected a form to be displayed on your portal page, the quick view form might appear on your live site instead.
  • When writing HTML code in Edit mode, the code is saved but deleted the id from the HTML elements. This works fine when completed in play mode as an administrator.
  • When a reference is created on the entity form directly from the Edit mode, it throws an error. When the Create New mode is selected to attach the form, the newly created form must be selected again under the already existing tab.
  • Sometimes the portal reloads the code editor when in Edit mode, this removes the changes that have not yet been saved.

Licensing

  • External users (authenticated) will be $200 for 100 logins/month.
  • External users (anonymous) will be $100 for 100,000 web page views/month.
  • Internal users can access portals using a PowerApps per app or per user plan as per above.

Rethinking Personnel Management with Power Apps

January 8, 2020
While personnel management is a sub-category of Human Resources (HR) that only focuses on administration, the tasks and responsibilities can outstretch the duties of an HR manager. Personnel managers hold an important role by focusing on hiring and developing employees to become more valuable to the company.  

A few of these areas of interest include: 

  • Job analyses
  • Strategic personnel planning
  • Performance appraisals
  • Benefit coordination
  • Recruitment
  • Screening
  • New employee orientation
  • Training
  • Wages
  • Dispute resolution
  • Other record-keeping duties

Power Apps and Personnel Management 

Now I bet you’re thinking how this could tie in with Power Apps. With the various areas that a personnel manager can be involved in, doesn’t it make sense to have one application where everything exists? So that this busy personnel manager can easily navigate and participate in day-to-day duties with ease, get the job done more efficiently, and have it readily available for other team members to view and analyze.

How bizarre would it be if I told you we could build this application with little to no code and have it ready to be used in less than half the time it would take for a developer to code it from scratch? Not bizarre and very doable. With Power Apps, one can quickly build custom business applications that connect to your business data stored either in the data platform, Common Data Service for Apps, or in various online and on-premise data sources like Azure, SharePoint, Excel, Office 365, Dynamics, SQL Server, and so on.  

Why Power Apps?

Apps that are built using Power Apps transform your manual business processes to digital, automated processes. Even more good news – these apps will have a responsive design and can run on any browser or your mobile device. Power Apps will potentially alleviate the need to hire expensive custom developers and this will give you the power and tools necessary to move your business forward.

Let’s Take a Closer Look

If a personnel manager is doing the following, this is how Power Apps can be integrated:

Personnel Management Duty: Posting job ads, reviewing resumes, conducting interviews and making a final decision with management.

Power Apps Solution: This can be done through the Business Process Flow. As you can see with the example below, you will be able to ensure that users enter data consistently and are taken through the same steps every time they work through this type of process.

Stages in Business Process Flow

Personnel Management Duty: Analyze salary data and reports to determine competitive compensation rates.

Power Apps Solution: Power BI, a modern data visualization tool that can spot trends in real-time and make better, more informed decisions based on your specified dataset. This example below depicts the various ways to display data using custom visualizations. Imagine the possibilities!

Sales Dashboard

Personnel Management Duty: Develop and maintain a human resources system that meets the company’s information needs.

Power Apps Solution: Using Dynamics 365, an app within Power Apps. Through the unified interface, your organization will have an application that is easy to use with the flexibility to grow.

 Personnel Management Duty

Personnel Management Duty: Continually monitor changing laws, legislation movements, arbitration decisions and collective bargaining contracts.

Power Apps Solution: Dashboard management that Dynamics 365 offers can easily check for recent changes within your system.

Sales Activity Dashboard

Personnel Management Duty: Continually deliver presentations to management and executives regarding current and future human resources policies and practices.

Power Apps Solution: Use the Power Apps Unified Interface to present detailed reports, dashboards, and forms. You’ll be able to demonstrate the versatility of the application on various devices.

 Customizing Applications

Power Apps not only gives you the capability to drive your business growth but it also eases your mind on the ability to change, update, delete, and customize your application as you see fit. Personnel management is not a simple feat but, using Power Apps can make your mission more manageable while also keeping everything in one place.