Tag: PCF

Image Resizer PCF

Save Your Cloud Storage Space

Wanna save some cloud storage space? here is a PCF to Help you. Nowadays, even a budget smartphone’s camera will also capture images with 3-5 MB size. Imagine a Dynamics 365 environment with 50 users and each user saving 10 images per day.

Though we can save these images to Azure Blob or SharePoint or even purchase additional storage, in most cases these images do not need a high definition quality. The Image Resizer PCF is my attempt to resize images on the fly. This control allows you to upload multiple images to Dynamics 365 notes or email and the PCF resizes the image files before saving to dynamics 365. Watch below video to view the PCF in action.

How to configure

Download the managed or unmanaged solution file from Git and import to your environment.
Insert a section with a single column on the form.
Add a field you would like to use that will not be used on the form.
Uncheck ‘Display label on the form’ for the field.
Add image resizer PCF control to your field.

Give parameter values
- Image Height: Height of the resized image.
- Image Width: Width of the resized image.
- Image Quality Percentage: Resizing quality.

Save and publish your changes.

Technical Details

The PCF uses React Image File Resizer to resize the images and React Drop Zone for the file upload control. For quick development, I have reused Rama Rao’s Attachment Uploader for file upload logic. There are many improvement options like image preview, on screen resizing etc. You are always welcome to branch git repo here.

PCF Manifest: Property-set VS Property Elements

I receive many queries from beginners, regarding property-set element in PCF manifest file. Watch episode six of “PCF Tutorial for Beginners” to learn more about data-set, property-set, and property elements.

PCF Manifest file for datasets

Aggregate Grid PCF

When you have to see the Sum, Count, AVG of numeric columns in a subgrid, what is the easiest way? Export to Excel right? Now, there is an easier way: Aggregate Grid PCF Control. View Aggregates directly from Subgrid. This PCF control will list all numeric and currency columns in the view at the footer area, you just have to select the required column. This is not a production-ready control(I wanted to give life to an idea that came in during COVID19 lockdown) you can get the source code and unmanaged solution from here.

CSS & Grid design is from hovering list By Danish Naglekar.

Let’s Learn PCF Together

After adding Aggregate Grid Control to PCF gallery, I received many LinkedIn messages saying they love to build PCFs but they cannot as they are not pro UI developers. Trust me, I am not a pro UI developer just know the basics only :(, with the help of Awsome Microsoftcommunity, I managed to build a couple of PCF controls and for the last 6 months, every month am adding a new control to the PCF gallery. So now I have started a short video series of PCF control tutorial for beginners. these are 5 mins videos released once in every 3 days covering only one point per video. Hope this will be helpful for beginners. This is my first YouTube video series so am sure there is a huge scope for improvement 😅

Toggle Next PCF Control

Community plays an important role in everyday work life, at-least fifty percentage of my D365 and power-platform knowledge is gained from community(Blogs, Videos, Forums Etc..), that is why I love being part of awesome MS community.

Recently one of my clients said he doesn’t want to use the next button in the business process flow but something similar in the form is required. I do not agree such requests but since they are not really using the business process flow, the request looked relevant. I had to show him a POC on the same day itself. This is were the community comes to help. I logged in to PCF Gallery and searched for something similar, within few seconds found this PCF mask with Fabric-UI Icons for two-option field by David Rivard.

Boom!! Cloned the git repo and POC is ready in an hour.

Added a client side script to change tab when the field value is toggled.

This is not a production ready control, its just a copy I made from a cloned Git repo.

You can get the source code from https://github.com/nijos/ToggleNext.

Hope this helps. Happy Power Building.

Smart Grid PCF

One of my customer complained during a UAT session that, it’s too difficult for her to add new record using + button in a sub-grid, as it takes her to a new record window and she has to perform too many navigation. She was happy, when I enabled the quick create forms.

But, I was not happy and I wondered why OOB editable grid is not supporting this. I thought to give it a try using PCF controls, and this is the result.

Initially, it was not easy as we need to query the metadata to get field type for each column in the view. Following are the steps to configure smartgrid.

Get the solution from here
Import solution
Add control to sub-grid
Give required parameters.

Primary Lookup: Logical name of the lookup field for the relationship. for example contact sub-grid in the account is “*parentcustomerid_account”.
Primary Entity Set: Entity set name of the current entity where the sub-grid is added

This is to set the related lookup using Web API, you can use Rest Builder to get these parameter values correctly, for example if contact sub-grid in account form is using parent customer relationship, to set the account lookup in contact following code is used var entity = {}; entity[“parentcustomerid_account@odata.bind“] = “/accounts(xxxxx-xxxx-xxxx)”;

Known bugs.

Does not support N:N
Validation for empty rows.
Does not support composite fields(customer lookup).
Poor CSS 🙂

Planned enhancements

Inline editing.
Validation for mandatory fields

This is not a perfect replacement for Quick create form, but you are always welcome to enhance and add features to Smart Grid Github Repo here.

Activity Summary Pro

So busy with year ending and 2020 plans. AsvI promised “The pro version will be released in two months”, I have to release the pro version today. Really sorry for the poor CSS, am actually bad at styling stuffs 😦 . But you can always improve the style and features in the Github, any updates are appreciated. Here is the github repo link.

New features added.

Click on Activity Name to Expand the list.

View activities as a chart

Get the unmanaged solution file Here
Import the solution to your organization.
Create a view with the required filters. If you do not require the control to consider certain activity types, you can exclude them in your view filter. The control will consider only the records returned by the view selected.
Add sub-grid to the form with the created view.
Add Activity Summary control to the sub-grid.

Note: If you need to exclude certain activity types, apply the same logic in the view filter.

Special mentions

Hari Narayanan Kumar for his Activity Analyzer which helped me to include the chart easily.

Andrew Butenko for his quick repleys and answers in the power users community 🙂

Happy New Year, let this be the year of Power Users

Activity Summary PCF for Model Driven Apps

It’s been a while since PCF controls were released for general availability. I was busy with my project schedules and finally, I managed to try out one. The Activity Summary grid. We can have activity timelines or sub-grids to view the activities under a record but these do not provide a high-level glance on activities. So I created one PCF to show activity summary, count of each type of activity under a record. This comes with Zero configuration. Whattt?? Yes, Zero configuration.

Follow the steps below to set yours.

Download the managed solution from here.
Import the solution to your organization.
Create a view with the required filters. If you do not require the control to consider certain activity types, you can exclude them in your view filter. The control will consider only the records returned by the view selected.
Add sub-grid to the form with the view we created.
Add Activity Summary control to the sub-grid.