Merge pull request #2 from SuriyaKumar2402/master

Added new components with Improvements and documentation updates

Author: silambarasani

.gitignore

@@ -1,7 +1,5 @@
 # Ignore Node.js dependencies
 node_modules/
-package-lock.json
-yarn.lock
 
 # Ignore compiled output and generated files
 obj/
@@ -27,3 +25,4 @@ generated/
 !/components/
 !/docs/
 !/.images/
+!/gulp-tasks/

CHANGELOG.md

@@ -1,13 +1,38 @@
+# Changelog
+
+## v27.2.2 (November 28, 2024)
+
+We are excited to announce the addition of four new components in this release, enhancing the capabilities of PowerApps with even more flexibility and functionality.
+
+### Added Components
+
+- [Gantt](components/gantt) `Preview`: A Gantt component for visualizing project timelines and tasks in a Gantt chart format.
+- [FileManager](components/filemanager) `Preview`: A FileManager component for navigating and managing files and folders in a hierarchical view, supporting features like file and folder viewing, searching, and organizing etc.
+- [Spreadsheet](components/spreadsheet) `Preview`: A spreadsheet component for viewing spreadsheet data, allowing users to navigate and analyze data in a grid format.
+- [Kanban](components/kanban) `Preview`: A kanban component for visualizing and organizing work in progress through customizable boards, columns, and cards.
+
+### Improvements
+
+- **Dark Mode Support**: Dark mode support across all components to improve accessibility and user experience.
+- **Adaptive UI**: Components now automatically adjust layouts based on device type (`formfactor`) for optimized display across devices for supported code components.
+- **Enhanced Automation**: Organized automation scripts into a structured `gulp-tasks` folder, introducing new options for creating managed/unmanaged solutions, selective component packaging, and an `npm run clean` command for clearing the cache.
+
+### Documentation Updates
+
+- **PDF Viewer Guide**: Added instructions on loading PDFs from Dataverse into the pdfviewer using PowerAutomate within Canvas applications. [Link](./docs/pdfviewer/how-to-load-dataverse-file-in-pdfviewer.md)
+
 ## v27.1.48 (October 21, 2024)
 
 We are excited to announce the initial release of the **Syncfusion PowerApps Code Components** library. This version includes the following components:
 
 ### Added Components
+
 - [Grid](components/grids) `Preview`:  A powerful data grid component for displaying and manipulating tabular data.
 - [Chart](components/charts) `Preview`: An interactive charting component for visualizing data through various chart types.
 - [Schedule](components/schedule) `Preview`: A scheduling component for managing appointments and events.
 - [PdfViewer](components/pdfviewer) `Preview`: A component for viewing and interacting with PDF documents within your applications.
 - [PivotView](components/pivotview) `Preview`: A pivot table component for summarizing and analyzing data dynamically.
 
 ### What's Changed
-* Initial release of the Syncfusion PowerApps Code Components library in https://github.com/syncfusion/ej2-powerapps-components/pull/1
+
+- Initial release of the Syncfusion PowerApps Code Components library in <https://github.com/syncfusion/ej2-powerapps-components/pull/1>

README.md

@@ -10,6 +10,7 @@ The repository is organized into the following folders:
 | -------------------------- | ------------------------------------------------ |
 | [`components`](components) | Contains the Syncfusion code components. |
 | [`docs`](docs)             | Contains the documentation for Syncfusion code components. |
+| [`gulp-tasks`](gulp-tasks) | Contains the gulp tasks for the Syncfusion code components library. |
 | [`SyncfusionPowerAppsComponents`](SyncfusionPowerAppsComponents) | Contains the generated solution project and solution file with all Syncfusion code components in the **components** folder (Available after running the `npm run pack` command). |
 
 ## Components list
@@ -22,7 +23,11 @@ The Syncfusion PowerApps Code components library includes the following componen
 | [Chart](components/charts) `Preview` | ✅ [Local (TestHarness)](docs/charts/getting-started-with-code-component.md) <br/> ✅ [Canvas](docs/charts/getting-started-with-canvas.md) <br/> ✅ [Model-Driven (Form)](docs/charts/getting-started-with-model-driven-form.md) <br/> ✅ [Model-Driven (Custom Pages)](docs/charts/getting-started-with-model-driven-custom-pages.md) <br/> ✅ [PowerPages (Portals)](./docs/charts/getting-started-with-power-pages.md) |
 | [Schedule](components/schedule) `Preview` | ✅ [Local (TestHarness)](docs/schedule/getting-started-with-code-component.md) <br/> ✅ [Canvas](docs/schedule/getting-started-with-canvas.md) <br/> ✅ [Model-Driven (Form)](docs/schedule/getting-started-with-model-driven-form.md) <br/> ✅ [Model-Driven (Custom Pages)](docs/schedule/getting-started-with-model-driven-custom-pages.md) <br/> ✅ [PowerPages (Portals)](./docs/schedule/getting-started-with-power-pages.md) |
 | [PdfViewer](components/pdfviewer) `Preview` | ✅ [Local (TestHarness)](docs/pdfviewer/getting-started-with-code-component.md) <br/> ✅ [Canvas](docs/pdfviewer/getting-started-with-canvas.md) <br/> ✅ [Model-Driven (Form)](docs/pdfviewer/getting-started-with-model-driven-form.md) <br/> ✅ [Model-Driven (Custom Pages)](docs/pdfviewer/getting-started-with-model-driven-custom-pages.md) <br/> ⬜ PowerPages (Portals) |
-| [PivotView](components/pivotview) `Preview` | ✅ [Local (TestHarness)](docs/pivotview/getting-started-with-code-component.md) <br/> ✅ [Canvas](docs/pivotview/getting-started-with-canvas.md) <br/> ✅ [Model-Driven (Form)](docs/pivotview/getting-started-with-model-driven-form.md) <br/> ✅ [Model-Driven (Custom Pages)](docs/pivotview/getting-started-with-model-driven-custom-pages.md) <br/> ✅ [PowerPages (Portals)](docs/pivotview/getting-started-with-model-driven-custom-pages.md) <br/>
+| [PivotView](components/pivotview) `Preview` | ✅ [Local (TestHarness)](docs/pivotview/getting-started-with-code-component.md) <br/> ✅ [Canvas](docs/pivotview/getting-started-with-canvas.md) <br/> ✅ [Model-Driven (Form)](docs/pivotview/getting-started-with-model-driven-form.md) <br/> ✅ [Model-Driven (Custom Pages)](docs/pivotview/getting-started-with-model-driven-custom-pages.md) <br/> ✅ [PowerPages (Portals)](docs/pivotview/getting-started-with-power-pages.md) <br/>
+| [Gantt](components/gantt) `Preview` | ✅ [Local (TestHarness)](docs/gantt/getting-started-with-code-component.md) <br/> ✅ [Canvas](docs/gantt/getting-started-with-canvas.md) <br/> ✅ [Model-Driven (Form)](docs/gantt/getting-started-with-model-driven-form.md) <br/> ✅ [Model-Driven (Custom Pages)](docs/gantt/getting-started-with-model-driven-custom-pages.md) <br/> ✅ [PowerPages (Portals)](docs/gantt/getting-started-with-power-pages.md) <br/>
+| [FileManager](components/filemanager) `Preview` | ✅ [Local (TestHarness)](docs/filemanager/getting-started-with-code-component.md) <br/> ✅ [Canvas](docs/filemanager/getting-started-with-canvas.md) <br/> ✅ [Model-Driven (Form)](docs/filemanager/getting-started-with-model-driven-form.md) <br/> ✅ [Model-Driven (Custom Pages)](docs/filemanager/getting-started-with-model-driven-custom-pages.md) <br/> ✅ [PowerPages (Portals)](docs/filemanager/getting-started-with-power-pages.md) <br/>
+| [Spreadsheet](components/spreadsheet) `Preview` | ✅ [Local (TestHarness)](docs/spreadsheet/getting-started-with-code-component.md) <br/> ✅ [Canvas](docs/spreadsheet/getting-started-with-canvas.md) <br/> ⬜ Model-Driven (Form) <br/> ✅ [Model-Driven (Custom Pages)](docs/spreadsheet/getting-started-with-model-driven-custom-pages.md) <br/> ⬜ PowerPages (Portals) |
+| [Kanban](components/kanban) `Preview` | ✅ [Local (TestHarness)](docs/kanban/getting-started-with-code-component.md) <br/> ✅ [Canvas](docs/kanban/getting-started-with-canvas.md) <br/> ⬜ Model-Driven (Form) <br/> ✅ [Model-Driven (Custom Pages)](docs/kanban/getting-started-with-model-driven-custom-pages.md) <br/> ⬜ PowerPages (Portals) |
 
 <em>Anticipate future updates to the component list. \*</em>
 
@@ -41,7 +46,7 @@ Clone the Syncfusion PowerApps components repository to your local machine.
 
 ## Creating the Syncfusion code components solution package
 
-To generate a solution project and bundle all Synfusion code components to create a solution package, follow these steps:
+To generate a solution project and bundle all Syncfusion code components to create a solution package, follow these steps:
 
 1. Open your command prompt and navigate to the [root folder](./) of this project.
 
@@ -104,29 +109,26 @@ For instance, to test the Grid code component, you can visit the [Local (TestHar
 
 ## Upcoming Plans and Feedbacks
 
-- We are excited to announce that the following components will be included soon:
+The following components are set to be published soon:
+
 1. Document Editor
-2. File Manager
-3. Gantt Chart
-4. Kanban
-5. Rich Text Editor
-6. Spreadsheet
-7. TreeGrid
+2. Rich Text Editor
+3. TreeGrid
 
-- We welcome your suggestions and improvements! Please share your feedback with us through [Github Discussions](https://github.com/syncfusion/ej2-powerapps-components/issues).
+We welcome your suggestions and improvements! Please share your feedback with us through [Github Discussions](https://github.com/syncfusion/ej2-powerapps-components/issues).
 
 ## Support and feedback
 
-* For any other queries, reach our [Syncfusion support team](https://www.syncfusion.com/support/directtrac/incidents/newincident) or post the queries through the [Community forums](https://www.syncfusion.com/forums) and submit a feature request or a bug through our [Feedback portal](https://www.syncfusion.com/feedback).
-* To renew the subscription, click [renew](https://www.syncfusion.com/sales/products) or contact our sales team at salessupport@syncfusion.com | Toll Free: 1-888-9 DOTNET.
+- For any other queries, reach our [Syncfusion support team](https://www.syncfusion.com/support/directtrac/incidents/newincident) or post the queries through the [Community forums](https://www.syncfusion.com/forums) and submit a feature request or a bug through our [Feedback portal](https://www.syncfusion.com/feedback).
+- To renew the subscription, click [renew](https://www.syncfusion.com/sales/products) or contact our sales team at <salessupport@syncfusion.com> | Toll Free: 1-888-9 DOTNET.
 
 ## License
 
 Syncfusion React Components is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
 
 To be qualified for the Syncfusion Community License Program, you must have gross revenue of less than one (1) million U.S. dollars (USD 1,000,000.00) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
 
-Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+Customers who do not qualify for the community license can contact <sales@syncfusion.com> for commercial licensing options.
 
 You may not use this product without first purchasing a Community License or a Commercial License, as well as agreeing to and complying with Syncfusion's license terms and conditions.
 

components/charts/SfChart/ControlManifest.Input.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest>
-  <control namespace="Syncfusion" constructor="SfChart" version="27.1.48" display-name-key="SfChart" description-key="SfChart_Desc_Key" control-type="virtual">
+  <control namespace="Syncfusion" constructor="SfChart" version="27.2.2" display-name-key="SfChart" description-key="SfChart_Desc_Key" control-type="virtual">
     <!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.
     If it is not using any external service, please set the enabled="false" and DO NOT add any domain below. The "enabled" will be false by default.
     Example1:
@@ -20,6 +20,7 @@
 
     <!-- Chart DataSource Property -->
     <data-set name="DataSource" display-name-key="DataSource"></data-set>
+    <property name="EnableDarkMode" of-type="TwoOptions" default-value="false" display-name-key="EnableDarkMode" description-key="EnableDarkMode_Desc_Key" usage="input" required="false" />
 
     <!-- Chart Series & Title Property -->
     <property name="Series" of-type="Multiple" default-value="" display-name-key="Series" description-key="Series_Desc_Key" usage="input" required="false" />

components/charts/SfChart/SfChart.tsx

@@ -83,7 +83,8 @@ export const SfChartComponent: React.FC<ISfChart> = React.memo((props: ISfChart)
   return (
     <ChartComponent
       ref={chartRef}
-      theme="Fluent2"
+      theme={`Fluent2${props.enableDarkMode ? "Dark" : ""}`}
+      background={props.enableDarkMode ? "#292929" : "#fff"}
       width={props.width}
       height={props.height}
       enableRtl={props.rtl}

components/charts/SfChart/index.ts

@@ -48,6 +48,7 @@ export class SfChart implements ComponentFramework.ReactControl<IInputs, IOutput
         dataSource: this.getChartData(context.parameters?.DataSource),
         width: allocatedWidth > 0 ? allocatedWidth + "px" : "100%",
         height: allocatedHeight > 0 ? allocatedHeight + "px" : "100%",
+        enableDarkMode: this.validateBooleanProperty(context.parameters?.EnableDarkMode),
         rtl: this.context.userSettings.isRTL ?? false,
         series: this.parseJSONConfig(context.parameters?.Series),
         seriesType: context.parameters?.SeriesType?.raw,
@@ -95,7 +96,7 @@ export class SfChart implements ComponentFramework.ReactControl<IInputs, IOutput
     const returnData = sortedRecordIds.map((id) => {
       const record: Record = {};
       columns.forEach((column: Record) => {
-        if (isNullOrUndefined(column.displayName)) return;
+        if (isNullOrUndefined(column.displayName) || column.dataType.includes("multiselectpicklist")) return;
 
         isModelDriven = !isNullOrUndefined(column["isPrimary"]) && !this.isTestHarness;
         if (isModelDriven && column.dataType === "TwoOptions") {

components/charts/SfChart/strings/SfChart.1033.resx

@@ -123,7 +123,7 @@
 
   <!-- Chart Control properties -->
   <data name="SfChart" xml:space="preserve">
-    <value>SfChart (27.1.48) Preview</value>
+    <value>SfChart (27.2.2) Preview</value>
   </data>
   <data name="SfChart_Desc_Key" xml:space="preserve">
     <value>The EJ2 PowerApps Chart Component delivers dynamic and animated HTML5 graphs, seamlessly integrating real-time data for visually impactful presentations.</value>
@@ -134,6 +134,13 @@
     <value>Data Source </value>
   </data>
 
+  <data name="EnableDarkMode" xml:space="preserve">
+    <value>Enable Dark Mode</value>
+  </data>
+  <data name="EnableDarkMode_Desc_Key" xml:space="preserve">
+    <value>Toggle this option to switch the application interface to Dark Mode</value>
+  </data>
+
   <!-- Chart Series & Title Properties -->
   <data name="Series" xml:space="preserve">
     <value>Series</value>

components/charts/SfChart/types.tsx

@@ -7,6 +7,7 @@ export interface ISfChart {
   dataSource: Record[] | undefined;
   width: string;
   height: string;
+  enableDarkMode: boolean;
   rtl: boolean;
   series: SeriesModel[];
   seriesType: ChartSeriesType;