How to create scrollview component using code?

Help & Support
#1

Just trying to add a scrollview component by entirely creating it in code.

var DisableScroll = pc.createScript('disableScroll');

// initialize code called once per entity
DisableScroll.prototype.initialize = function() {
    var scrollview = new pc.ScrollViewComponent();
    var viewport = this.entity.findByName("Viewport");
    var content = viewport.findByName("Content");
    var horScroller = this.entity.findByName("HorizontalScrollbar");
    var verScroller = this.entity.findByName("VerticalScrollbar");
    
    scrollview.bounceAmount = 0.1;
    scrollview.friction = 0.05;
    scrollview.viewportEntity = viewport;
    scrollview.contentEntity = content;
    scrollview.horizontal = true;
    scrollview.horizontalScrollbarEntity = horScroller;
    scrollview.vertical = true;
    scrollview.verticalScrollbarEntity = verScroller;
    scrollview.scrollMode = 1;
    scrollview.verticalScrollbarVisibility = 1;
    scrollview.horizontalScrollbarVisibility = 1;
    
    this.entity.addComponent(scrollview);
};

// update code called every frame
DisableScroll.prototype.update = function(dt) {
    
};

// swap method called for script hot-reloading
// inherit your script state here
// DisableScroll.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/

However, I get the error as follows.

Screenshot 2020-06-16 at 11.29.33 AM
Screenshot 2020-06-16 at 11.29.33 AM1354Ă—239 75.9 KB

Any way to resolve this?

EDITOR - https://playcanvas.com/editor/scene/939271

#2

I’d like to know this as well, all the parameters seem to be well defined, what is “schema”?

#3

Here’s a tutorial on adding PlayCanvas components via code. https://developer.playcanvas.com/en/tutorials/programmatically-creating/

Note the use of entity.addComponent https://developer.playcanvas.com/en/api/pc.Entity.html#addComponent

#4

I just tried it out @yaustar. Same error. My new code is this.

this.entity.addComponent("ScrollViewComponent", {
        bounceAmount: 0.1,
        friction: 0.05,
        viewportEntity: viewport,
        contentEntity: content,
        horizontal: true,
        horizontalScrollbarEntity: horScroller,
        vertical: true,
        verticalScrollbarEntity: verScroller,
    });

Added it just like the tutorial added the model component. Not so familiar with adding components via code, so help would be appreciated.

#5

Recheck the documentation on the list of valid strings please. You are close.

#6

Sorry @yaustar, didn’t quite get that. You mean the “ScrollViewComponent” string?

#7 
    e.addComponent('scrollview', {});

image
image833Ă—925 36.4 KB

The documentation covers what strings are used for which components to add.

Bear in mind that the scrollview is a complicated setup and you may be best off creating it in Editor:
image

Whats the reason for creating the scroll view in code?

1 Like
#8

Thanks a lot @yaustar! Really helped.

I’ll leave this to @DevilZ to explain.

#9

Essentially @yaustar we are developing a drag and drop system for which we need multiple attributes of the scrollbar to be enabled/disabled at certain times. Due to this, it was decided that we’d create it in code, because the subsequent steps become simpler. Also, thanks for your detecting double click project, that was helpful in our drag and drop system!

#10

Maybe this helps:

2 Likes
#11

Thanks @Albertos. Will consider it.