blog

Cool ways to add 1000+ Icons & Emojis in power apps

Almost every app and website user an icon extensive. One of the most important ways to give your apps more graphical and visual depth is through the use of icons. Numerous icons can be found under the icons menu, along with geometric shapes that can be stacked on top of one another to produce effects. There are many icons available, and many of them will meet the graphical needs of your app without requiring you to create your own graphics. In this video, I’ll demonstrate four different ways to use icons in Power Apps in this video.

  • Icons that are pre-made and included with the App Maker studio – are fantastic, however, the choices are few,
  • My least favorite option is to upload icons as photos because they are static and their colors cannot be changed.
  • SVGs are my FAVORITE choice. With movement, linear gradients, lighting effects, and so much more, they open up a whole new world of potential in Canvas Apps.
  • The fourth one is characters in Unicode (icons). They are essentially symbols that you may choose, copy, and paste wherever you like.

Images
https://www.flaticon.com/free-icons/download
https://icons8.com/icons/set/download

Icons website
https://www.matthewdevaney.com/2000-free-power-apps-icons/
https://icons.getbootstrap.com/

Unicode websites
https://materialui.co/unicode-characters/
https://www.w3schools.com/charsets/ref_utf_symbols.asp
https://www.compart.com/en/unicode/U+058D

Welcome to PowerPlatform User Group Kathmandu!

Finally, I was able to organize a PowerPlatform User Group in Kathmandu. The Power community is very much growing in Kathmandu and I’ve met some professionals during community events. However, it’s really tough to have them or anyone we don’t know to connect with each other. So I hope the group will work as a platform to connect everyone. This group is centered around Kathmandu for everyone working in PowerPlatform. We want to bring together everyone working in PowerPlatform in Kathmandu and learn from each other.

Power Platform User Group Kathmandu – Power Platform Community (microsoft.com)

The plan is to meet quarterly, share, go over the latest updates to Power Platform, help new users get started, and explore specific topics in detail. Everyone is welcome to join the event. And feel free to reach out.

Power Platform user group is to gain the education and support you need to build custom business apps that connect to your data and work across web and mobile. Attend in-person meetings where you can work with others in your industry to see how this no code/low code option has transformed the way they do business.

Honored and grateful! Awarded FastTrack Recognized Solution Architect

Summit Bajracharya is the 2021 FastTrack Recognized Solution Architect

I’m honored and grateful to announce that I’ve been named a FastTrack Recognized Solution Architect, joining a group of 27 others from around the world.

FastTrack Recognized Solution Architects | Microsoft Power Platform

The Power Platform product innovation team bestows this distinguished award for regularly demonstrating broad architecture experience and delivering high-quality solutions for customers during project engagements.

It means a lot to me to be included alongside great industry leaders. I want to express my gratitude to Microsoft, especially the product engineering team for recognition! I want to thank my team and the clients for having their faith in me and given me the ability to show my skills and do what I enjoy the most!

Why and how to use Service principal to trigger PowerAutomate?

Have you faced trouble when you use “When a record is created, updated or deleted trigger”? In my case, it took a long time to trigger or sometimes doesn’t trigger at all. It worked for Depreciated Dynamics connector but with the CDS connector, it seems to be an issue.

I switched to using Service Principal for connecting with the PowerAutomate and it greatly solved this issue while I couldn’t find any official documentation which mentions this solution though.

What is Service Principal?

PowerAutomate or any automation tool required privileges to access data. In order to access data, we use connections in PowerAutomate. And usually, with PowerAutomate, it’s more convenient to use a user account to set up a required connection but it comes with its own baggage. With service Principal, you create an application within Azure Active Directory, which is authorized to access resources or resource groups in Azure and the assign security roles to that user.

Why service principal?

  • Removes dependency from a user account.
  • Provides better security and keep the access limited to the application rather than a use.
  • Make it configurable for the minimal permissions required by the flow and ensures the flow actions are not tied to a specific human user.

How to connect to service principal?

When creating a PowerAutomate, you can click on Connect with Service Principal.

You need to provide Client ID and Client Secret along with Tenant Id to establish a connection. You can check below to see how you can do that.

How to create service principal?

For creating a service principal, you need to register an app in Azure and give the access to that app to access data for user impersonation.

  • Go to portal.azure.com
  • Search for Azure Active Directory or click from the Azure Services list.
  • Go to App registration to register an app.
  • Register an application. Give a suitable name and Select a supported account type, which determines who can use the application. Under Redirect URI, select Web for the type of application you want to create. Enter the URI where the access token is sent to.
  • You can get the Client ID and Tenant ID from the overview screen.
  • For client secret, click + New client secret and generate a secret. Copy the secret and put it into your PowerAutomate connection and select user impersonation.
  • You need to provide API permission to access Dynamics 365 Data. Go to + Add a permission, Click on Dynamics CRM.

Creating a application user to impersonate.

  • Go to Advanced Settings
  • Click on Settings > Security > Users.
  • From the view selector, select Application user.
  • Click + New
  • Select Application user from the form selector.
  • Paste the Application ID of the registered App on the Application ID field.
  • And give the appropriate security role to this user.
  • And voila you’re done.

CSS in PowerApps

CSS in powerapps

Cascade Style Sheet or CSS in PowerApps is a capability that I wish will be part of a core feature of PowerPlatform someday. CSS has gone far past mere aesthetics to create unparalleled versatility. CSS is not only used, contrary to common opinion, to provide a web page with a simple style to make it appear more appealing. There are lots of other things that one can also do with CSS. 

With PowerApps, we wish there is a direct method to apply CSS to the App that we are building. Anyone who knows WordPress can feel that a simple additional CSS feature that comes with it empowers us to optimize every visual element on your site.

While Actual CSS is not possible, there are few things that we can do. 

  1. Create a pseudo CSS by creating an object and defining styling values.
  2. using inline CSS in HTMLText  

Create a pseudo CSS by creating an object and defining styling values

In this example, we will learn how to create pseudo CSS for button control in the PowerApp.

  • Go to App in the Tree View and select OnStart Property.
  • Create a style object on the OnStart Property.
CSS in powerapps
Set(ButtonCSS, {
FontFamily: Font.'Segoe UI',
BackgroundColor: RGBA(127, 178, 57, 1),
BorderThickness: 1,
Color: RGBA(255,255,255,1),
Padding: 8,
TextAlign: Align.Center
})

Now create a button and set values of ButtonCSS in the property of the button.

CSS in powerapps

Using inline CSS in HTMLText  

An HTML text control is a control in PowerApps that shows plain text and numbers and converts HTML tags, such as non-breaking spaces. Sadly, we can’t define global CSS in the HTML text control, but the best thing that we can do is define inline CSS.

CSS in powerapps

As a workaround for setting global CSS, you could set global variables in the OnStart method.

Set(myStyle, “color:blue;font-size:46px;”)

Then in the HTML text control…

"<p style='"&myStyle&"'>
      I'm a big, blue, <strong>strong</strong> paragraph
    </p>"
CSS in powerapps

And that’s it. This is how you can somehow implement the CSS like an attribute in PowerApps. We expect more to come on the platform itself in the future, but I hope it works out as a workaround for now.

HOW TO: Change Icon Background Color of PowerApps Controls

Changing color of Icon Background of controls in PowerApps Controls

I was working on one of my PowerApps projects where there were some fancy design requirements to be implemented. While working on it, I found that there is a good enough inconsistency in changing the Icon background color of the controls that are available in the PowerApps.

In this article, I am writing about all the different ways you can change Icon Background color of all the controls in the PowerApps.

What is Icon Background color?

On the right side of DatePicker, Dropdown and ComboBox, there is a icon, clicking on which you’ll get calendar, list of items depending on which control it is. The background of that section is pretty easily but inconsistent so can be tricky.

Changing color of Icon Background of controls in PowerApps Controls

Changing Icon Background in different Controls.

  1. Date Picker: You can go to property selector of the DatePicker control and put the color code in the IconBackground property. You don’t have option to change it from the right side property panel.
Changing color of Icon Background of controls in PowerApps Controls

2. DropDown & Combobox: You can change it from the ChevronFill property from the property selector. You can also change it from the right side of the property panel and select the color.

Changing color of Icon Background of controls in PowerApps Controls
Changing Chevron color from property selector.
Changing color of Icon Background of controls in PowerApps Controls
Changing Chevron Color from the property panel.

How I created a Piano in PowerApp

Piano in PowerApps

Fews days back, I saw a tweet seeking people interested in creating a tutorial of a Christmas app for kids. I replied over that tweet. With that I connected with Rory of PowerApps4Kids, I pitched him the idea of the piano where we have to play the note of the Jingle Bell correctly. And if you play the whole notes correctly then you have Santa at your windows.

The way, I approached this is. First, there are a couple of objects that you need to place on screen.

  • Image Control:
    • Image of the window in the background
    • Image of Santa
    • Image of Mery Christmas
  • Button Control:
    • The piano keys
    • Reset button
  • Label Control:
    • To show the key to press
  • Audio Control:
    • That plays the keynotes
  • Gallery:
    • To place button controls

You can find all the required media sources at Games/SantaPiano at master · powerapps4kids/Games (github.com)

Place Image of Window in the canvas. Go to Insert>Media>Image. On its Image property set value as “https://raw.githubusercontent.com/powerapps4kids/Games/master/SantaPiano/image.jpg” and set its Image position as Fill

My original idea was to place all the keys at once. Rory gave a clever idea of using a gallery to place all those keys in a gallery so that there is less copy-pasting of codes to each key. Insert a gallery into the canvas name it as galNotes. Go to Insert > Gallery > Horizontal and set its Items as

["C","D","E","F","G","A","B"]
Piano in PowerApps

Inside the gallery, add the button. Change its background fill as white. And set the text property of button as

ThisItem.Value

Add label with fill as Black to show black keys. Though it won’t be functional. You can use button and use the notes for them to make it functional though.

Insert a audio media set its Media property as

"https://raw.githubusercontent.com/powerapps4kids/Games/master/SantaPiano/"&galNotes.Selected.Notes&".mp3"

Now, on the Start property of the Audio control, we set its value as gvStartAudio

Piano in PowerApps

Select the button on the gallery and change its onSelect Property as

Set(gvStartAudio, false); Set(gvStartAudio,true)

We are setting it to false and back to true. This changes the value of gvStartAudio, making the Audio trigger since it has gvStartAudio on its start. If you have it set to true, it will play once and won’t play again.

We create label where show the code to display. On its Text

Last(FirstN(["E","E","E","E","E","E","E","G","C","D","E","F","F","F","F","F","E","E","E","E","E","D","D","E","D","G","E","E","E","E","E","E","E","G","C","D","E","F","F","F","F","F","E","E","E","E","G","G","F","D","C"],isCorrect)).Value

Now, we add an extra function to the piano key to check whether we are pressing the right keys. So, the final code looks like this.

Set(gvStartAudio, false); Set(gvStartAudio,true); If(ThisItem.Value=LabelNote.Text,Set(isCorrect,isCorrect+1)

We need to set an initial value for isCorrect so go to App on the left and on its onStart Property put this function

Set(isCorrect,1)

When we press the right keys the santa would appear, you need an 52 notes to be played correctly. So, Insert the image of Santa and Merry christmas. After that on its Visible property you can put following function.

isCorrect>51

This will show santa where the correct notes are played. And it will appear. In order to make it more interactive, may be you can change the color of highlight keys by changing its fill if thats the right keys. If(Self.Value=LabelNote.Text, Gray, White)

In conclusion, you get a cool Piano Santa Christmas app to play with. The whole course will be available with some other courses at Power Apps 4 Kids – Big Kids and Little Kids . You can also check PowerApps4Kids youtube channel to check Rory teaching you to make this app.

Microsoft Dataverse for Teams and the possibilities it drives

Dataverse for teams

Microsoft has finally renamed “Common Data Service” to “Microsoft Dataverse” and “Project Oakdale” to “Microsoft Dataverse for Teams” after briefly calling them Dataflex and Dataflex pro. In this article, we will discuss what Microsoft Dataverse for the Team is, how it differs from Dataverse, and many possibilities it drives.

Microsoft Dataverse is a data storage platform that acts as the foundation for PowerPlatform. Microsoft Dataverse for Teams is a subset of Dataverse that inherits much of its features. Microsoft added these low-code/no-code components within Teams to position it as a platform for all work forms, not just limiting it as a communication app.

Microsoft Dataverse for Teams

Previously, Microsoft Teams could use Microsoft Team Toolkit for Visual Studio and VS Code to build teams app. While you can continue to do that, you can leverage the power of PowerPlatform to develop quickly.

Following are the differences between a Dataverse for Teams and Dataverse table features.

FeatureDataverse for TeamsDataverse
Basic data typesYesYes
Advanced data types (customer, multiple transaction currencies)NoYes
Common Data ModelComing SoonYes
Relational storageYesYes
Non-relational storage (logs)NoYes
Managed data lakeNoYes
File and image supportYesYes
Find, filter, sortYesYes
Advanced and relevance searchNoYes
Mobile offlineNoYes

So, what can you do with Microsoft Dataverse for the Team?

With Microsoft Dataverse Teams, you can now use almost all the features of PowerApps, PowerAutomate, Virtual agent, and PowerBi. That means you can create, run, share app, bots, and flows inside the Teams.

You will also get a storage capacity of 2GB per Team with 1 million records. With Dataverse in Team, you get the ability to build, populate, and query data. You can create multiple tables, add fields to them, and define the relationship of tables with each other. You can upgrade Dataverse for Teams to Dataverse if the company needs additional features, such as more granular protection and governance control or capability above approximately 1 million.

It also comes with security that’s easy to use and aligned with approaches used in Teams with a focus on Owners, Members, and Guests.

Each Team has it’s Dataverse environment. If you create tables in the Teams and go to the admin center to check, you can figure multiple Environments listed with Environment type as Microsoft Teams.

Limitation with Teams

  • With Dataverse for Teams, there is a limit in storage capacity, 1 million rows or 2 GB. 
  • You have a limit of creating 500 Teams with a Dataverse environment.
  • You can’t share Power Apps outside the Team it is built.
  • You can share Power Virtual Agents with an entire organization, but the system will also remove the app/flow/bot if you remove the Team.
  • You can’t use “Premium connectors” unless you have a license to use it. And these licenses can be too expensive.

Responsive PowerApps with Layout container

Responsive PowerApps

This month PowerApps has released the preview of the horizontal container and vertical container layout containers that further improves the experience of creating response PowerApps. PowerApps user community has been asking for responsiveness in PowerApps for quite sometime and this feature is now available

How to turn on this feature:

If you have an old app, where you want to have this feature turned on,

  • Go to File > Advanced Settings
  • Go to Layout Containers and turn it on.

If you are creating a new app, it is on by default.

Also, make sure Scale to fit is turned off

  • Go to File > Screen Size + orientation
  • Go to Scale to fit and set it off
  • Click apply from the bottom right

How to make the PowerApp responsive using containers

In order to have a responsive app, you can start by inserting a responsive screen layout.

  • Go to Insert > New Screen > Split-screen, Sidebar or Header, main section, footer
Responsive PowerApps

Selecting anyone of those will generate a screen with a standard layout with multiple containers.

You can also create a screen layout from blank; and then add containers within the screen keeping it in your required layout.

  • From the left side of the screen, click on the insert (+) icon
  • Search for containers, you will get three results: Horizontal Containers, Vertical Containers, and Containers.

Properties of Container:

Containers help in placing objects encapsulated by the container responsively. There are different properties a container has, and when you add controls within a container, they have different properties compared to the button that is not within the containers.

Responsive PowerApps

Direction: There are two options in the direction, Vertical and Horizontal. With vertical, you get the container’s controls one above another vertically, and with horizontal, you get the controls within the container to be placed in a horizontal sequence.

Horizontal and vertical layout

Justify (horizontal) & Align (vertical): Both of these give horizontally or vertically in the correct relative position. For example: left, right, center, and options like a stretch to fill the space in the container or Space between that distributes the controls equally within the container.

Gap: defines the space between two consecutive controls.

Horizontal Overflow and Vertical Overflow: This property hides or puts a scroll if there is an overflow of items within the control horizontally or vertically.

Wrap: it allows control to be wrapped onto the next line.

Wrap in PowerApps

Responsive Properties of controls inside the container

Minimum height: If you have a horizontal container and your Align (vertical) is “Stretch”, you can define Minimum height. With the screen’s responsive behavior, the control might stretch and squeeze, but it can’t be less than the height defined with minimum height.

Minimum width: If you have a vertical container and your align (horizontal) is “Stretch”, you can define the minimum width. With the screen’s responsive behavior, the control might stretch and squeeze, but it can’t be less than the width defined with minimum width.

Align in the container: With this property, you can define the control’s alignment in the container; it can be “Set by container” or “custom”. If it is “Set by container” then it will inherit whatever is defined in the parent container. Still, in case you select custom, you can define an alignment unique to the selected control.

Flexible width: This property is available for the only horizontal container. With the flexible width off, the width of controls will be whatever width is defined in the properties. But when flexible width is On for a single control within a container, the button will occupy the space left within the container. If multiple controls have their flexible width set as On, both will occupy the space left equal portion control portion. You can define in the Fill portion property if a particular control needs to acquire a higher portion of the container’s space.

Flexible height: This property is available for only vertical containers. It is the same as flexible width but works vertically. With the flexible height off, the height of controls will be whatever height is defined in the properties. But when flexible width is On for a single control within a container, the button will occupy the space within the container. If multiple controls have their flexible width set as On, then both will occupy the space left in control in the equal portion. You can define in the Fill portion property if a particular control needs to acquire a higher portion of the container’s space.

Making the container responsive

With all the properties discussed above, the container’s controls will act responsive, but the container will still have a fixed width unless you define its width as “Parent.Width” . With this, the container will inherit the height of the screen it is in.

If you create a screen from New Screen and select the predefined responsive layouts, then the containers generated have all the property defined. Try creating a screen with a responsive layout. You can see three containers in a vertical container meaning that containers can be placed nested.

Similarly, If you look at their properties, you can find that the header container and the footer container have flexible height turned off, and the one in the middle has it turned on, making the container in the middle respond according to change in screen size.

responsive screen layout in powerapps

Change app size in preview

When you preview the app, you can find an icon in the top right. If you click the icon, you get option to choose between Window Size and Canvas Size. When you select Window Size, the app will respond to the changes when you change the window’s size. When you select Canvas size, it stays pretty much static.

Change app size in preview

Custom logic based on device being used

One of the amazing properties that you can use to define cases for different devices is the Size property. The screen’s Size property classifies the current device size. If you want to hide certain elements or change the logic for width height base of the screen size, you can use Parent.Size and compare with ScreenSize.Small, ScreenSize.Medium etc.

ConstantValueTypical device type (using default app settings)
ScreenSize.Small1Phone
ScreenSize.Medium2Tablet, held vertically
ScreenSize.Large3Tablet, held horizontally
ScreenSize.ExtraLarge4Desktop computer

In conclusion, PowerPlatform has opened doors to limitless possibilities with the release of this feature. Responsive Powerapps is going to solve lots of problems that we had to convince clients as a platform restriction.

You can find official Microsoft documentation here:

PowerApps new search experience: What’s exciting about it!

Just In Microsoft has released the Powerapps new search experience in Model-Driven Apps. In this article, I am going to discuss how to enable this feature, what features it gives, what are the improvements over the previous relevance search, and some of the things you might need to be aware of.

Turning on PowerApps new search experience

To turn on the new search feature, you can follow steps:

  • Click on the gear icon on the right side of the screen.
  • Click on the admin center from the menu.
  • Select the environment for which you want this feature to be turned on.
  • Click on setting from the top ribbon
  • Click on Product, then click on Features
  • Turn on the Use new search experience

After setting the User new search experience on, if that doesn’t work

  1. Turn off the relevance search feature
  2. Wait for 5-10 min
  3. Turn it back on

What’s new in the search experience

The new search experience has a nice user experience for searching records. There are a number of improvements in the new experience:

Search from the header:

The search used to be on the right side of the top bar which was a lot less prominent was difficult to figure out. The new experience is much more prominent and is easily discoverable on all pages.

powerapps new search experience

Recent searches and recently access searches:

This gives a more personal experience of recently searched records and recently accessed searches.

powerapps new search experience

Search-as-you-type:

This feature is another way the new search feature helps you find information without you needing to figure out a whole query.

Improved search result page:

On this page, there are search results for the query grouped by the table with a sort of record grid. You can also apply additional filters to search.

powerapps new search experience

Intelligent Search:

Microsoft documentation says PowerApps new search experience leverages AI for natural language processing and fixes issues that come from incorrect spellings to deliver better results. But the results that you may find in the quick search might not appear when you click show all results. The quick suggestion search and search page are different by design and there is no way around for this so at least for something it will stay like this.

Issues you may face

  • The search may not search all your entities. You have to configure your entity in the relevant search list. Click on Gear Icon, click on Advanced Settings > Settings > Customizations > Customize The System. You’ll get a Default solution window. Click on Entities and configure the relevance search. And publish all.
  • The search might not search through the right field. Again from the legacy Solution Explorer, Go to Quick Find View for the entity, select Add Find Columns, and check the boxes for the fields you want to be considered for the search.
  • The search might not show all the records, in that case, go to the filter criteria for the Quick Find view of your entity. Usually, you might not see the inactive records due to filter criteria being placed in this view.