Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • 🎯  Solution Guides

  • Low Code Solutions

    Add "Tabs" to your app

    ID Target Link

    Use an address field to display a static street view thumbnail

    Turn your menu into a fixed menu

    Auto close mobile menu

    Display record information in a card

    How to add a back button to your app

    Add a collapsible accordion element to your app

    Code Snippets

    PHP Curl Create New Record

    PHP Get Records With Filters

    Google Scripts - Get record and create new records from connected table

    Save Tables and Fields into Spreadsheet

    Google Scripts - Export all records

    Webhook to save deleted records

    Send Messages to Slack

    Restrict Space and Force Uppercase in a Form

    Building Advanced Features

    Use Validation Rules to Ensure Unique Votes Per User

    Use Record Rules to Create an Audit Log

    Track current inventory with transactions

    Schedule Bookings and Prevent Double Bookings

    Create orders with multiple items and varying quantities

    2 Step Forms

    Unique Record Validation

    Restrict Editing Records to Record Owners

    Sum date/time field

    Duplicate Records

    Advanced App Customization

    How to embed a Tadabase page on another website

    Adding external fonts

    Custom Favicon

    Making apps mobile friendly

    Show date/time as a countdown

    Importing many images at once

    Adding QR Codes

    Adding charts to PDFs

    Customizing your app shortcut for mobile phones

    Animate parts of a page

    Design Customization

    Changing background colors

    Set background colors to the edge of a page

    Change the background of a column

    Add padding around a component

    Using an image as background for a page

    Adding a background image to a row, column, or component

  • Duplicate Connected Records

Categories
🎯 Solution Guides
Advanced App Customiza...
Customizing your app s...

Customizing your app shortcut for mobile phones

While Tadabase does not support native apps or PWAs (progressive web apps) as of yet, you and your users can add a shortcut to your app to the homescreens of your mobile phones and you can customize how your app's shortcut will present and behave when launched by creating a manifest file.

pwa-web-app.png

What is a manifest file? 

Your app's manifest is a JSON file that tells the browser about your app and how it should behave when installed on a mobile device or desktop. A typical manifest file includes the app name, the icons you wish the app to display on installed mobile devices or desktops, and the URL you wish to open when the app shortcut is launched.  (source)

Why use a manifest file?

Creating a manifest file enables you to dictate how your app's shortcut will present and behave when launched on mobile device homescreens. For instance, as seen in the image above, creating a manifest enables you to display your brand's custom logo and colors when launched on a mobile phone.

When users visit your app from the browsers of their mobile phones, they can click on "Add to home screen" and the customized settings that you created in the manifest file will be applied for the app name, icon, splash screen, display mode, etc when the app is launched from your users' mobile device homescreens. 

Creating a manifest file

To create a manifest file for your app shortcut, you may copy the sample manifest file below and customize it to your specific custom app details in Notepad or other editor. 

Sample manifest file: 

{
  "name": "My Tadabase App",
  "short_name": "Project Management",
  "theme_color": "#FF6600",
  "background_color": "#212C3B",
  "display": "minimal-ui",
  "Scope": "/",
  "start_url": "/#!/login",
  "icons": [
    {
      "src": "https://ucarecdn.com/554d3ecc-2271-462d-bbf1-c4f0a566d300/icon72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/ac1d85af-c8d9-4276-ac37-e499b4eb35a4/icon96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/cf61de06-9c48-4d5c-84a3-658b2c4fc7f0/icon128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/d3d54d72-15a0-4836-acd2-07ac58f13486/icon144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/768ffa74-cbbd-413a-bcfd-bb9db0a4b932/icon152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/1addaa34-559b-414d-80f4-fc54ca30ac1a/icon192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/3ace464d-febf-48b1-9ab4-08609a3a76c6/icon384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "https://ucarecdn.com/5ac2c160-c958-4f98-96f9-391aa4e839ae/icon512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Click here to view a list of properties that are available for your custom manifest file: https://web.dev/add-manifest/

Uploading your manifest file

Once you've created your manifest file, upload it to a location where CORS will not be an issue. Save the link to this JSON file as you will need it in the next step. 

Hosting this file on Tadabase AWS account will not work since we restrict the CORS. Alternatively, you can use Github Pages to store the manifest file and use the raw URL for the next step. 

In GitHub create a new repo and make sure you set it to Public. 

newrepo.jpg

Next, click Create New File and call it manifest.json, paste in your json code and click Commit at the bottom: 

3.jpg

Browse to the file and click "Raw"

4.jpg

Copy the URL of the page opened when you clicked on "Raw."

Add your manifest to your app

In the Settings tab of your app navigation bar under Custom Header/Footer Code, enter your manifest link within the Custom Header Code box.

<link rel="manifest" href="https://raw.githubusercontent.com/tadabasecode/manifest/main/manifest.json">

 

Testing your Manifest file

To test if your browser is successfully loading your manifest file, visit your site/app in Google Chrome, right-click to open Developer Tools, click on the Application tab, and select Manifest.

 

How did we do ?

Previous Article
Adding charts to PDFs
Next Article
Animate parts of a page
Article Navigation
  • What is a manifest file?
  • Why use a manifest file?
  • Creating a manifest file
  • Uploading your manifest file
  • Add your manifest to your app
  • Testing your Manifest file
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational