App settings
Each app has some general settings which can be configured. These settings can be changed by clicking the cog icon in the toolbar when inside an app.
Share App Preview URL
In the top-right section of the App Settings, you find a Share icon. Clicking this icon will open a dialog containing the URL to the App (in the Develop environment) as well as a QR code containing the same URL.
Scan the QR code to preview or test the App from your mobile device.
General settings
Name
Used in the <title> tag and displayed as the title of the browser tab. Also used in the list of apps at the root URL of the Appfarm Client and throughout Appfarm Create.
Description
A longer description of the app. For your own reference.
Readable ID
A slug to use in the app's public URL. For example, in the following app URL the Readable ID is events: https://thirty50.appfarm.app/events.
The value must consist only of valid URL characters. Illegal characters will be automatically removed.
Important: If you change the Readable ID, the app's URL will change, and you will have to provide the new URL to your users. Homescreen shortcuts on mobile devices will also become invalid.
App Icon
An icon from the built-in icon library. Displayed in the list of apps at the root URL of the Appfarm Client and throughout Appfarm Create.
Default View
The view displayed when navigating to the root of the app.
Theme
The theme to apply to the app. You can also switch themes dynamically, using the Set Theme action node.
Device adaptivity and responsivity
Device Size Availability
The device sizes that the app should be available for. Use this option when you implement a design strategy with multiple apps where each app is targeted at specific device sizes. The following sizes are available:
Extra Small: up to 600 px (mobile phones)Small: 600–1239 px (tablets)Medium: 1240–1439 px (small and medium sized laptops)Large: 1440px and over (larger laptops and desktop monitors)
When navigating to the app, the device's screen size will be evaluated, and the Appfarm Client will determine if the app should be accessible or not based on this setting.
Responsive Strategy
When a responsive strategy is applied, the UI designer provides breakpoints so that you can design the app to adapt to different screen sizes.
None: Design for one screen size. No breakpoints are provided to override styling.Desktop First: Design for large screens first, with breakpoints to adapt the design for progressively smaller screen sizes.Mobile First: Design for small screens first, with breakpoints to adapt the design for progressively larger screen sizes.
App drawer
Main App Drawer
If you are using a drawer as the main navigation you can select it here. Defining a main app drawer enables some additional built-in features:
The drawer state is accessible via the built-in app variable Is Main Drawer Open.
If the drawer's Type property is
Temporary, the drawer will be automatically closed when navigating using action nodes such as Navigate and Open Dialog.
Drawer Default Open
Show the drawer when the app is loaded. This setting is ignored if the drawer's Type property is Temporary.
Event handlers
Run an action when the app is loaded/refreshed. This is commonly used to populate default data, check for URL parameters, or set a theme.
Note: Running actions on app load will increase app loading time and should be used with care.
On App Load
The action will be triggered after the data sources have been populated, but before the UI is shown to the user.
On App Loaded
The action will be triggered after the UI is shown to the user.
On Online
The action will be triggered when an App is offline, and goes online.
On Offline
The action will be triggered when an App is online, and goes offline. Note that database operations, or Action Nodes communicating with the server, cannot be executed in this action.
On Visible
The action will be triggered when the App goes from hidden to focused / visible. NB: The browser must support the Page Visibility API (all major browser supports this).
On Hidden
The action will be triggered when the App goes from focused / visible to hidden. NB: The browser must support the Page Visibility API (all major browser supports this).
On Browser History Change
This can be used to trigger an action every time the browser history changes, for example when navigating between views, or changing the URL params. If the connected Action uses Action Params, you will have access to a specific set of parameters for this event handler, for passing in to the Action:
Source View, Target View, Source Path, Target Path, Source Params, Target Params.
This new event handler combined with the possibility the add custom headers should be enough to integrate any Analytics tool to Appfarm, included Google Analytics 4 (GA4). However, GA4 automatically detects browser history change once the custom header scripts have been added.
Progressive Web App
These values are included in the app's web application manifest. Setting a value here will overwrite the equivalent value set in the Environment configuration.
Name
The name of the app. It may be displayed among a list of other apps or as a label for an icon. A maximum of 45 characters is recommended.
Short Name
An abbreviated name used as the app name on device homescreens and other places with limited space.
A maximum of 12 characters is recommended. If left blank, Name will be used and truncated.
Orientation
The default orientation of your app on mobile devices.
Background Color
A color that may be used by the operating system as a placeholder while the app's styles are loaded. Usually, this should match the background color of the app.
Theme Color
A color that may be used by the operating system when displaying the app. This color may apply even when an app is not installed as a PWA.
Icon 72x72–512x512
App icons of various dimensions that can be used in different contexts across an operating system. The icons must be uploaded to Files.
Enable Push
Deprecated! This setting is no longer in use and is currently Read Only.
Use action node Request Permissions instead.
Push Icon 192x192
The icon that will be visible on web push notifications on supporting devices.
Note: If you are using the Push notification action node in a service, changes to the push icon will not be applied to the service until there are changes in the data model or services.
Enable Offline
Enables offline support for this App. This will make the App store runtime only data on the client, and the App will be able to run while offline. Please note that Database connected data sources do not work in Offline mode, so the App needs to be designed to specifically targeting offline mode - with runtime only data sources, and handling of persisting or deleting data base on whether the App is Online or Offline. Please also see the On Offline and On Online Event Handlers described in the section above.
Regarding the Enable Push setting: This will be deprecated from Appfarm version 23.4 (to be released september 2023). It will be replaced by an action node for requesting permissions. Note that with this Appfarm Release, push notifications will also be available for iOS devices. Up until spring 2023, push notifications have only been available for progressive web apps for Android.
Shareable link info
Generate <meta> tags for rich link previews when the app is shared on social media or in messages on smartphones. For a detailed walkthrough of implementing link previews, see How to generate link previews for social media.
Data Source
Select a data source to enable dynamic data in the meta tags. For example, if a link to an event is shared and you want to populate the tags with details of that specific event.
Query Param Name
Available if a data source is selected. The name of the query parameter used to specify the object to return. Use lower case letters with no spaces, for example "event".
Identifying Property
Available if a data source is selected. A unique identifying property to be used to look up the correct object in the database. A Random Identifier property is recommended. If not specified, ID will be used.
Title
The value for the Open Graph property og:title.
Description
The value for the Open Graph property og:description.
Image
The value for the Open Graph property og:image.
Site Name
The value for the Open Graph property og:site_name.
In addition to these values, the meta tag for the Open Graph property og:url is also generated and populated with your app's root URL.
Other
Hide from App List
Hide the app from the list of apps shown when a user navigates to the root URL of the Appfarm Client.
App Type
Differentiate between normals apps in production and those in development or for restricted admin purposes. Changing this option may affect billing for your solution, as the number of Normal apps deployed to production is defined as part of your subscription. The options are:
Normal: Available in all environments and uses a regular security configurationDev Only: Only available in the Development environment. Not counted for billing. Most apps in early development will use this option.Config/Admin: Not counted for billing. Requires special permissions held only by the Owners and Maintainers roles. This option is intended for temporary use or basic admin apps for data migration or raw data access.
Disable Connection Notifier
Don't show a notification in the Appfarm Client when it is disconnected from the server. If selected, you need to handle this case manually by referencing the app variable Is Online.
Timers
Manage timers.
Topics
Manage topics.
Timers
If you want to perform an action on a schedule when the app is in use, for example every minute, you can use a timer. Timers can be used to run automatic carousels/slideshows, fetch the latest data from an external API, or other dynamic features.
As an example, say you have a timer that is permanently enabled and has an interval of 30 seconds. When the app is loaded, a 30 second countdown will begin. When it reaches 0 the action specified for On Timeout will be triggered. The countdown will then begin again.
Name
A reference for the timer.
Enabled
Set the timer to always operate by setting the value to true, or set the value according to a data binding, condition, or function.
Interval
The number of seconds between each instance of the timer. The lowest possible value is 1 second, which means you can trigger an action at most every second.
On Timeout
The action to trigger when the timer expires.
Topics
Topics can be used for lightweight communication between components. For example, to synchronize axis selection in charts.
Last updated