In this blog, we have explained how to send these cards to the Microsoft Teams channel using Power Automate Flow. We have taken an example where we automate the process of sending an employee information Card when a custom entity employee record gets created.

Microsoft introduced new connector in the power automate flow named as Cards for Power Apps.

This connector is used to create or get card instances with the input variables, and it will return the dynamic content of the card instance.

• Create card instance (preview): This will help us to create a card instance of a specific card that we have created in our solution. We can also send input parameter values through this card instance. This card instance will return the dynamic content of the card.
• Get the card description (preview): This will help us get information about the card like ID, name, description, author, etc.

You can follow the below steps to create Power Automate Flow to send cards to the Microsoft Teams channel.

Step 1: Sign in to PowerAutomate using your credentials and select your environment.

Step 2: Click on My Flows >> New Flow >> Automated Cloud Flow.

Step 3: Give the name and choose the flow’s trigger.

Step 4: Set the trigger. In the example screenshot below, the trigger is when a new custom employee record is created.

Step 5: In new step, search for Cards for Power Apps, then click on Expand button.

Step 6: Select Cards for Power Apps.

Step 7:  Select Create Card Instance (preview).

Step 8: Select the card that you want to send. Set the body input variable. In this example, we set the Account Name value of the newly created account record.

Step 9: In the next step, search for Microsoft Teams connector and select the action as Post Card as a chat or channel.

Step 10: Set the Power Apps (Preview) in Post as field, and set Channel in Post in field. You can select your team and channel from the dropdown. After that, set the card instance that we created in the earlier step.

After this power automation flow gets created, it will be triggered when the new employee record gets created, and the card will be sent to the Microsoft Teams channel as shown in the below screenshot.

Conclusion

Thus, in the above blog, we learned how to send Cards to Microsoft Teams channel by using Power Automate Flow.

The post Automatically sending Power Apps cards to Microsoft Teams channels using Power Automate Flow first appeared on Microsoft Dynamics 365 CRM Tips and Tricks.

Go to Source and hit them a thumps up

The post Automatically sending Power Apps cards to Microsoft Teams channels using Power Automate Flow appeared first on Microsoft Dynamics 365 Blog.

In our previous blog, we saw how users can edit records within the grid and do infinite scrolling until they find the records they are interested in. Also, they can configure editing, filtering, and navigation properties while adding control.

This blog will show some new properties of Power Apps Grid control while configuring it. Using these properties, it is possible to customize the visual appearance of columns based on specific requirements.

If a salesperson wants to sort data according to primary field initials and by visualizing the records wants to copy and paste it into other applications like excel, word, etc., using a customizer control, the developer (by using a script) can color code the columns’ values and visualize it on grid control.

Follow the same steps as mentioned in the previous blog to add Power Apps Grid Control.

1. Allow Range Selection: This property is by default set to yes. You can select a set of records or a subset of the grid to copy data to other applications using this property.

You can paste data to other applications like excel.

2. Enable jump bar: This property is by default set to No. An alphabetical list can be displayed at the bottom of the views or subgrid using this property.

Below is the screenshot of the jump bar enabled.

3. Enable Pagination: This property is by default set to No. Data can be browsed using modern scrolling (infinite scrolling) and paging buttons by setting this property. You have to set this property as Yes to disable infinite scrolling.

4. Enable Status column: This property is by default set to To hide the Status column( Record selection checkbox) you have to set this property as No.

4. Show data type icons: This property is by default set to No. By setting this property to Yes Data type icons will be displayed in the column header. On hover of the icon, the datatype name will be displayed.

5. Customizer Control: In the customizer control property, several columns in a grid can have their visuals or interactions changed by linking to a single customizer PCF control.

6. Enable option set color: This property is by default set as No. When the Enable OptionSet color property is enabled, the background color of each value in the choice column will be shown with its corresponding value. If you are enabling this property for a table, be sure to check the color configuration for each choice column to ensure that the content is accessible and easy to read.

Below is the screenshot after the option set color is enabled.

Conclusion

Using this property users can customize its Power Apps Grid control, which will eventually replace all read-only and editable grids in model-driven apps.

Go to Source and hit them a thumps up

The post Editable Grid feature properties of Power Apps Grid control appeared first on Microsoft Dynamics 365 Blog.

As the name suggests, Advisors let you configure experts in your organizations so that the users can contact them if they are stuck anywhere. As of now, there is no known limitation on the number of advisors that you can configure. Since this feature is still in the preview stage, it is not recommended to use it in production.

To configure the Advisors, we have to add the following –

• Internal Resource Links
• Advisors

To configure the Power Apps assets (Internal Resource Links & Advisors), follow the below steps –

1. Log in to the Power Platform using the admin account.

2. Expand the Resources tab on the left-hand side and click on Power Apps assets.

3. A window will open where we can insert Internal Resources Links. Here, we can configure 3 types of links –

a. Documentation –

If you’ve any internal documentation maintained which is hosted on a central location, you can insert the URL of the same.

b. Teams Group –

If you have an internal Microsoft Teams group, you can provide the URL of the same.

c. Yammer Community –

If you have a Yammer Community for your organization, you can provide the URL of the same.

After the available links are provided, click on the Save button.

4. Now, click on the Advisors tab. Here we can configure all the available advisors in your organizations. You can select from all the users that are present in your organization.

5. Click on Add an advisor.

6. Select the desired user and click on Add.

7. Once all the advisors are added, they will look like the one below. In the status column, they will be shown as available or unavailable.

8. The status will remain unavailable until the advisor logs in to his/her account and opts into the advisor program.

9. Once the user is added as an advisor, he/she has to follow the below steps to be shown as an advisor –

a. Log in to the Power Apps Portal.

b. They will be asked if they want to opt-in to the organization’s Power Apps advisor program.

c. Click on Yes, I’ll help. Another pop-up will be opened with which they can configure if they want to opt-in and if yes, should be emailed or contacted using teams. Select the appropriate option & click on Save.

d. Once they set their availability to Available, their status will be changed to Available from Unavailable.

10. Now whenever the Virtual Agent is unable to answer a user’s query, the internal resources link & Advisors will be shown as shown in the below GIF.

Conclusion

This is how we can configure the Power Apps assets and bring in the help of actual people along with the virtual agent, thereby easing out on workload.

Go to Source and hit them a thumps up

The post How to configure Power Apps assets within Power Apps appeared first on Microsoft Dynamics 365 Blog.

Let’s have a look at the issue first. As seen in the below screenshot, I have added our PCF control on the First Name field. Kindly refer to this blog to have a look at it as well. Here you can see that the contact does have a first name, but isn’t being rendered in our control.

This happens, because as per my observation the PCF controls end up loading first before the full form is loaded which causes an issue while loading the default values. So to overcome this, I will use a property that is passed through context known as isPropertyLoading.

As per my observation, isPropertyLoading will return true until the form is completely loaded and the context can get actual field values instead of null.

So I will add a conditional rendering based on the isPropertyLoading property. Where I will render our component only when isPropertyLoading is false. Below is how I will implement this –

/** * It is called when some value in the property bag has been changed. This includes field values, data sets, global values such as the container height and width, offline status, and control metadata values such as label, visible, and more. * @param context The entire property bag is available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions * @returns ReactElement root react element for the control */ public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement { //@ts-ignore let isPropertyLoading:boolean = context.parameters.textField.isPropertyLoading; if(!isPropertyLoading){ const props: IStringChekerProps = { defaultValue: context.parameters.textField.raw!, onInputChanged: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string | undefined) => { this.currentFieldValue = newValue!; this.isValidString = this.validateStringField(this.currentFieldValue); this.notifyOutputChanged(); } } return React.createElement( StringCheker, props ); } else { return React.createElement("div"); } }

What I’ve done is we are returning the empty element by return React.createElement(“div”); when isPropertyLoading is true and return the actual component only when the isPropertyLoading is false. After this change, the control will load normally like the below –

Conclusion – This is how we can use isPropertyLoading to prevent displaying empty PCF values even though data exists.

Go to Source and hit them a thumps up

The post Use of isPropertyLoading property in PCF Control appeared first on Microsoft Dynamics 365 Blog.

In the previous blog, we have explained the Formatting API of PCF Control where we used the Formatting API to format the input values.

Earlier, we used different Formatting API methods to format the number and date values. In this blog, we will introduce a new Formatting API method (formatUserInput) that formats the given input values in different user input formats.

In the below example, we have set the user settings as Number with 2 precision:

Given below are the two (Decimal Number) examples, where in the first example, the input value format to the user format is defined in user settings of Dynamics 365 CRM. And in the second example, the input value format to the user input format is passed as a input parameter to Formatting API method (formatUserInput).

//Function that return result in user decimal format from input value formatToDecimal(context: ComponentFramework.Context<IInputs>, inputValue:any) { return context.formatting.formatDecimal(inputValue); } //Function that return result in decimal format that passed in user input type formatToInputType(context: ComponentFramework.Context<IInputs>, inputValue:any): any { let userInputType = { Type: "decimal", Precision: 4, PrecisionSource: 0, Behavior: null, OptionSet: null, Format: null }; return context.formatting.formatUserInput(inputValue, userInputType); }

In the below screenshot, you will find here that we have run the debugger to see the result of the format of input values:

Conclusion

With the help of Formatting API of Power Apps, we can easily format the input values to different user input format.

Go to Source and hit them a thumps up

The post Format input values into different user input formats using Formatting API in PCF Control appeared first on Microsoft Dynamics 365 Blog.

In our recent project, we created a PCF Control in which we designed a date-time control. In the same control, we had a requirement to format the input date value to the given Date/Time field behavior in the date/time field of Dynamics 365 CRM. In Dynamics 365 CRM, date/time field have three types of behavior such as User Local, Date Only, Time-Zone Independent as shown in the below screenshot:

To achieve this, we have used the formatTime method of formatting API in Power Apps. With this method, you can format the date/time values in dateTime field behavior.

Please find below the code to format the input date/time values in PCF Control:

//Function that return result in datetime format from input date value formatToTime (context: ComponentFramework.Context<IInputs>, inputDateValue:any) { return context.formatting.formatTime(inputDateValue, 0); } //Function that return result in datetime format from input date value formatToTime (context: ComponentFramework.Context<IInputs>, inputDateValue:any){ return context.formatting.formatTime(inputDateValue, 1); }

After running the debugger, the result of formatting input date/time values to dateTime format will be as below:

Conclusion

With the help of Formatting API in Power Apps, we can easily format the input date values to the dateTime behavior format.

Go to Source and hit them a thumps up

The post Format date-time value using Formatting API in PCF Control appeared first on Microsoft Dynamics 365 Blog.

If you build PCF components then you must be aware that to create a standard control we render it on the container, which is provided in the PowerApps Component Framework.

Microsoft has introduced a new type of control named Virtual Control. As the name suggests, this control creates and renders on the Virtual DOM.

Virtual Components is where we can use the Virtual DOM and reuse the libraries i.e. Fluent UI and React from the PowerApps host. The primary advantage of the virtual component is its drastic performance improvements.

How they are different from Standard Control?

There are many differences between standard and virtual control. In Manifest xml file type, in the control tag, the control-type attribute is changed from standard to virtual i.e. control-type=”virtual”.

<control namespace="Custom" constructor="VirtualField" version="0.0.1" display-name-key="Virtual" description-key="Virtual description" control-type="virtual"> 

In the resource tag, you will find React and Fluent UI dependency as well.

<resources> <code path="index.ts" order="1"/> <platform-library name="React" version="16.8.6" /> <platform-library name="Fluent" version="8.29.0" /> </resources> 

In standard control, if there were many components, they would be bundled in its own React and Fluent UI for each component. This increases the footprints in your bundle.js, which increases the size of the same.

However, in virtual control, components are added to the parent virtual DOM which has the dependency on React and Fluent UI. This will decrease the size of your bundle.js drastically. But, this also means that we need to make sure the correct version of Fluent UI and React is there to be used in the PCF components. In a future release, we might see the option to change the version of Fluent UI and React.

We compared the size of virtual and standard control as shown in the images below.

Note: They were the same control i.e. same code and components were added to them.

Virtual Control –

Standard Control –

As we can see clearly, the difference between the sizes of the bundle.js file is quite prominent. As said earlier, this will affect the performance and you will notice it when you will use it in your CRM.

Previously, in the index.ts file of standard control, the class was implementing StandardControl.

export class LinearInputontrol implements ComponentFramework.StandardControl<IInputs, IOutputs> {

constructor(){}

However, in virtual control, it will implement ReactControl, as we will be returning the react element.

export class LinearInputontrol implements ComponentFramework.ReactControl<IInputs, IOutputs>{

constructor(){}

This will also change the rendering of components from index.ts file. For standard control, we used to write our code as given below:

public updateView(context: ComponentFramework.Context<IInputs>): void { ReactDOM.render(React.createElement(App, {context}), this._container); }

Here we were creating an element and rendering it in the physical DOM i.e. this._container that we get in the init method, which is quite expensive in memory usage. Whereas in virtual control we just need to return the created element that will render on the Virtual DOM.

public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement { const props: AppProps = {context}; return React.createElement(App, props); }

How to create Virtual Control?

Now let us see how we can create virtual control. It is similar to how we create standard control. Below is the command to initialize PCF control.

Standard Control – pac pcf init -ns custom -n LinearInputControl -t field

Virtual Control – pac pcf init -ns custom -n LinearInputControl -t field -fw react -npm

Here, -fw is the alias of –framework and -npm is to run the npm install command.

As we create react elements and render them on the virtual DOM so the framework will be React.

Note: This is still in preview; we may see many more things coming up in this Virtual PCF.

After running the above command, we will see our project as shown below:

A sample component (HelloWorld) will be created by default.

The Virtual control can be used in the test harness as well.

If we dive deep into the bundle.js then we can see that the host is providing the libraries of Fluent UI and React. Hence, the other components will not need to bring their fluent UI and React with them, which results in the reduction of size of the bundle js.

Conclusion:

I would say it would increase the performance of our components exceptionally. In addition, it is still in preview so I will recommend not putting this in your production soon.

To conclude, we learned how we can create Virtual PCF components and how they are different from the standard control.

Go to Source and hit them a thumps up

The post Exclusive sneak peek at the new Virtual PCF Component appeared first on Microsoft Dynamics 365 Blog.

To configure the model in Canvas app, follow the steps given below:

• To export the model, click on the Menu icon and then click on the Export

• Now click on the configure button to configure your CRM instance.

• Give the model a name and then click on the Export button.

• After clicking on the Export button a pop-up would open asking if you want to Optimize & Export the model or simply export the model as it is. I recommend choosing Optimize & Export.

• Once the model is exported you can check the model. To check, open https://make.powerapps.com/ -> Go to AI Builder -> Models.

• Now create a Canvas app. To know more on how to create a Canvas app kindly follow this link.
• Now, we will add our model to our Canvas app. To add the model, click on the Data icon -> Expand AI models section -> If you didn’t find the model then click on the See all models text.

• Once you add the model it would be visible under Data.

• After creating the Canvas app add a Camera control to take images.

• OnSelect event of the Camera control add the below code.

        ClearCollect(modelPred, ‘Work Attire Detection’.Predict(MyCam.Photo).Prediction);

• The modelPred is a collection where the prediction would be stored and MyCam is the camera control name and the Work Attire Detection is our model name.

• Now add a Gallery control to show the model prediction result.

• Set the data source to the collection which we created i.e. modelPred.

• Set the Layout to Title only.

• Once this is done you can test the Canvas app to check whether it is working or not.

Conclusion:

In this blog, we have seen how easy it is to use the Image detection model in Canvas app. Based on the Business use case you can provide the images to the model from various places and get the prediction in Canvas app.

Go to Source and hit them a thumps up

The post Image Classification model by Microsoft Lobe in Power Apps – Part 2 appeared first on Microsoft Dynamics 365 Blog.

With the growth in technology we have seen an incline towards the technologies related to Machine Learning and Artificial Intelligence in our day-to-day life. In recent few years Microsoft has been pushing Low-Code/ No-Code ideology and have been incorporating ML and AI technologies in their PCF control, AI Builder Models, etc. Evidence of this can be seen in the recent PCF control like Business card Scanner, Document Automation models, etc.

In this blog series, we will be seeing the Image classification model by Lobe which is currently in preview.

Microsoft Lobe is a free desktop application provided by Microsoft which can be used to classify Images into labels. This model can also be used in different ways, for e.g., it can be added in Canvas Apps, Power Automate.

The overview of creating an Image Classification model is given below:

• Creating a model
• Providing sample data
• Training the model
• Evaluating and correcting the model detection
• Testing the model
• Using the model

To get started with creating an Image Classification model using Microsoft Lobe please follow the steps given below:

• Download and Install the Microsoft Lobe Desktop application from here.
• Once the download is finished, open the Microsoft Lobe Desktop application, and then click on Create Project
• Give the project an appropriate name in the top-left corner and for the sample dataset you can choose between Saved Images, Camera, and Dataset.

• In this example, we will create an attire detection model which will detect if an employee is wearing Casual or Formal attire. Here we will provide the model with some data and will label the Image based on which they would be classified.

• Once done the Lobe will train the Model. And if there are any incorrect detection then you can correct them by changing the image label to an adequate label.

• You can try out the model in real-time by clicking on the Use

Note: For high accuracy, the sample data should be high and diverse which will result in better training of the model.

Conclusion:

In this blog, we have seen how easy it is to create an Image detection model without writing a single line of code.

Go to Source and hit them a thumps up

The post Image Classification model by Microsoft Lobe in Power Apps – Part 1 appeared first on Microsoft Dynamics 365 Blog.

Recently, we came across a new method in PCF – retrieveRecordCommand. This method will help us to retrieve the related commands for specific record(s). It also gives the flexibility to retrieve only specific commands that the user wants to see.

So, let’s see a scenario in which this method would come handy. Let’s say we want to show a PCF Dataset Component in a sub grid without the OOB Command Bar, which is very much possible. But what if we also want to execute some of the OOB commands in some events. This is where the retrieveRecordCommand method would save the day.

Using this method, you can retrieve the commands and once you have access to those commands, you can even trigger them by using the execute method.

Given below are the few parameters for the retrieveRecordCommand method.

Now let’s see how we can accomplish the above scenario.

Working:

We have a sub grid of Contacts on Account, where we have configured our Detail List Fluent UI component. Above the list, we have added a Command Bar fluent UI component i.e. a bunch of icon buttons. Here, we need two commands so we will add two options (refresh and download) in our command bar. You can add as many you may like.

By clicking these buttons, we will be executing the OOB commands as per the requirement.

Given below is the UpdateView function in index.ts. In this function, we are retrieving the commands that we need to execute later. The specificCommands is a string array including the commandButtonId of two OOB commands i.e. Export to Excel and Refresh Button.

We took all the record ids from context.parameters.sampleDataSet.sortedRecordIds so that the commands retrieved must be against these records as the name of the method retrieveRecordCommand says it all. This method retrieves the commands against the records that were passed in it.

After retrieving, the commands will render the DetailListGrid component.

public updateView(context: ComponentFramework.Context<IInputs>): void { let appProps: any = {}; //retrieve these commands let specificCommands: string[] = ["Mscrm.SubGrid.contact.ExportSelectedToExcel", "Mscrm.SubGrid.contact.RefreshButton"]; try { if (!context.parameters.sampleDataSet.loading) { // columns for detail list grid let columnsOnView = context.parameters.sampleDataSet.columns; //records ids in a string array let recordIds: string[] = context.parameters.sampleDataSet.sortedRecordIds; //retrieve specific commands for all the records context.parameters.sampleDataSet.retrieveRecordCommand(recordIds, specificCommands).then((commands: any) => { //get records for detail list grid let pageRows = this.getAllPageRecords(columnsOnView, context.parameters.sampleDataSet); //data sending to DetailsListGrid component appProps = { columnsOnView, pageRows, context, commands }; //rendering DetailsListGrid component ReactDOM.render(React.createElement(DetailsListGrid, appProps), this._container); }).catch((error: any) => { console.log(error); }); } } catch (error) { console.log("updateView " + error); } } 

In DetailListGrid component, we have a CommandBar and DetailList component. Below is the render method where we have called both the components.

Here, in <CommandBar /> Fluent UI component we have items i.e. left-side command bar and farItems i.e. right-side command bar. Since we want our buttons to be appear on right side, we added the items in the farItems.

public render = () => { const farItems = this.getFarItems(); const items = this.props.pageRows; this._columns = this.mapCRMColumnsToDetailsListColmns(this._columnsOnView); return ( <Fabric> <CommandBar items={[]} farItems={farItems} ariaLabel="Use left and right arrow keys to navigate between commands" /> <MarqueeSelection selection={this._selection}> <DetailsList items={items} columns={this._columns} setKey="set" layoutMode={DetailsListLayoutMode.justified} selection={this._selection} selectionPreservedOnEmptyClick={true} ariaLabelForSelectionColumn="Toggle selection" ariaLabelForSelectAllCheckbox="Toggle selection for all items" checkButtonAriaLabel="Row checkbox" onItemInvoked={this._onItemInvoked} /> </MarqueeSelection> </Fabric> ); } 

getFarItems is the function from where we are getting our icon buttons. So, let’s check that as well. For only the icons to be visible and not the text, we set iconOnly property as true.

/** * Get Command Bar Items * @returns ICommandBarItemProps[] */ private getFarItems = (): ICommandBarItemProps[] => { let farItems: ICommandBarItemProps[] = []; try { farItems = [ { key: 'Refresh', text: 'Refresh', ariaLabel: 'Refresh', iconOnly: true, iconProps: { iconName: 'Refresh' }, onClick: () => { this.commandClick('Refresh') } }, { key: 'Download', text: 'Download', ariaLabel: 'Download', iconOnly: true, iconProps: { iconName: 'Download' }, onClick: () => { this.commandClick('Download') } } ] } catch (error) { console.log("getFarItems" + ' ' + error); } return farItems; }   Now, we have two icon buttons Refresh and Download. By clicking these buttons commandClick method will be called.   /** * check and execute the command * @param command */ private commandClick = (command: string) => { //get the commands from props let commands = this.props.commands; let specificCommand: any; try { switch (command) { //if refresh icon is clicked case 'Refresh': //find the refresh command from the commands array specificCommand = commands.find((command: any) => { return command.commandButtonId == "Mscrm.SubGrid.contact.RefreshButton" }); //execute the refresh command specificCommand.execute(); break; //if download icon is clicked case 'Download': //find the download command from the commands array specificCommand = commands.find((command: any) => { return command.commandButtonId == "Mscrm.SubGrid.contact.ExportSelectedToExcel" }); //execute the download command specificCommand.execute(); break; } } catch (error) { console.log("commandClick" + ' ' + error); } } 

We have wrote a switch case and find method to identify the command. If you want to add more commands you can add them in the commands array while retrieving this switch case.

In this function, we checked which icon button was clicked, found the command related to it, and executed the same.

After clicking on the download button, export to excel command will run and the excel file will be downloaded.

Conclusion:

Thus, we saw how we can retrieve the OOB commands and execute them in PCF Dataset Component.

Go to Source and hit them a thumps up

The post Execute Commands Programmatically in PCF Dataset Component appeared first on Microsoft Dynamics 365 Blog.