Loading Data into a Custom Widget

The base class GeneBaseDataWidget provides additional features like Data Loading mechanisms and Platform event handlers.

Widgets inheriting this base class need to implement loadData() method that will be called automatically by the Platform framework. Also if your component needs to use Angular OnInit life cycle hook, you will have to call super.ngOnInit(); in the ngOnInit() method so that GeneBaseDataWidget will be initialized properly.

Note that loadData() is automatically called by the framework and should never be called manually, if your widget needs to force data refresh, then you should call the requestLoadData() method.

This class also provides base methods you can override to integrate with the Framework Events. You can see Angular documentation for full details about how to integrate with the Platform different events and life cycle.

    /**
     * Method called when the DynamicWidgetConfiguration is set.
     * You should configure your widget from widgetParameters by overriding this method
     * @param widgetParameters : widgetParameters that should be used to configure the state of the widget
     */
    protected applyWidgetConfiguration(widgetParameters: T) {
    }

    /**
     * This method is called when a GeneTaskEvent occurs.
     * Override it to implement custom behaviors
     */
    protected onGeneTaskEvent(event: GeneTaskEvent) {
    }

    /**
     * This method is called when a GeneScenarioEvent occurs.
     * Override it to implement custom behaviors
     */
    protected onGeneScenarioEvent(event: GeneScenarioEvent) {
    }

    /**
     * This method is called when a GeneUIEvent occurs.
     * Override it to implement custom behaviors
     */
    protected onGeneUIEvent(event: GeneUIEvent) {
    }

    /**
     * This method is called when a GeneDataEvent occurs.
     * Override it to implement custom behaviors
     * @param event
     */
    protected onGeneDataEvent(event: GeneDataEvent) {
    }


    /**
     * Handler automatically called when a GeneContextEvent of type HIGHLIGHT_CHANGED is received.
     * Override this method to handle those events in your widget implementation.
     *
     * @param event GeneContextEvent of type HIGHLIGHT_CHANGED
     */
    protected onContextHighlightChanged(event: GeneContextEvent) {
    }

    /**
     * Handler automatically called when a GeneContextEvent of type SCENARIO_CHANGED is received.
     *
     * Its base implementation calls the requestLoadData() method.
     *
     * Override this method to handle those events in your widget implementation.
     *
     * @param event GeneContextEvent of type SCENARIO_CHANGED
     */
    protected onContextScenarioChanged(event: GeneContextEvent) {
    }

    /**
     * Handler automatically called when a GeneContextEvent of type SELECTION_CHANGED is received.
     * Override this method to handle those events in your widget implementation.
     *
     * @param event GeneContextEvent of type SELECTION_CHANGED
     */
    protected onContextSelectionChanged(event: GeneContextEvent) {
    }

    /**
     * Handler automatically called when a GeneContextEvent of type FILTER_CHANGED is received.
     * Override this method to handle those events in your widget implementation.
     *
     * @param event GeneContextEvent of type FILTER_CHANGED
     */
    protected onContextFilterChanged(event: GeneContextEvent) {
    }

    /**
     * Handler automatically called each time data have been loaded.
     * @param data the loaded data
     */
    protected onDataLoaded(data: D) {
    }

    /**
     * Handler automatically called each time requestLoadData() is called but cannot be
     * executed because canLoadData() returned false.
     * @param data the loaded data
     */
    protected onCanNotLoadData() {
    }

    /**
     * Handler automatically called each time loadData() failed to load data.
     * @param error the data loading error
     */
    protected onLoadDataError(error: any) {
    }


    /**
     * This method should return either an observable emitting a single value or a boolean.
     *
     * Returning a true value means the widget Platform framework can safely call loadData(), all
     * the required initializations are completed.
     *
     * Returning false means the widget is not ready to load data yet, and this method
     * will be called again upon #requestLoadData() next call.
     *
     * The default implementation checks that widgetConfiguration and context are set
     * and, in comparison mode, that the involved scenarios have a VALID data status.
     *
     * Override this method if you implement additional checks.
     */
    protected canLoadData(): boolean | Observable<boolean> {
    }

The Sample Widget integrated with Configuration and Data Loading mechanism:

@Component({
    selector : 'app-sample-widget',
    templateUrl : './sample-widget.component.html',
    styleUrls : ['./sample-widget.component.scss']
})
export class SampleWidgetComponent extends GeneBaseDataWidgetComponent<SampleWidgetConfiguration, SampleWidgetModel> {

    // Widget Manifest used
    public static MANIFEST: GeneWidgetManifest = {
        widgetTypeName : 'SampleWidgetComponent',
        configuratorTypeName: 'SampleWidgetConfiguratorComponent',
        version : '1.0',
        description : 'Simple Demo Sample Widget',
        name : 'Sample Widget',
        customViewCompatible : true,
        dashboardCompatible : true,
        minItemRows : 5,
        minItemCols : 5,
        itemRows : 5,
        itemCols : 5
    };

    constructor(protected injector: Injector,
                private service: SampleWidgetService,
                private toastrService: ToastrService) {
        super(injector);
    }

    // Called by the framework when required
    loadData(context: GeneContext): Observable<SampleWidgetModel> {
        return this.service.loadWidgetModel(context);
    }

    // Event handler when a user clicks on validate or invalidate
    onUpdateStatus(status: SampleScenarioStatus) {
        this.service.updateScenarioStatus(this._context, status)
            .pipe(
                tap( () => this.requestLoadData() )
            )
            .subscribe(
            result => this.toastrService.info('Scenario Updated with Status ' + status),
            error => this.toastrService.error('Error While Updating Status ' + error)
        );
    }
}

}