Settings

General

You can set the App Name and Common hookSet Name here.

App Model

You can define the default data model for your entire app.

Data in the App Model resets on page refresh unless cached. It’s not sent to the server but can be set server-side using $$BF_App.

Store global elements like your logo or user info here and reference them as {{app.key}}. For example, upload your logo to File Assets, copy its URL, and set it in logoURL:

"env": {
    "logoURL": "https://your-logo-url"
}

In Styling > Header slots > HTML contents:

<img :src="app.env.logoURL">

You can also cache the data here to enable Sync with app for a single page's data model.

Caching:

• In Browser: Uses local storage, persists across tabs and after browser closure.

• In Tab: Uses session storage, persists only in the tab and survives refreshes.

• If both options are selected, session storage is prioritized.

DOM Header Insertions

DOM Header Insertions allow you to add or modify scripts, styles, and other elements that influence how your app loads and behaves.

Load First

This section is for essential libraries and scripts that need to be available as soon as the app loads. For example: Tailwind CSS, Font Awesome and Custom CSS Classes. For example:

<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
:root {
    --white-color: #ffffff;
}

.btn-pri {
    @apply py-2 px-3 rounded-md bg-indigo-600 text-white hover:bg-indigo-700;
}

.btn-sec {
    @apply py-2 px-3 rounded-md bg-white text-indigo-600 hover:bg-slate-50;
}
</style>

In Styling > CSS:

.main-content-wrapper,body {    background: var(--white-color);}

In a single page html object:

<button class="btn-pri">Save</button>
<button class="btn-sec">Cancel</button>

Load Later

This section is for elements that can load after the initial content, such as:

App Title:

<title>Your App Title</title>

Favicon: Change the favicon by updating the URL in the link tag.

<link rel="shortcut icon" href="https://your-favicon-url" />

Additional Scripts: Add scripts like Marker.io that don’t need to load immediately.