In May, AIS held an internal hackathon for Microsoft Power Platform to expose our team to the platform, concepts, approaches through hands-on experience and to demonstrate the role Power Platform plays in modernizing legacy applications in the cloud.
The front-end team focused on building the Power Apps Portal for the end-users and a model-driven app for the administrators. The Portal allowed the users to browse through the product catalog, add an item to the cart, place an order, view their past orders, and manage their profile. The model-driven app allowed administrators to manage the product catalog just like the legacy application. The team used Portals Web API to fetch data from Dataverse and used Liquid templates for web pages.
The Front End team had a goal of migrating the legacy E-Shop web application to the Microsoft Power Platform to provide a website for customers to browse through products and place orders. We also require an application to manage backend data. The Power Platform provides app-building solutions with Power Apps. We developed two applications for our app modernization effort – a Power Apps portal and a model-driven app. Read more to learn how we did it.
Our Approach
We used a Power Apps portal to build an external-facing, responsive website for customers. This portal replaces the front-end of our legacy application. The selling point of the Power Apps portal is the capability to securely target an authenticated user and the flexibility of catering to anonymous users, all in the same product. In addition, the portal app integrates with Microsoft Dataverse, a feature-rich data storage solution.
For data management, we developed a model-driven application. A model-driven app follows a data-first approach and provides a customizable interface, including views, forms, charts, and dashboards, to manage data present in Microsoft Dataverse. This application is only shared with internal users, i.e., users who exist in our Azure Active Directory. The app allows the internal user to create, update, or delete products from the catalog; these catalogs and products are shown on the Power Apps portal.
Technical Approach
Power Apps Portal
The Power Apps portal allows users to browse through the product catalog, add an item to the cart, place an order, view past orders, and manage their user profile. A default domain is provided for the Power Apps portal but can also be set to a custom domain.
The authentication method used is Azure B2C, which is Microsoft’s preferred method of authentication. An extension of the Azure Active Directory model enables external customers to sign in with either local credentials or through a choice of several common social identity providers. Each authenticated portal user associates to a record in the Contact table in Dataverse.
A key concept of the Power Apps portal is building reusable web templates. They come in handy when multiple web pages need a standard template. For this portal application, we created two templates – header and footer are used by all web pages. We used HTML and Liquid programming language for design. Power Apps portals can be further customized with CSS and JavaScript where needed.
The portal app consists of multiple web pages to provide different abilities to users, and each page’s relationships to other web pages form the website’s hierarchy. Permission can also be set up for which pages each web role has access to. The web pages created for this portal app:
- Home: Displays the product catalog, which allows users to filter products by brand or type and add a product of their choosing to the cart. This page is accessible to all users who visit the portal.
- My Cart: Displays the product(s) added to the cart, accessible only to authenticated users.
- My Orders: An authenticated user can see previous orders and further drill down to get the order details.
- Profile: Authenticated users can edit their profile information if needed.
When a user checks out and places an order, each product is associated with an order ID for tracking. Since all the data is stored in Dataverse, the portal’s web API interacts with this data. The portal Web API can be used to perform CRUD operations across all Microsoft Dataverse tables from portal pages.
NAMED 2021 PARTNER OF THE YEAR AWARD FINALIST
AIS was recognized as a Finalist for the Microsoft 2021 Power Apps and Power Automate Partner of the Year Award!
For security, table permissions and web roles are implemented to ensure the privacy of the data from unauthorized users. Users are assigned web roles to determine their level of access. There are three out-of-the-box web roles available- Administrators, Authenticated Users, Anonymous User (Unauthenticated User). Users are automatically assigned the Authenticated user web role once registered with the portal making user roles easy to maintain.
Table permissions are enabled, which allows showing records based on user context. For example, users can only see their order(s) if they are authenticated and no other user’s order information is available. Table permissions are also used to show products within the order, based on the product’s parent/child relationship to the order.
Model-Driven App
The model-driven app is used for catalog management and serves as the back end for our application. It contains a custom form where users can add, delete, or view details of products and catalogs. Active (referring to status) products and catalogs are displayed on the portal app. When a product is no longer available, it can be deactivated, which refers to soft deletion. I.e., the product is no longer be visible on the portal website but is still part of Dataverse.
The model-driven app also allows users to view relationships between data and tables, add personal views of data, and make additional customizations to the app based on the permissions of the user’s assigned security role.
Lessons Learned
We can use a Power Apps portal as a modern low code alternative to create websites and interact with data in Dataverse.
Model-driven apps provide a rich no-code design environment and can also be distributed as a solution.
Thank you to the Front End team for sharing their experience
Ritika Agarwal (team lead)
Devyanshi Tiwari
Pooranendu Patel
Next steps
PowerApps Portal supports many languages, so in the future, we can make this website available in multiple languages.
We will be diving deeper into each team, so stay tuned for more blog posts around our AIS Internal Hackathon!
JOIN OUR GROWING TEAM
AIS provides employees with opportunities to learn and grow in their careers. Won't you join us?
Recommended Content
https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/
https://docs.microsoft.com/en-us/powerapps/maker/portals/
