Skip to content

# Basic Plugin

This sample plugin showcases some of the features many plugins will want to use.

Download JavaScript

plugin.js

    // Sample plugin to demonstrate plugin capabilities and structure.

    async function getPage() {
        // A Framework7 component page
        return global.apis.getPluginFolder("basic-demo") + "/uipluginpage.f7";
    }

    // This is run when PostalPoint loads the plugin at launch.
    // Use it to register for things you want to do, like adding a page, hooking into payments or shipping rates, etc.
    exports.init = function () {
        console.log(global.apis.settings.get("basic-demo_secretcode"));
        global.apis.ui.addToolsPage(getPage, "Sample Page Title", "sampletool1234", "A sample plugin page", "Sample", "fa-solid fa-circle");
    };

    // This defines a settings UI to display for the plugin.
    // If exports.config is a function instead of an array, it will be executed when opening the settings
    // and must return an array like the one below.
    // If exports.config is undefined, a settings menu will not be provided to the user.
    exports.config = [
        {
            type: "button",
            label: "Test Button",
            text: "Some text about the button",
            onClick: function () {
                global.apis.alert("Button pressed");
            }
        },
        {
            type: "text",
            key: "app.postalpoint.basic-demo_somestring", // Try to make sure this is unique by using a prefix,
            // settings storage is global so there could be conflicts if you aren't careful
            defaultVal: "",
            label: "Type a string",
            placeholder: "",
            text: "Description text next to the input box",
            sync: false // Add sync: false to prevent automatically syncing this setting between
                        // PostalPoint installations (i.e. it's a device-specific setting, like a pairing code)
                        // If it's not present, or is any truthy value, it could be synced between PCs
        },
        {
            type: "password",
            key: "app.postalpoint.basic-demo_secretcode",
            defaultVal: "",
            label: "Secret Code",
            placeholder: "",
            text: "Don't tell anyone this secret code:"
        },
        {
            type: "textarea",
            key: "app.postalpoint.basic-demo_sometext",
            defaultVal: "",
            label: "Text Box",
            placeholder: "...",
            text: "You can type a few lines of text here."
        },
        {
            type: "select",
            key: "app.postalpoint.basic-demo_dropdownbox",
            defaultVal: "",
            label: "Choose an option",
            placeholder: "",
            text: "",
            options: [["key1", "Value 1"], ["key2", "Value 2"]]
        }
    ];

Download HTML

uipluginpage.f7

    <template>
        <div class="page">
            <div class="navbar">
                <div class="navbar-bg"></div>
                <div class="navbar-inner">
                    <div class="title">${title}</div>
                </div>
            </div>
            <div class="page-content">
                <a class="button" @click=${openAlert}>Open Alert</a>
                <a class="button" @click=${printSomething}>Print Something</a>
                <div class="list simple-list">
                    <ul>
                        ${names.map((name) => $h`
                        <li>${name}</li>
                        `)}
                    </ul>
                </div>
            </div>
        </div>
    </template>
    <!-- component styles -->
    <style>
        .red-link {
            color: red;
        }
    </style>
    <!-- rest of component logic -->
    <script>
        // script must return/export component function
        export default (props, { $f7, $on }) => {
            const title = 'Component Page';
            const names = ['John', 'Vladimir', 'Timo'];

            const openAlert = () => {
                $f7.dialog.alert('Hello world!\nblah blah blah');
            }

            async function printSomething() {
                // Print some text to the receipt printer
                var printer = await global.apis.print.getReceiptPrinter();
                printer.addFieldBlock('Hello world!\nblah blah blah\n\n', "C");
                global.apis.print.printReceiptData(await printer.getData());
            }

            $on('pageInit', () => {
                // do something on page init
            });
            $on('pageAfterOut', () => {
                // page has left the view
            });

            // component function must return render function
            return $render;
        }
    </script>