Our pure JavaScript Scheduler component


Post by akanthon »

We have a SharePoint-hosted addin (GitHub project BryntumSharePoint2013) which was developed by Bryntum but the example solution only uses simple SharePoint list columns. Our SharePoint calendar contains a lookup column that points to a separate list that contains the values for our various departments. Events in the calendar relate to multiple departments therefore we enabled the column to be a multi-select to accommodate this requirement.

In the EventModel, we are using our SharePoint calendar callled Events, and the resourceId param maps to the lookup column called Sections from the Events list.

In the ResourceModel, we are using our SharePoint custom list called Departments, and the category param is mapped to the datasource called section which is the title field of the Departments list. SPResoruce.idField param is set to use the Id field of the Departments list.

We need to understand how to process multi-select lookup column values. We want to map the data that the Scheduler uses to arrays in memory instead of directly to SharePoint lists because we need to process the column values to make it useful for the Scheduler.

Post by Terence »

To achieve a combobox list column in the BryntymSharepoint2013 demo you can do it like:

I will take the department list as an example. You can use the same approach for the Section list. First create a model for the lookup list:
class SPDepartment extends Model {

    static get fields() {
        return [
            { name: 'id', dataSource: 'Id' }, // Map to the right SP fields in the dataSource property
            { name: 'name', dataSource: 'Title' }
        ];
    }
}


Fetch the data with the getDataset function in App.js. Add a new inner section in the loadData function after loading the NonworkingTime dataset.
this.getDataset(this.hostWebUrl, 'Departments', function (response) {
                        this.Departments = response;
                        callback.call(scope || this);
                    }, this.error, this);
In the example the rendering and configuration is done when all data is loaded. Use the following column configuration for the department column in the Scheduler config.
columns : [
        .....
        {
            text : 'Departments',
            field: 'department', // map to the corresponding field in the SPResource model
            renderer : ({value, cellElement, column}) => {
                const editor = column.editor;
                let record = editor.store.getById(value);
                return record ? record.get(editor.displayField) : '';
            },
            editor : {
                type : 'combo',
                valueField: 'id',
                displayField: 'name',
                store : new Store({
                    modelClass : SPDepartment,
                    data : this.Departments
                })
            }
        },
        ....

Post by Terence »

I think in this case the current used Persons list (data for the ResourceStore) is in your case the Section list. This is a bit hard to say, without knowing or seeing the used list configurations.

But a I assume there is a list 'Section' or 'Sections' in your SP domain.
this.getDataset(this.hostWebUrl, 'Sections', function (response) {
                        this.Sections = response;
                        callback.call(scope || this);
                    }, this.error, this);
The current Person model (Resource) would then be the Section model
class SPSection extends ResourceModel {

    static get fields() {
        return [
           ...
        ];
    }
}

// Set the idField to the fieldname where the EventModel.resourceId field maps to.
SPSection.idField = someIdField';

In the event model you need to look up the mapping (assigned 'sectionId'?) and map it to the resourceId field.
class SPEvent extends EventModel {

    static get fields() {
        return [
            ...
            { name: 'resourceId', dataSource: 'SectionId' },
           ....
        ];
    }
}

Without knowing the list configurations it is a bit working in the dark, but with the model class definitions it should be possible to map and link all data together. I hope this will help you out a bit.

Post Reply