Category: PowerApps

How to – Add Style to Custom Component in PowerApps Component Framework

Kindly refer the previous post, here we will be adding style to the component created in the post.

https://nishantrana.me/2019/06/06/step-by-step-create-a-very-simple-powerapps-custom-component-to-show-the-guid-of-the-record/

Let us continue with our previous sample component and try adding style to it.

  • Open ControlManfiest.Input.xml and specify the CSS file to be referred.

  • Uncomment the CSS tag in the manifest and create a new folder named CSS and place the CSS file there.

  • Edit the index.ts file and add the class to the label

  • Edit the CSS file

  • Edit the version number in case of updating the existing control in ControlManifest.Input.xml

  • Followed by the build command
  • npm run build


  • After the successful build, we can see the CSS added in the out folder for the component


  • Run the MSBuild command to generate the new solution zip files



  • Import the managed solution.
  • Open any of the existing contact records, we can see the style is applied to the control.

Hope it helps..

Advertisements

Step by Step – Create a very simple PowerApps Custom Component to show the GUID of the record

Go through below articles to get a better understanding

Below is the quick step by step guide to get started (sort of Hello World example) 

  • Install NPM (that comes with Node.js)

https://nodejs.org/en/

http://download.microsoft.com/download/D/B/E/DBE69906-B4DA-471C-8960-092AB955C681/powerapps-cli-0.1.51.msi

  • Install Visual Studio 2017 or later or Download .NET Core 2.2 along with Visual Studio Code.
  • Create the new folder for the project, and in Developer Command Prompt for VS 2017 navigate to the folder and run the below command to create a new component project

pac pcf init

– -namespace <namespace for the component>

– -name <name of the component>

– -template <component type>


It adds the following files in the folder.


  • Next run npm install command to install the project dependencies.

  • Open the ControlManifest.Input.xml file created inside the folder created with the control’s name.

  • Here we have opened it in Visual Studio Code, for this simple example purpose let us not change the default values.
  • Open the index.ts which wherein we’d be writing code for our custom control

  • Add the following line of code to add a label control that will display that GUID of the record.

  • Run npm run build command to build the control

  • To test the control run npm start command

*Use ctrl + c è to terminate the job.

  • Create a new folder to hold the solution

  • Run the below command to define the publisher name and prefix and initialize the solution files creation

pac solution init – -publisherName [publisher name] – -customizationPrefix [publisher prefix]

  • Run the below command to add reference to our custom control in the solution

pac solution add-reference – -path [path to pcfproj file]

i.e. reference of the below path.

  • This creates the file with extension cdsproj

  • To generate Zip File run the below command in the Developer Command Prompt for Visual Studio 2017
    • MSBUILD /t:restore
    • MSBUILD

  • This adds the Solution zip in the bin Debug folder.

  • To get both managed and unmanaged solution, update the cdsproj file

  • We can see both managed and unmanaged solution created.

  • Import the solution in Dynamics 365 CE and open any of the entity’s form. Here we have created a new text field named GUID in the Contact form and have set our custom control for that field.

For reference à

  • After publishing the changes, we can see the GUID being displayed in the form.

  • To update the control, change the version for it in the ControlManifest.Input.xml

Followed by

  • npm run build
  • msbuild
  • Importing the new solution file generated

In a nutshell below are the high-level steps à

1. Install npm

2. Install PowerApps CLI

3. Install Visual Studio 2017 or later

4. Create a new folder for the project.

5. Navigate to the folder in Developer Command Prompt and run the following command to create the component project

pac pcf init –namespace <component namespace> –name <component name> –template <component type>

6. Install the project dependencies using below command

npm -install

7. Update ControlManifest.Input.xml

8. Update index.ts

9. Build the project

npm run build

10. Use the below command to test the component

npm start

11. Create a folder for holding the solution zip and related files. Navigate to that folder and run the below command.

pac solution init – -publisherName [publisher name] – -customizationPrefix [publisher prefix]

12. Add reference of the custom component in the solution

pac solution add-reference – -path [path to pcfproj file]

13. To create the Solution Zip File

MSBUILD /t:restore

MSBUILD

14. Import the solution file and use it inside Dynamics 365 CE.

 

lastly – Don’t forget to check the wonderful PCF Gallery

https://pcf.gallery/

Hope it helps..

Few improvements in new model-driven form designer WYSISYG Preview in PowerApps

Few months back I wrote about the features of the new model drive form designer in PowerApps.

https://nishantrana.me/2018/12/24/the-new-model-driven-form-designer-wysisyg-in-powerapps-for-model-driven-apps-dynamics-365-ce-preview/

There are few improvements done in it since then

For e.g.

  • Fields and Sections can now be selected and positioned.

Phone field:

Address Section:

  • Header and Footer are available now for customization.

However still there are few important features missing when compared to our classic form designer like

  • Sub Grid control are not available on the form for configuration.
  • No Business Rules or Form Properties dialog box.
  • No Enable Security Roles option
  • No field explorer or Relationship explorer so cannot create new fields or relationships.

The new model driven form designer looks promising, however we’d have to wait a bit more, before it can have all the expected (or some new) features added to it.

Hope it helps..

Implementing Multi-level approval using PowerApproval in Dynamics 365 CE

We recently had a requirement of multi-level approval in our Project. We thought of evaluating the PowerApproval add-on from Power Objects.

The add-on is powerful, feature-rich and allows us to easily configure our Approval logic and to track it as well.

Let us quickly see the steps to configure it and start using it.

Download the Solution and import it in the organization.

https://www.powerobjects.com/powerpacks/powerapproval/

After successful import, open the configuration page of the PowerApproval Solution and click Try or Subscribe, provide the required details to start using it.

The solution adds the following PowerPack area in the interface and the entities that we would be working with.

Suppose we want to enable the Approval process for Contract entity of Dynamics 365 CE, so we would open the Approval Entity Lists and create a new record as shown below using the schema name.

Save the record and click on REGISTER to enable the approval on the contract entity.

Next, we define the Approval Process by creating the record of that entity and defining it within the Approval Process Step related records.

Here we have created the Approval Process record named My Contract Approval and inside the Approval Process Steps sub-grid, we have added a new record named the First Step.

Step Number as 1 as it is the first step.

Approver type can be either user, team or the manager.

Here we have selected team for the first step.

For the second step, we have defined User – Test User as the approver.

This is how our approval process looks like

The users need to have the PowerApproval Admin
and PowerApproval User roles (part of PowerApproval solution), to design and work with the Approval process.

Next, we will customize the Contract form to add the PowerApproval web resource. (Insert a tab, and insert the web resource with 20 rows)

After publishing the changes, let us now create a contract record to see the approval process in action.

In the contract record, select the Approval Process and click on Submit for Approval. (The approval can also be triggered using workflow)

We can see the following update after submission, the field grayed out and status reflecting the current status highlighted in color.

Now let us login with the user who is the part of Test Team.

The user gets the option of Approving and Rejecting it and also to put his comments.

Let us select Approve and click on Submit. This updates the steps with appropriate status.

Now let us login with the Test User who is the final approval. As we can see the field is enabled again for this user and had grayed out for the previous step user.

Again, let us select Approve and click on Submit. The web resource refreshes automatically with the current status.

Similarly, we can have a situation where it is rejected in the first step by the approval and it being submitted again by the initiating user and then approved by the user and then in the final step of the approval again rejected. This is properly reflected in the web resource within our contract record.

When the final user rejects it in the last step, it cannot be submitted again by the user who initiated it.

Thus we saw how easy it is to configure and start using the approval solution PowerApproval in matter of few minutues.

The user guide à

https://www.powerobjects.com/guides/powerapproval

Pricing à

https://www.powerobjects.com/powerpacks/powerapproval/

The other options of implementing it could be by using the Approval Flows (although it won’t be as feature rich)

https://docs.microsoft.com/en-us/flow/modern-approvals

Hope it helps..

The new model-driven form designer (WYSISYG) in PowerApps for Model-driven apps (Dynamics 365 CE) Preview

The new model-driven form designer (Preview) has some nice features added to it like

  • Searching for fields in the form

  • Tree View showing visual hierarchy of the controls for quick view and navigation inside the form.

The icon also makes it easy to identify the data type of the field.

  • We can also check and configure how the UI would render for different type of client application

  • Property Pane for the type of control selected which allows us to quickly update the properties unlike selecting the field and then clicking on Change Properties which will open the dialog box.

Few things that we could not found are

  • Ability to select and position fields and sections.
  • Sub Grid control are not available on the form for configuration.
  • No Header.
  • Footer is available but we cannot add fields to it.
  • No Business Rules or Form Properties dialog box.
  • No Enable Security Roles option

  • No field explorer or Relationship explorer so cannot create new fields or relationships.

Get more details here

https://powerapps.microsoft.com/en-us/blog/introducing-the-new-wysiwyg-model-driven-form-designer-public-preview/

As Microsoft mentions it is just a start and they’d keep adding the remaining functionality, let us wait.

Hope it helps..

Embedding Canvas App on a Model-Driven App’s Form (Preview) – Passing list of related records as context

Similarly to passing the current record as context to the embedded canvas app, we can pass the list of related records as context.

Let us see how it works step by step.

Open the form for customization and insert\edit an existing Sub-Grid control and select Canvas App for the Add Control option.

Select the option Web for the canvas app. Here clicking on Customize will open the PowerApps studio for creating\editing the app.

Here View Name shows All Accounts the Default View selected in the Data Source section of the Display tab of the properties dialog box.

Clicking on Customize opens the PowerApps Studio as shown below. Here ModelDrivenFormIntegration is the special control which provides us the contextual data from our form.

Click on Edit, specify the layout and select from the available fields of the entity for the layout.

Go to App Settings à Advanced Settings and turn on the “Enable app embedding user experience”

Save the app in the Cloud, this will also publish the app.

This will auto-generate the App ID and auto-fill it in the Set Properties dialog box of the Sub Grid control.

Save and publish the form.

We can see our canvas app embedded in the Unified client interface as shown below in the right.

Also à

Hope it helps..

Embedding Canvas App on a Model-Driven App’s Form (Preview)

Login to Dynamics 365 CE, open any of the Entity’s form and either pick any of the existing single line of a text field or sub-grid control or add one to the form.

We will use Single Line of Text if we want to pass the current record as context and Sub-Grid if we want to pass the list of related records as context.

In this post, we will first see how to pass the current record as context.

For this let us open Lead form and select Topic field which is a single line of text for customization (Change Properties).

Select Controls tab, and click on Add Control and choose Canvas app.

Here Entity name is auto-populated by the selected Entity and although it seems editable, changing it will have no effect.

App ID is auto-generated on creation of canvas app.


Let us click on Customize to create our canvas app. This opens the PowerApps Studio.

ModelDrivenFormIntegration is the special control which provides us the contextual data from our form.

Clicking on Edit for the Fields property for the gallery1 control opens a pane that shows all the fields from our lead entity.

Let us change the Layout to Title, subtitle, and body and set Body1 to the description, Subtitle1 to Fullname and Title2 to Subject.

Now before saving and publishing the app, go to File à App Settings à Advanced Settings

Set Enable app embedding user experience as On.

Save the App to the Cloud. This also publishes the app.

Back in our form editor, we can see the App ID auto-populated

Select Web option for the Canvas App in the Controls Tab.

Click on Ok to close the form, followed by Save and Publish.

We can see the Canvas App in the form in the Unified Client Interface

Although the app doesn’t make much sense, it gives an idea on how to configure things for embedding it within form. This feature really opens up infinite possibilities.

Get all the details here

https://powerapps.microsoft.com/en-us/blog/enrich-your-model-driven-forms-with-embedded-canvas-apps-public-preview/

https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/pass-current-embedded-canvas-app

https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/embed-canvas-app-in-form

Hope it helps..

PowerApps – Quick Overview (mind map)

Hi,

I was reading this wonderful whitepaper on PowerApps by David Yack and preparing notes on that using mind map.

Sharing the same.

https://www.goconqr.com/p/16333871-powerapps-mind_maps

PowerApps

 

Hope it helps..

A simple implementation using Azure Functions, Microsoft Flow, Microsoft PowerApps, Dynamics CRM and SendGrid

Let us  implement a simple scenario where we create a lead record in CRM which then talks with Flow (and Power App).

The Flow calls an Azure Function (Custom API) that sends mail to the lead’s email address using SendGrid

1) Let us create an Azure Function that uses SendGrid to send email to the lead’s email address.

Login to Azure Portal and create a new Function App.

https://portal.azure.com

Let us create a Function using Generic Web Hook CSharp template

To keep it simple let us only enable GET method. Go to Integrate tab and in Allowed HTTP Methods Select Selected Methods and check GET.

Also set mode as Standard and Authorization Level as anonymous, which means we do not need a API Key to be passed as query parameter to talk with the function.

Now let us add a new Output

Select SendGrid as the template

Click on Save.

Here we would need to define SendGridApiKey.

Go to SendGrid portal and create a free account over there

https://sendgrid.com

Create and API Key and copy it’s value.

Now go to Application Settings of the Function App and set this key value with SendGridApiKey as the key name.

Now let us go back to our code and update it to work with lead object and Mail class which would be used for sending email using SendGrid API.

Here first we are referring the SendGrid assembly, then getting fullname and email from query string and then creating Mail object.

Save and check the log if the compilation succeeded or not.

Testing our Function.

We can see the mail in the mail box.

This completes our first part.

2) Now let us create the Swagger definition for it which we will use in Power Apps and Microsoft Flows for using this Azure Function as Custom API.

Select our function and click on API definition.

Click on Function.

Update the generated API Definition Template with query parameter details and also test it.

As it is running successfully, click on Export to Power Apps + Flow

This opens up the new section that details the steps we need to follow for using our Azure Function with Power Apps and Microsoft Flow.

There click on Download button.

Click on Go to PowerApps

It opens up the PowerApps portal (asks for log in) and opens the New Connection page.

https://web.powerapps.com

Upload the JSON Definition file for our Azure Function, provide name and description and click on Next.

Click on Create.

Let us quickly test our new connection.

Click on New App in our PowerApps web portal.

Select PowerApps Studio for Web. Let us create a Blank App Phone.

Add a new Data Source and select our Azure Function there.

To get the API Key go to our function and expand API Definition Key.

It works properly.

3) Now let us move to our last step, wherein we use it inside Microsoft Flow and integrate it with Dynamics CRM.

The good thing is to configure the same for Microsoft Flow, we do not have to do any extra step as both Microsoft Flow and PowerApps share the same connection infra.

Go to Microsoft Flow portal

https://flow.microsoft.com/

We can find our Custom API already added there.

Let us create a new flow. Start with Dynamics 365.

When a record is created. Select Organization Name and Leads as the entity and click on Add an Action.

Search for our Custom API.

Select LastName and Email as Dynamic Content from the lead record created.

Click on Create Flow to create the flow.

Unfortunately, we get the below error

Let us go back to our Swagger Definition and update it.

We have updated it as following

Let us quickly test it, import it in Power Apps as new connection and come back to our Flow.

Edit the connection there and specify the API Key as we had done earlier inside Power Apps and update it.

Open Flow and quickly add the required steps and click on Create Flow.

We have successfully created our flow. Now let us test it.

Let us create a new lead record

Our flow runs and sends the mail

That’s it we are done with our simple implementation. The main purpose of this post was to show the integration possibilities which could help us design and implement real world complex scenarios.

Hope it helps..