Dynamic value in Dropdown

ankitvats1 commented 2 years ago

Hi Peter Širka,

First of all, thank you for creating this amazing application. I'm using this application in one of my projects. I'm facing some challenges while setting the dynamic value to the dropdown. Can you help me with this or provide a link to the docs where I can find a solution?

I want to retrieve the list of databases from the server & show the list to the user in a dropdown.

exports.make = function(instance, config) { // retrieving & setting the value of database here const databases = [] }

<settings> <div data---="input__?.database__dirsource:databases" class="m"></div> </settings>

petersirka commented 2 years ago

Hi @ankitvats1, thank you. I'm sending you an example:

<script total>

    exports.name = 'YourDatabase';
    exports.group = 'Databases';
    exports.version = '1';
    exports.icon = 'fa fa-database';
    exports.author = 'Total.js';
    exports.config = { datasource: '' };
    exports.inputs = [{ id: 'data', name: 'Data' }];

    exports.call = function(data, answer) {
        answer([{ id: 'nosql', name: 'NoSQL (global)' }, { id: 'pg', name: 'PostgreSQL (global)' }]);
    };

    exports.make = function(instance, config) {

        instance.message = function($) {
            $.destroy();
        };

        instance.call = function(data, answer) {
            answer([{ id: 'nosql2', name: 'NoSQL (instance)' }, { id: 'pg2', name: 'PostgreSQL (instance)' }]);
        };

    };

</script>

<script>
    // yourdatabase is the name of your component in lower-case
    ON('configure_yourdatabase', function(data) {
        // Global exports.call
        data.call(function(response) {
            SET('%yourdatabase', response);
        }, true);

        // Private instance.call (from the existing instance)
        /*
        data.call(function(response) {
            SET('%yourdatabase', response);
        });*/
    });
</script>

<settings>
    <div class="padding">
        <div data---="input__?.datasource__dirsource:%yourdatabase;dirraw:1;placeholder:Choose a database;dirempty:No database" class="m"><b>Database</b></div>
    </div>
</settings>

<readme>
Lorem ipsum dolor sit amet
</readme>

<body>
    <header>
        <i class="ICON"></i>NAME: <b class="monospace" data-bind="CONFIG.datasource__text__empty"></b>
    </header>
</body>

ankitvats1 commented 2 years ago

Thank you so much @petersirka. Just wanted to know where can I find this in the docs.

petersirka commented 2 years ago

This is missing in the documentation. We will add it.

ankitvats1 commented 2 years ago

Sure, thanks.

totaljs / flow

Dynamic value in Dropdown #70