'Scheduler Pro - Data from grid custom' with SharePoint Integration

[assurancedigital]

Hi Ghulam,

We are still facing some issues with the solution. Here are the steps we are currently following:

Step 1: We have Node.js version 18.20.4 installed.
Step 2: We have downloaded the solution provided above.
Step 3: We added all the dependencies required by using npm install. During this step, all the necessary node modules were installed based on the package.json. Note: I noticed that all the Bryntum packages are at version 6.2.1, and I did not modify them; I proceeded with the same version.
Step 4: I ran gulp serve to launch the package on the browser workbench.
Step 5: We encountered an error, which I have summarized below. A full screenshot of the error is attached for your reference.

Sample Error:

BryntumError1.png (184.87 KiB) Viewed 103 times

Additionally, here are the other steps we have taken:
As you suggested, I changed the version of the Bryntum packages to 6.2.2 and ran npm install, but it resulted in the following error:
npm error: No matching version found for @bryntum/core-react-thin@6.2.2.
npm error: Notarget - a package version that doesn't exist.

I also tried installing another version of Node.js (20.9.1) and ran npm install, but it indicated that this version is not supported.

I would appreciate any help you can provide to move forward.

Thank you!

[ghulam.ghous]

We encountered an error, which I have summarized below. A full screenshot of the error is attached for your reference.

This is happening because of a code transpilation issue, but I did fixed that in the sample project I provided to you. Can you please share the gulpFile.js?

As you suggested, I changed the version of the Bryntum packages to 6.2.2 and ran npm install, but it resulted in the following error:

I did not suggest anything like this. 6.2.2 is not released yet and nothing is gonna be changed in 6.2.2. Please use the 6.2.1 version.

[assurancedigital]

Hi,

I am using the same gulpFile.js what was provided in the package. For the reference I have pasted below:

// gulpfile.js
const build = require('@microsoft/sp-build-web');
const path = require('path');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

// Fix 'serve' bug on SPFx 1.18 and later
var getTasks = build.rig.getTasks;
build.rig.getTasks = function() {
    var result = getTasks.call(build.rig);
    result.set('serve', result.get('serve-deprecated'));
    return result;
};

build.configureWebpack.mergeConfig({
    additionalConfiguration : (generatedConfiguration) => {
        // Add Babel loader rule for Bryntum’s code to transpile optional chaining
        generatedConfiguration.module.rules.push({
            test    : /\.js$/,
            // Only transpile the relevant Bryntum locale files
            include : /node_modules\/@bryntum\/\w+-thin/,
            use     : {
                loader  : 'babel-loader',
                options : {
                    presets : [
                        [
                            '@babel/preset-env'
                        ]
                    ]
                }
            }
        });

    // Ensure Bryntum paths are resolved properly (for CSS references, etc.)
    generatedConfiguration.resolve.alias = {
        ...generatedConfiguration.resolve.alias,
        './@bryntum' : path.resolve(__dirname, './node_modules/@bryntum')
    };

    return generatedConfiguration;
}
});

/* fast-serve */
const { addFastServe } = require("spfx-fast-serve-helpers");
addFastServe(build);
/* end of fast-serve */

build.initialize(require('gulp'));

[assurancedigital]

Hi,

I am using the same gulpFile.js what was provided in the package. For the reference I have pasted below:

// gulpfile.js
const build = require('@microsoft/sp-build-web');
const path = require('path');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

// Fix 'serve' bug on SPFx 1.18 and later
var getTasks = build.rig.getTasks;
build.rig.getTasks = function() {
    var result = getTasks.call(build.rig);
    result.set('serve', result.get('serve-deprecated'));
    return result;
};

build.configureWebpack.mergeConfig({
    additionalConfiguration : (generatedConfiguration) => {
        // Add Babel loader rule for Bryntum’s code to transpile optional chaining
        generatedConfiguration.module.rules.push({
            test    : /\.js$/,
            // Only transpile the relevant Bryntum locale files
            include : /node_modules\/@bryntum\/\w+-thin/,
            use     : {
                loader  : 'babel-loader',
                options : {
                    presets : [
                        [
                            '@babel/preset-env'
                        ]
                    ]
                }
            }
        });

    // Ensure Bryntum paths are resolved properly (for CSS references, etc.)
    generatedConfiguration.resolve.alias = {
        ...generatedConfiguration.resolve.alias,
        './@bryntum' : path.resolve(__dirname, './node_modules/@bryntum')
    };

    return generatedConfiguration;
}
});

/* fast-serve */
const { addFastServe } = require("spfx-fast-serve-helpers");
addFastServe(build);
/* end of fast-serve */

build.initialize(require('gulp'));

[ghulam.ghous]

Weird. I have tried again everything is working. I am sharing the package again.

1. Downloaded the pakcage
2. Replace the URL in the serve.json
3. Install packages using npm install
4. Run gulp clean
5. To start server npm run start

Though nothing has changed, I am attaching the demo here again just for the sake of sanity.

sharepoint-fabric-drag-from-grid-schedulerPro.zip

(775.48 KiB) Downloaded 7 times

[assurancedigital]

Hi Ghulam,

Unfortunately, we are still encountering the same issue. It would be great if we could connect on Monday to resolve this matter over a call, as it may be easier for you to pinpoint where we might be missing something.

Please let us know your available times for Monday, and either myself or Sandeep will block an invite.

Thank you!

Best regards,
Giridhar

[ghulam.ghous]

Hey,

Alright, I am available on Monday after 11 CEST. Please drop an invite for any timeslot after this at ghulam@bryntum.com.

Thank you so much for the patience in this matter. Also it would be great if you can share your browser, browser version and OS you are using.

[ghulam.ghous]

Also to unblock you guys at the moment, can you please try using the 6.1.9 version instead of 6.2.1. You need to do that for the bryntum packages defined under dependencies in Package.json.

Please do let me know if that works for you?

[assurancedigital]

Hi Ghulam,

I have sent an invite for you to connect. I have blocked at 12:30 PM - 1:00 PM CST. Hope this works, if not let us know.

Meanwhile, some of the above-mentioned details are:
OS: Windows 11 Enterprise
Browser: Microsoft Edge
Browser Version: Version 136.0.3240.64 (Official build) (64-bit)

Even, I have tried with 6.1.9 version and facing the same issue.

Hope this call will help us to look into the issue.

Thanks,
Giri

[ghulam.ghous]

Yup this works.

Even, I have tried with 6.1.9 version and facing the same issue.

This is weird. Because the issues you are facing is related to transpilation as SPFx tooling excludes node_modules from transpilation. We made some changes to the thin packages in 6.2.0 that should be causing this issue. In any case, I made some changes to the gulp file so we transpile the code using babel.

I'll try the above browser you have share with me.