Using complex components in SCCO Quick Service

RicardoRenteria · ‎2021 Feb 17

Hi guys,

I was checking some development workshops in which are using a class named cco.BasicPluginComponent for creation of "complex" components inside SCCO screen.

When I run SCCO with the plugin, I got the following error in the console:

I'm using FP09 and the plugin looks like this: (It's an example provided by SAP):

class PluginComponent6 extends cco.BasicPluginComponent {
    constructor(pluginServiceImpl, cdr) {
        super(pluginServiceImpl, cdr);       
        this.init();
    }
    handleEvent(event) {    
    switch(event.getType()) {
    case 'YT':
     //If event YT is received, take the media id from the payload and update the iframSrc field
     this.iframeSrc = 'https://www.youtube.com/embed/' + event.getPayload() + "?mute=1&autoplay=1";
     //Change detection has to be triggered manually
     this.cdr.detectChanges();
     break;
    case 'YT_MEDIA_ID':
     //This event will display a popup to enter the media id
     this.getMediaId();
     break;
}
    }
    init() {    

    this.iframeSrc = '';

    //Get the event bus from the context
    const eventBus = this.getPluginService().getContextInstance("EventBus");
    //Subscribe to the event bus    
    eventBus.subscribe(this);

    this.eventBus = eventBus;
    }
    getMediaId() {

    //Display a generic input popup with one input field to get the media id
    const mediaInputModel = new cco.InputModel();

     this.eventBus.push('SHOW_GENERIC_INPUT', {
             'configuration': [
                 new cco.GenericInputConfiguration('Youtube Media Id', '0', 'Input', mediaInputModel, null)
             ],
             'title': 'Enter youtube media id',
             'callback': (positive) => {
                 if (positive) {
                 //If user clicked the OK button, fire the YT event with the media id entered
                 this.eventBus.push('YT', mediaInputModel.getValue());
                 } 
             }
         });
    }
    ngOnDestroy() {
    //When the component was destroyed it has to be removed as event bus subscriber
    const eventBus = this.getPluginService().getContextInstance("EventBus");       
    eventBus.unsubscribe(this);
    }
}
Plugin.MyPlugin6 = class MyPlugin6 {
    constructor(pluginService, eventBus) {
    this.pluginService = pluginService;
        this.eventBus = eventBus;
    this.init();
    }
    init() {

    }
    getDynamicComponents() {
    //The method is called by the plugin framework. All custom components have to be returned.
        return [{        
        //Class of the component
            class: PluginComponent6, 
            //Component options. Will contain e.g. the template
            options: {template: '<div [style.width.px]="width" [style.height.px]="height"><iframe width="100%" height="100%" [src]="iframeSrc | urlSanitizer" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>'}
        }];
    }
};

According the error message, it seems to be something wrong with the class cco.BasicPluginComponent

Any suggestions?

Thanks a lot.

JoergAldinger · ‎2021 Aug 06

We have also been trying to get the Youtube workshop example to work in FP10, FP11 and FP12 with no success. Something must have changed, probably in FP09.

Have you managed to get it working ricardo.renteria2 ?

Thanks,

Joerg.

R_Zieschang · ‎2021 Feb 18

Dear ricardo.renteria2,

what line in your code is line 28, because this is mentioned in the stacktrace.
If you have more than one plugin running, than please check in the developer console of chrome -> sources what line 28 is.

Regards

Robert

Using complex components in SCCO Quick Service

Know the answer?

Need more details?

Accepted Solutions (0)

Answers (2)

Answers (2)