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>