Galaxy: Dynamically update PageIndicator after creation

Question

I'm developing an app for Samsung Gear S3 and Samsung Galaxy watches, using a Tizen web application.

I'm trying to use a PageIndicator to show a user scrolling through a dynamic amount of pages generated after an API call, and these amount of pages change when users perform certain actions. Documentation: https://developer.tizen.org/dev-guide/3.0.0/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_PageIndicator.htm

Is it possible to update the amount of pages once an PageIndicator is created?

I tried destroying it and recreating it, but that didn't seem to work.

Code

function PageController() {
    /* Keep track of scope*/
    var _this = this;

    /* Tau elements */
    var pageIndicator = null;

    this.showIndicator = function(active, total) {
        if (pageIndicator != null) {
            pageIndicator.destroy();
        }

        var elPageIndicator = document.getElementById("pageIndicator");
        pageIndicator = tau.widget.PageIndicator(
          elPageIndicator, {maxPage: total, numberOfPages: total});

        console.log("Created");
        console.log(pageIndicator);
        pageIndicator.setActive(active);
    }
}

I also tried the configure() or _configure() functions I noticed exists in the object when using the console logger, without success.

Code

function PageController() {
    /* Keep track of scope*/
    var _this = this;

    /* Tau elements */
    var pageIndicator = null;

    this.showIndicator = function(active, total) {
        if (pageIndicator == null) {
            var elPageIndicator = document.getElementById("pageIndicator");
            pageIndicator = tau.widget.PageIndicator(
              elPageIndicator, {maxPage: total, numberOfPages: total});

            console.log("Created");
            console.log(pageIndicator);
        }

        console.log("Reconfigure");
        pageIndicator.configure({maxPage: total, numberOfPages: total});
        pageIndicator.refresh();
        pageIndicator.setActive(active);
        console.log(pageIndicator);
    }
}

Also trying to set the options manually via the pagindicatorobject.options.maxPage = my new amount and pageindicatorobject.options.amountPages = my new amount after which I try to perform a refresh() did not work.

Code

function PageController() {
    /* Keep track of scope*/
    var _this = this;

    /* Tau elements */
    var pageIndicator = null;

    this.showIndicator = function(active, total) {
        if (pageIndicator == null) {
            var elPageIndicator = document.getElementById("pageIndicator");
            pageIndicator = tau.widget.PageIndicator(
              elPageIndicator, {maxPage: total, numberOfPages: total});

            console.log("Created");
            console.log(pageIndicator);
        }

        console.log("Reconfigure");
        pageIndicator.options.maxPage = total;
        pageIndicator.options.numberOfPages = total;
        pageIndicator.refresh();
        pageIndicator.setActive(active);
        console.log(pageIndicator);
    }
}

In each case running the following Code

var pageController = new PageController();
pageController.showIndicator(x, y);

It would always give the same pageIndicator back in console, never replacing it when a new config was given. How can I fix this problem?

Answer 1

Please check the "Setting UI Component Options" section in UI Components (Tizen).

To change options dynamically, you can use the widget option method. In the example:

    console.log("Reconfigure");
    pageIndicator.option({maxPage: total, numberOfPages: total})
    pageIndicator.setActive(active);
    console.log(pageIndicator);
}

In this example there is no need to call the refresh() method.

Or you can use HTMLElement dataset to set options on the base widget HTMLElement and then call refresh on the widget.

Example:

    console.log("Reconfigure");
    elPageIndicator.dataset['maxPage'] = total;
    elPageIndicator.dataset['numberOfPages'] = total;
    pageIndicator.refresh();
    pageIndicator.setActive(active);
    console.log(pageIndicator);
}