| page | <code>string</code> \| <code>function</code> | | Page content as a Framework7 component page. If `page` is a string ending in `.f7` it is treated as a file path and the page content will be loaded from disk. If `page` is any other string, it is treated as the page content. If `page` is a function, it will be called and must return the page content (unless `type` is set to `"function"`, see examples) |
| title | <code>string</code> | | Page title. |
| id | <code>string</code> | | Page ID. Make it unique, or pass an empty string to be assigned a random ID. |
| description | <code>string</code> | | Description of this tool for its card on the Tools screen. |
| cardTitle | <code>string</code> | | Title of the card for this page on the Tools screen. |
| icon | <code>string</code> | | FontAwesome icon class, for example, "fa-solid fa-globe". FontAwesome Pro solid, regular, light, and duotone icons are available. |
| type | <code>string</code> | <code>"page"</code> | What kind of data is supplied by `page`: "page" or "function". |
**Example**
```js
// Full plugin that displays an alert when the card is clicked on the Tools page
exports.init = function () {
global.apis.ui.addToolsPage(
displayMessage,
"click me",
"clickmecard",
"Click here to see a message",
"Click This Card",
"fa-solid fa-arrow-pointer",
"function"
);
}
function displayMessage() {
global.apis.alert("Card clicked");
}
```
**Example**
```js
// Open a dynamically-generated page
function rollDice() {
var randomNumber = Math.round(Math.random() * 6) + 1;
return `<divclass="page">
<divclass="navbar">
<divclass="navbar-bg"></div>
<divclass="navbar-inner">
<ahref="#"class="link back">
<iclass="icon icon-back"></i>
</a>
<divclass="title">Random Number</div>
</div>
</div>
<divclass="page-content">
<divclass="block">
<h1>You rolled ${randomNumber}</h1>
</div>
</div>
</div>`;
}
global.apis.ui.addToolsPage(
rollDice,
"Random",
"randomnumbercard",
"Click here for a random number",
"Random Number",
"fa-regular fa-dice",
"page"
);
```
**Example**
```js
// Open a page from a file.
// See https://framework7.io/docs/router-component#single-file-component
Add a custom tab to the PostalPoint home screen. Works almost the same as addToolsPage.
**Kind**: static method of [<code>ui</code>](#ui)
| Param | Type | Description |
| --- | --- | --- |
| content | <code>string</code> \| <code>function</code> | Tab content. It is rendered/processed when the user navigates to the Home screen and clicks the tab; if the user navigates to a different screen and back to Home, it will be re-rendered. If `content` is a string ending in `.f7` it is treated as a file path and the content will be loaded from disk. If `content` is any other string, it is treated as the content. If `content` is a function, it will be called and must return the content. |
| title | <code>string</code> | Tab title. Keep it short; depending on screen size and tab count, you have as little as 150px of space. |
| id | <code>string</code> | Tab ID. Make it unique, or pass an empty string to be assigned a random ID. If addHomeTab is called with a tab ID that is already registered, it will be overwritten. |
| type | <code>string</code> | <code>"html"</code> | Format of the `content`. One of "html", "pdf", "raw", "body", or "text". |
| displayInCard | <code>boolean</code> | <code>false</code> | Set to true to wrap the content in a card UI. |
| cardSize | <code>Array.<number></code> | <code>[300,300</code> | Size of the card UI if displayInCard == true. |
| displayStatusBar | <code>boolean</code> | <code>true</code> | Whether the bar on the bottom of the screen should be visible, containing the store logo and scale weight. |
**Example**
```js
// How content is converted by PostalPoint before display:
| title | <code>string</code> | <code>null</code> | Display some title/header text on the customer screen near the signature box. Not shown if terms are set. |
| terms | <code>string</code> \| <code>boolean</code> | <code>false</code> | Set to a string to display terms and conditions or other text content next to the signature pad. |
| termstype | <code>string</code> | <code>"body"</code> | "html", "pdf", "raw", or "body". See setCustomerScreen() |
**Example**
```js
global.apis.ui.collectSignatureFromCustomerScreen("", "<p>By signing, you agree to pay us lots of money</p>", "body");
global.apis.eventbus.on("customerSignatureCollected", function (sigdata) {
const pngDataURL = sigdata.png;
const svgDataURL = sigdata.svg;
});
```
<aname="ui.cancelSignatureCollection"></a>
### ui.cancelSignatureCollection()
Cancels customer signature collection and returns the customer-facing display to normal operation.
**Kind**: static method of [<code>ui</code>](#ui)
**Example**
```js
global.apis.ui.cancelSignatureCollection();
```
<aname="ui.clearSignaturePad"></a>
### ui.clearSignaturePad()
Erase the signature drawn on the customer-facing display.
Note that the customer is also provided a button to do this.
