What is Issue?

Microsoft Dynamics 365 is moving towards no-code and low-code strategies of software development and providing the abilities to create power apps, CRM, ERP systems and portals in no time. But while developing Apps for business use cases, developer faces lots of repetitive scenarios on multiple places in same app or different app. Some formulas developer need to write again and again. Similarly, he/she needs to design same screen again and again.

Suppose, App is fully developed and live. Business want to change some formula which is used at 100 places in App/Apps. How to handle this?

The Reason-

Formula/component is created at each place manually or by copying the from some other place. It will be difficult to manage the change at 100s of places in App/Apps for single requirement change by business.

Solution-

Microsoft Power Apps provides the way to create component library which can be utilized across the apps. Each library can have multiple components. Using Component library developer can create common screens, functions, actions, etc.

Let’s see the Scenario –

I am developing the app for vendor/retailer who sells electronic Item. The vendor/ retailer is selling the used/renewed products with the prices decided after product renewed. Each item is having it’s price from brand. Now vendor want to show the customer how much discount (over actual price of brand new product) customers are getting if they purchase product from the vendor/retailer.

The same vendor is having different app where he is having same requirement for his bicycle shop where he is selling renewed bicycles with new prices.

Now lets develop the common component which can be used for both the apps. So let’s create the reusable discount function.

Go to Power Apps Maker and navigate to Apps, change tab to Component Library and click on +New Component Library-

I have created the “DiscountCalculator” component Library and renamed the Component “SimpleDiscountCalculator” . This component name will be used in Apps.

I just need to create the reusable function for now, So I am not adding any controls on the component and reducing the size of component. It will make it hardly visible and easily draggable on the app screen .

For each component, it is possible to pass the data from app or to the app. This way component can generate response based on the input received from the app screen.

For my use case I have to create the reusable function only. So I am adding custom property-

Currently some behavioral properties of the components are in Experimental mode.

I need to enable the output property of type Function, Event, Action. To enable these properties, go to Settings -> Upcoming features -> Experimental and turn on “Enhanced component properties” .

It will start showing the new options in create Custom Property window-

I am setting the property as output, type as function with two parameters for formula of discount % –

1. Original Value – type Number
2. Offered Value – type Number

Once Custom Property with Name “Discount” is created, its time to set the formula on property-

1. Click Discount on Custom properties section
2. Change event to Discount
3. Set formula when event/function is Discount

My Function is ready. I am saving and publishing it.

My custom component library is ready to use. I am going to use it in my app for electronic product selling app-

First I have to import the component library in my app. I am adding the component by clicking on “+Insert” -> Get more Components.

It will show all the components available in the Dataverse environment. If component is not visible in import window, try to refresh the list. Still not visible, make sure component is available in environment and published.

Once the component is imported, it will start showing in insert control list. Now I am selecting my “SimpleDiscountCalculator” component to add it on form.

Component is added on form now. I am adding the label “discountLabel” on screen to show discount calculated. I already have 2 controls which shows the product’s actual price “MRP” and second to enter the “sellingValue” which will be populated by retailer and non-editable to customer.

“OnChange” event of “sellingValue” control, I am using variable to set the value that is calculated using custom component and same variable to display on “disocuntLabel” control.

You can see, I have used SimpleDiscountCalculator_1.Discount() as the function.

Function is working as expected-

That’s it .. I can use the same component in my another app requested by vendor/retailer.

If vendor want to change the discount calculation, I can simply enhance logic in component and update references for this component on apps.

Below are property type which are in experimental mode. Details are available on Microsoft Documentation.

Hope this will help…
Enjoy MS CRM!!!

Follow on Facebook- FB: MSCRM16Tech