Power Apps Portals are a significant part of the organization in terms of long-range strategy. These portals enable organizations to interact with external-facing websites with data from Microsoft Dynamics 365. Recently, Microsoft enriches the portals Dynamics 365 with Power BI Embedded Service allowing customization which allows access to the Power BI Service component (reports, dashboards, and tiles) to external users who do not possess a Power BI account or license.

This blog is the ultimate guide to help you understand how you can embed Power BI visualization in Microsoft Dynamics 365 Portal’s Web page.

Prerequisite:

To access Power BI Apps, you need to have Dynamics 365 for Customer Service organization and a Global Admin user with Dynamics 365 and Power BI Licenses. Moreover, to proceed further you also need to have a provisioned Dynamics 365 License; if you do not have it then go to Power Apps Admin Center and select the environment to access portal setup and provision a portal on any of the given templates according to your requirements.

Steps for Power BI Dashboard and Portal Integration

Once you are done with the completion of Portal Provision and your Portal is up and running then follow the steps below to surface a Power bi on Portal’s website.

Enable Power BI Visualization from Power Apps Portal

• Open the Power App and go to the environment where you provisioned the Portal
• Next, go to the Your Apps in Power Apps Homepage and locate Your Portal
• Choose more commands and press Settings

Next, in the Opened Portal Setting Window, Press Administration

• You will now see that the Power Apps Portal has opened in a separate tab
• Note the App ID and Portal Details Page as you will need them for later steps

• In the Power, Apps Portal choose Set Up BI Integration and press Enable BI Visualisation
• Once you see the confirmation pop-up press Enable

Create an Azure AD security Group and Add it to the Power BI Account

• To display reports and dashboard built-in Power BI workspaces on Portal’s webpage create a security group in Azure Active Directly
• Next, you need to add Portal Application being a member of this group
• Then take the group to the Power BI account from the admin Portal
• Open Azure Portal and Sign in using your Global Admin account
• In the left Pane go to Azure Active Directory Select Groups and then press New Group

• Once you open the New Group Page, select Security and enter a group name
• Click Create

• Open the created Group and go to Manage > Members > Add Members
• Specify Portal App ID you noted earlier and put it in Add member search box
• Click Select

• Now you need to add this security group to the Power BI Service
• Go to Power BI and use Global Admin User Sign in
• On the right choose settings and go to Admin Portal

• Next, from the Admin Portal go to Tenant Setting
• Find Developer Setting> expand Allow Service Principals to Use BI APIs Section
• Using Radio Button Enable it

• Choose Specific Security Groups and search for your group
• Select group and Choose Apply

HOW TO CREATE POWER BI WORKSPACE AND PUBLISH YOUR REPORT

• This step will allow you to create a workspace in Power BI and publish it to a new or existing report.
• Move to Power BI Admin Center by selecting Global Admin user
• Create a Workspace

• Go to the Power BI Desktop application
• Create New Report and or open the existing report that you want to be displayed on your portal

You can see the sample below for your understanding

• Choose the Publish Command from the Toolbar section
• Select the created workspace or any other one of your choice
• You will see a success message when the report is successfully published

Now go back to your workspace and open the report you published and copy the report URL

Enable Power BI Embedded Service from Portal Admin

This step will allow you to select the Power BI workspace which will enable surface reports/dashboards on Portal’s webpage

• Scroll back to Power Portal Admin Center
• Choose Set up Power BI integration > Enable Power BI Embedded Service

• Next Select Power BI Workspaces you want to use and choose the Selected workspaces column and then Choose Enable
• You will see a confirmation message once the embedded service has been enabled successfully

Embed Power BI Dashboard/Report to Portal Webpage

• The final step is to embed the Power BI report/dashboard to Portal’s webpage with powerbiliquid tag
• Choose Power Apps > Power Apps Homepage > Choose Portal Management

• You will see Portal Management App is opened
• Choose Web Pages from the Content Section
• Add a New Web Page
• Choose the Template, URL, and parent page of your Choice
• Click Save

• Open the Content Page from the Localized Content subgrid > Copy (HTML) and add powerbi liquid tag as shown. Make sure to use authentication type as powerbiembedded for report or dashboard in workspaces
• Paste the report URL you noted earlier in the path parameter

Power BI tag: {% powerbi authentication_type:”powerbiembedded” path:”Your report URL” %}

• The last step is to add the web page to Portal Web Link set if needed and brose to Portal in the new tab
• Go to the Power BI web page
• You will then see that the Power BI report is displayed there without needing any authentication/sign in

Congratulations!!! You have integrated the Power BI report/dashboard into the Power Apps Portal’s Webpage.

You can specify the Download action options in the Power Portal Table List so when you hit the Download icon, the information from the table is directly transferred into the computer.

To do so, go to Lists in the Portal Management Model-Driven app. Choose the Column you wish to activate, then select the Download button in the Options and Grid settings. Give the button a name. 

Now you may save the list.

Navigate to portal url>/ services/about to delete the Portal cookies. Ensure you’re a worldwide user and have logged in via the portal with your AD credentials. 

Go to the page with the List to double-check the install choice.

The records will be saved in an excel file once you press the button.

I hope this information is useful.

Would you like to include a menu on the page that, when clicked, launches an external URL website in a new browser window. Is there a simple method to do this without using bespoke code? Here’s how to do it.

· By selecting the URL option in grid settings in a List in power portal, you may open an external URL.

· Navigate to the Portal Management Model driven app’s parameters and click Create.

· It will add a create section and allow you to select URL as the target type. In the box, type “https://logyscal.com/” as the destination URL.

· save the list and clear the cache.

· When you go to the list, you’ll see a new button to link to an external page.

If you find this post helpful consider marking it as a solution to help others find it.

In JavaScript, a regular expression is a very effective approach to evaluate a particular layout of a variable, like an email address or a phone number.

We could implement a regular expression in Power Portal to verify entries without attempting to create any programming.  

Navigate to Form Data in the Basic form. Choose the field for which the regular expression will be associated in a new form metadata of type attribute.

To verify the ten-digit mobile number, enter the regular expression [6-9]d9$ and submit the error “ shown below.

To observe the outcome, save the record and clear the cookie.

The concepts of ads and ad placement in power portals. Because power portals are public-facing websites, we can place advertisements on any of the power portal’s web pages. Let’s see what we can do with this. Create text or image-based advertising and place them around your site in a variety of locations. Place ads at random or choose certain ads for specified positions. For time-sensitive, planned content, you can set release and expiration dates. Advertisements can link to any location and open in the same or a new window. The Ad Placement table and the related Ad table are the two tables that display advertisements in the site. Ads can be shown in a variety of methods, including using pre-made Liquid Templates available via portals via Liquid Templating/example Web Templates, or using MVC actions within the.aspx page.

1. Create Ad Records in the Portal Management Model Driven App.

Open the Apps area after logging into Power Apps. Choose an app that is powered by the Portal Management Model. Navigate to the Ads option from the sitemap in the Portal Management Model controlled app.

Create a new ad by clicking the Create New Ad button. Provide a name, such as “Discount AD,” and select Custom Portal or the portal of your choice as the website. The date from which you want the ad to go live is known as the release date. The day on which the ad will stop appearing on portals is called the expiration date. The status of the publishing is set to Published. Save the ad record now.

After saving the same Ad record, go to the Content Page and customize the overall appearance of your ad. To write HTML code, go to the HTML section. Here is the HTML code.

Continue to the following stage after saving the Ad record.

2. Start making an Ad Placement record and link it to the Ad record.

Make a new ad placement option from the sitemap. Give it a name and the URL of your website.

Save, then go to the Ads Tab and select the Add Existing option to link the Ad record to it.

After completing the above procedures, go to the following step to display the ad on the main page.

3. To display an ad, add code to the web template.

Open the Web Template for the page where you wish to show the advertisement. For example, suppose you want to put an advertisement on the main page. Go to the Web Pages option and type in “Home” in the search box. Check which Page Template is linked with the Webpage record. Check which Web Template is related with the Page Template by clicking on it. Open the Web Template record and replace the old code with the following line of code.

Include the right ad name as well as the name of the ad location.

{% include “ad” ad_name:”Discount AD” ad_placement_name:”Discount AD Placement” %}

Lastly save the website template and run the website by clearing the cache. The advertisement has displayed on the portal.

We can define a power portal as a customer-facing web portal that could be deployed as a power app. CSS can also be used to design the websites of the power portal. However, there is a motif notion that we may customise to create a remodelling style without programming code.

If you prefer, you can utilise Preset Themes, but unless you desire a unique theme, follow these instructions. 

Choose the Themes option in the Portal Studio editing mode and press on +New Theme to open Power Apps Portal Studio.

You could now assign the Theme a label and a brief description.

You can select a colour from the Main, Header wallpaper, Header bar text, Header menu hover, Content background, Footer background, and Footer content areas in the Colours Module.

Using colour pickers, I chose the colours below for the Header template.

I used the following for the body and footer, but you can use whatever you like.

We’re finished, and if you go to the theme menu, you’ll notice that your theme has been developed and deployed.

You can also duplicate a theme to make a new one.

Let’s have a look around the website to see what the theme is.

I hope this was helpful.