matematuk/pcf-universal-gantt-chart

Interactive PCF Gantt Chart Control for Dynamics Grid

pcf-universal-gantt-chart

Interactive PCF Gantt Chart Control for Dynamics Grid and Canvas App

Instruction

The solution is here in assets

Quick guide for model driven app is here

Guide with details for canvas app is here

Configuration

Parameter Name	Description
Title*	Specifies name on bar and list table.
Start Time*	Specifies start time display.
End Time*	Specifies end time display.
Progress	Specifies progress display.
Parent Record	Specifies record dependency
Task Type(Option)	Specifies record type. Task, milestone, project. You are able to configure option-text mapping in Task Type Mapping parameter.
Display Color(Option)	Specifies colors by option set value color.
Display Color(Text)	Specifies colors by hex color value.
Display Mode*	Enables or disables drag and drop feature.
IsSubgrid*	Specifies gantt as subgrid control.
Default Duration View*	Specifies default duration display.
Task Type Mapping	Defines task type to option value
Display Date Format*	Specifies date and time display format.
Time Step*	Specifies allowed step for move events. Sets in milliseconds.
Font Size*	Specifies font size.
Header Height*	Specifies header height.
Row Height*	Specifies row height.
List`s Cell Width*	Specifies task list width. You may set 0 value for list hiding.
Column Width for Quarter of Day*	Specifies period width for Quarter of Day.
Column Width for Column Width for Half of Day*	Specifies period width for Column Width for Half of Day.
Column Width for Column Width for Day*	Specifies period width for Column Width for Day.
Column Width for Column Width for Week*	Specifies period width for Column Width for Week.
Column Width for Column Width for Month*	Specifies period width for Column Width for Month.
Custom Display Name	Overrides display name.
Custom Start Name	Overrides start time name.
Custom End Name	Overrides end time name.
Custom Progress Name	Overrides progress name.
Custom Progress Color	Specifies the taskbar progress fill color.
Custom Progress Selected Color	Specifies the taskbar progress fill color on select.
Custom Background Color	Specifies the taskbar background fill color.
Custom Background Selected Color	Specifies the taskbar background fill color on select.

*Required

Coloring

You are able to setup record coloring on base color or custom colors. The base color gets from option set, text value or entity color. You can create base color for record palette here.

Gantt takes from palette color #2 for background, #3 for selected background, #4 for progress color, #5 for selected progress color

Custom colors might be configured for overriding if you don't like color generation.

Additional information

If you need your language you may contact with me or open an issue, where you may share your translations.

License GPLv3

Special thanks to Aleksandra Daskevica

Based on

pcf-universal-gantt-chart's Issues

Rows 250 plus

This is an awesome PCF controller. I wonder how you would go forward to adapt it to handle more rows ie 2000+
ajax call to pull more lines in when it scrolls near to the bottom maybe ? or a load next button, which loads n amount ?

I havent looked into the code. but is this something the controller could be capable of. and if so what would you approach be ?

Horizontal scroll not working without scrollbar when rows take 100% height

Hi @MaTeMaTuK,

I have found an issue with the horizontal scroll when there are too many rows (or when row's height make the component trigger the vertical scroll) in the Gantt chart.

In short, in this particular case, our Mac users, or Windows users that has a mouse with the horizontal scroller (ex. Logitech MX Master series), can't scroll the Gantt horizontaly; Mac user's can't see the bottom horizontal scrollbar, Windows users can see and user the scrollbar.

I guess this is caused by the double scrollbar (horizontal and vertical) but it's very annoying; I know that setting 100% height in PCF is very painful 😄

Is it possible to have it fixed?

Great PCF BTW 😃

Best regards,
Andrea

Can't save properties - COLOR CODE ?

I'm configuring the PCF component - but get an error about the color code.

I've only set the "required" fields - but it won't save. All other fields are blank/default.

I've tried to add a color code for the background color, etc - but this doesn't work either. (#FF0000)

What else can I try ??

Roadmap

Hi,

I had a few questions after trying out the control:

1. Is there a way to visually differentiate between the different task types (based on colour, shape eg.)?
2. Besides the arrow that is drawn on the chart, is there any other functionality behind the parent-child relation? More specifically we're looking for a relative start/end date like in the live React demo.
3. Is there some type of 'roadmap' of features that are to be added/coming over from the React solution? :)

Kind regards,
Dries

Cannot Change Row Height

There should be an easy way to change the default row height

Custom Fetch for Subgrid

Hi @MaTeMaTuK
We are solving following case now:
We dynamically change Fetch for subgrid data using custom filtering.

var gridContext = formContext.getControl("GanttProjSubgrid");
gridContext.setFilterXml(fetchXML);
gridContext.refresh();

In this situation component doesn't render Gantt.
Is there a way to use custom Fetch for Subgrid Gantt?

Drag and drop not working for Date Only columns

I have added the PCF to a main grid, where I have allowed editing, so users can easily change the dates - which is a really great feature.

However, I am running into this error when I am using a Date field with 'Date Only' settings:

There seems to be an issue, where I cannot convert the dates.

Error identified in Payload provided by the user for Entity :'', For more information on this error please follow this help link https://go.microsoft.com/fwlink/?linkid=2195293 ----> InnerException : Microsoft.OData.ODataException: Cannot convert the literal '2023-09-13T00:00:00.000Z' to the expected type 'Edm.Date'. ---> System.FormatException: String '2023-09-13T00:00:00.000Z' was not recognized as a valid Edm.Date. at Microsoft.OData.PlatformHelper.ConvertStringToDate(String text) at Microsoft.OData.ODataPayloadValueConverter.ConvertStringValue(String stringValue, Type targetType) at Microsoft.OData.ODataPayloadValueConverter.ConvertFromPayloadValue(Object value, IEdmTypeReference edmTypeReference) --- End of inner exception stack trace --- at Microsoft.OData.ODataPayloadValueConverter.ConvertFromPayloadValue(Object value, IEdmTypeReference edmTypeReference) at Microsoft.Crm.Extensibility.ODataV4.CrmPrimitivePayloadValueConverter.ConvertFromPayloadValue(Object value, IEdmTypeReference edmTypeReference) at Microsoft.OData.JsonLight.ODataJsonLightReaderUtils.ConvertValue(Object value, IEdmPrimitiveTypeReference primitiveTypeReference, ODataMessageReaderSettings messageReaderSettings, Boolean validateNullValue, String propertyName, ODataPayloadValueConverter converter) at Microsoft.OData.JsonLight.ODataJsonLightPropertyAndValueDeserializer.ReadPrimitiveValue(Boolean insideJsonObjectValue, IEdmPrimitiveTypeReference expectedValueTypeReference, Boolean validateNullValue, String propertyName) at Microsoft.OData.JsonLight.ODataJsonLightPropertyAndValueDeserializer.ReadNonEntityValueImplementation(String payloadTypeName, IEdmTypeReference expectedTypeReference, PropertyAndAnnotationCollector propertyAndAnnotationCollector, CollectionWithoutExpectedTypeValidator collectionValidator, Boolean validateNullValue, Boolean isTopLevelPropertyValue, Boolean insideResourceValue, String propertyName, Nullable1 isDynamicProperty) at Microsoft.OData.JsonLight.ODataJsonLightResourceDeserializer.ReadEntryDataProperty(IODataJsonLightReaderResourceState resourceState, IEdmProperty edmProperty, String propertyTypeName) at Microsoft.OData.JsonLight.ODataJsonLightResourceDeserializer.ReadPropertyWithValue(IODataJsonLightReaderResourceState resourceState, String propertyName, Boolean isDeltaResourceSet) at Microsoft.OData.JsonLight.ODataJsonLightResourceDeserializer.<>c__DisplayClass9_0.b__0(PropertyParsingResult propertyParsingResult, String propertyName) at Microsoft.OData.JsonLight.ODataJsonLightDeserializer.ProcessProperty(PropertyAndAnnotationCollector propertyAndAnnotationCollector, Func2 readPropertyAnnotationValue, Action2 handleProperty) at Microsoft.OData.JsonLight.ODataJsonLightResourceDeserializer.ReadResourceContent(IODataJsonLightReaderResourceState resourceState) at Microsoft.OData.JsonLight.ODataJsonLightReader.StartReadingResource() at Microsoft.OData.JsonLight.ODataJsonLightReader.ReadResourceSetItemStart(PropertyAndAnnotationCollector propertyAndAnnotationCollector, SelectedPropertiesNode selectedProperties) at Microsoft.OData.JsonLight.ODataJsonLightReader.ReadAtStartImplementationSynchronously(PropertyAndAnnotationCollector propertyAndAnnotationCollector) at Microsoft.OData.ODataReaderCore.ReadImplementation() at Microsoft.OData.ODataReaderCore.InterceptException[T](Func1 action) at System.Web.OData.Formatter.Deserialization.ODataReaderExtensions.ReadResourceOrResourceSet(ODataReader reader) at System.Web.OData.Formatter.Deserialization.ODataResourceDeserializer.Read(ODataMessageReader messageReader, Type type, ODataDeserializerContext readContext) at System.Web.OData.Formatter.ODataMediaTypeFormatter.ReadFromStream(Type type, Stream readStream, HttpContent content, IFormatterLogger formatterLogger).

Has anyone else experienced this - and is there perhaps a workaround? Or does this feature online work for Date/time columns?

I am using the configuration for the grid:

How to localize month names?

Hi @MaTeMaTuK,

I really like your PCF component.
I have only one question.
How can I localize month names in this component?
I was successfully localized labels like Start, End, Half day, etc. using RESX, but I didn't find any place for month names localization.

Thank you for your hard work and I appreciate your help.

Radu.

Use with "Date Only" Columns instead of "Date and Time"

Great control, thanks! I was wondering is there a way to adapt it to make use of "Date Only" columns? I tried to find a way to use Calculated Fields to create a "Date and Time" column from my "Date Only" column but was not successful. Thanks,
Daniel

Enhancement Idea: Display Mode: Quarter or Year

Thanks for this component and great work! I would love to see a view mode for longer term projects, that might more easily display 12-36 months at a time.

This could include

• Abbreviated Month view (current full month names limits minimum month column width around 75 px)
• Quarter, half year, or year view

Italian language

can you please add italian language?
i prepared the string resx
UniversalGanttChartComponent.1040.zip

thanks in advance

getting error when loading page

Error Code: runtimeCanvasAppError
Session Id: 361434c8-a2cb-44e9-9625-718eaa368596
Activity Id: 2f639541-3d1a-4164-ac3f-06aa1cea49ed
Timestamp: Fri Mar 15 2024 15:01:55 GMT-0600 (Mountain Daylight Time)
Error loading script
UciError: Error loading script at s (https://org258111ba.crm.microsoftdynamics.us/uclient/scripts/app.js?v=1.4.8204-2402.4:33:941278) at https://org258111ba.crm.microsoftdynamics.us/uclient/scripts/custompage.js?v=1.4.8204-2402.4:4:24662

I do not know how to fix this

Subgrid not displayed correctly

Hello, first of all nice work, well done and thanks for sharing. I noticed that the gantt is not displayed correctly in a subgrid, even if i set 20 rows in the subgrid formatting options. I attach a video.
Paolo
https://www.loom.com/share/60809dc8390d4fe696acfa2b150bcf1c

Vertical scroll

The gantt works well for a certain no of entries. After that due to the absence of a vertical scroll the chart is cut-off

Vertical scrolling not working

I've attempted this as subgrid yes and subgrid no but am not getting the full list in my view

Should have 7 rows as shown in the subgrid below

I am using version 1.5
Is there a fix that has been released for this or workaround?

Dependency and Event Controls

Hello!
I noticed the original gantt-task-react allows to view dependencies (connection arrows) and event controls. Do you have plans to add these to this pcf control? if not, is there a way to use the original version in model driven apps?

Different colors ?

I am very interested in your gantt component.
Is it possible to have the background color associated to a field of the entity ? Currently it seems that it is only a static value ?
Thank you.

Additional Columns and Filtering Capability

Amazing PCF. Thank you so much for building it and sharing!

Is there a way to show additional columns besides Name/Start/End Dates? And use these field to filter rows?

Installation correct but not working

Hi everyone, i have just installed the solution on my component but it is not working. I continue watching my proyects as a list, not in a Gant diagram. Any idea?

Translation to Spanish

Could you add the Spanish translation ???

The component is great!

Thanks in advance

Flavia

Predecessor link

Display a line between the related tasks.
The idea is to show a relationship between tasks like MS Project does.

Control does not work well in form section

When i add this custom control on the form, the view doesn't work well, it doesn't expand properly.
I try to change the properties of the form but it doesn't work.

example:

Thanks for the custom control!!

Improvement proposal

Hi @MaTeMaTuK,

Here are different improvements which could help into my use case :

• the display name can be long and is cut.
  
  A simple solution could be to have a parameter that is used to set the number of columns shown after the last date. A complex solution would calculate this based on the police, the number of characters...

• I have elements with no end date. I could imagine a display like that :
  
  or an arrow ?

• the tooltip is very useful. It could show a text field (new parameter) of the entity before subject and dates.

• Permit resizable columns

• Permit a different icon, especially when enddate = startdate (milestone)

Thank you !

Control not showing up

Hi, we are trying to add this control to our model driven app, but we can't get it to show.
It is set up as follows:

But on the tasks page, nothing shows (while tasks have been created and show up on the grid view), we did notice some errors on the console though:

Did we miss a setup step?

Enhancement: add the "Create new task" button on the bar

Hi,
It would be very useful, especcially for the subgrid, to have the possibility to create new tasks. The "+" button should open the quick create if available. Eventually also the selection of tasks would be useful and the corresponding "Delete" button on the bar.
thanks
Paolo

Can't import to canvas app / custom page

When I try to import the component into my canvas app, I get the message that it can't be imported.
Any help is appreciated. I imported the 1.5 version into a new environment. It is published and added to my solution. Additionally, I turned on the custom components feature in my environment.

Universal Gantt Chart - Configure Property Issue

Hi,
I'm trying to set up the component and I'm unable to select to 'Bind to a value on a field'. If I choose to bind to a static value it is giving me an invalid date error. Would you be able to assist? Thanks!

Idea for enhancement - Grouping

Hi @MaTeMaTuK - this is a great solution. I thinking of using to display a roadmap and have a suggestion to allow an optional grouping column that can group the rows.

Queries related to Gantt chart

Hi,
Hope you are doing well.
I have added this PCF control in Dynamics CRM and have few questions. Below are the questions:

1. As we have different options such as 'Quarter of the day', 'half of the day', can we remove whatever we do not want and include Year as another option in Gantt chart?
2. Does this control work on editable subgrid?
3. Is it possible that top header can be freezed, because if there are many rows in Gantt chart, user may not know the header?
4. Is it possible if user clicks on the date column, it can navigate the gant bar in that same row?
5. Is it possible that different columns have different width or size?

Request you to let me know the above queries. Thank you in advance.

Solution needs an update to the latest format expected by Canvas Power Apps @ Oct '23

The published solution seems to be the wrong format for the current Canvas Power Apps as at 13 Oct 2023.
Is there any chance a suitably knowledgeable person could update the solution file??

Idea: grouping the records

Hi @MaTeMaTuK,

thank you very much for the high-performance and stylish pcf.
Grouping the records e.g. per owner would be great.

Best
Paul

RTL support (Languages written from right to left)

Hello,

Some short questions

1. We noticed that there is no support for RTL (the Gantt is displayed from end to beginning as well as the 'Progress Bar')
2. We could not figure out how we could translate some of the fields
3. Is there a way to hide the time from the view? Because we only deal with whole days

*RTL = Languages written from right to left (Hebrew, Arabic, etc.)

Thank you so much for this amazing thing

solution.zip is missing

Hi, thanks for your works.
I cannot use your work because the solution.zip file is missing.
Where is it ?

A few issues

Playing around with your control, I ran into a few issues.

The task background color is not the color I put in the optionset value, but rather a highly muted version of it. It seems the code is applying a filter to it. Is there a way to have it display in the full color? It looks washed out.

I am also not seeing how to activate the Show Task list option.

Thanks, it's great work!

Enahncement request Show/hide based on toggle within Gantt

Can we add the functionality to enable show/hide Gantt within the control based on the toggle button?