# Code Library

**URL:** https://community.fliplet.com/c/code-library/12.md

[Latest](https://community.fliplet.com/latest.md) · [Categories](https://community.fliplet.com/categories.md) · [Tags](https://community.fliplet.com/tags.md)

---

## [About the Code Library category](https://community.fliplet.com/t/about-the-code-library-category/305)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [May 12, 2022, 10:22am UTC](https://community.fliplet.com/t/about-the-code-library-category/305 "2022-05-12T10:22:41Z")

</div>

---

## [Show only a specific user "type" in Chat Component](https://community.fliplet.com/t/show-only-a-specific-user-type-in-chat-component/682)

<div class="topic-metadata">

**Author:** [@DBevan](https://community.fliplet.com/u/DBevan)\
**Replies:** 4\
**Last updated:** [October 19, 2024, 5:55pm UTC](https://community.fliplet.com/t/show-only-a-specific-user-type-in-chat-component/682 "2024-10-19T17:55:08Z")

</div>

Is there any way to filter the “Chat” component by a user type? For example, my chat component is linked to the user data source but I do not want to display any of the admins. There is a column in the user DS to distin…

---

## [Show/hide a form question](https://community.fliplet.com/t/show-hide-a-form-question/393)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [July 14, 2022, 2:52pm UTC](https://community.fliplet.com/t/show-hide-a-form-question/393 "2022-07-14T14:52:46Z")

</div>

PRE-REQUISITES See the following article before reading the below - Form JS APIs | Fliplet Developers Documentation Show or hide certain questions (fields) in a form (survey) You may wish to hide certain form fields (a…

---

## [Send a notification at a specified time](https://community.fliplet.com/t/send-a-notification-at-a-specified-time/358)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [July 1, 2022, 9:48am UTC](https://community.fliplet.com/t/send-a-notification-at-a-specified-time/358 "2022-07-01T09:48:16Z")

</div>

Send a notification/alert to users on mobiles (not browsers) at a specified time It’s possible to schedule a notification to be sent at a specified time. This is best done from Fliplet Studio but it can also be done with…

---

## [Get/set data from a user using a form component](https://community.fliplet.com/t/get-set-data-from-a-user-using-a-form-component/342)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [June 30, 2022, 9:25am UTC](https://community.fliplet.com/t/get-set-data-from-a-user-using-a-form-component/342 "2022-06-30T09:25:37Z")

</div>

Ask the user to fill in a form then use the data as you wish The simplest way to gather data from a user is to use Fliplet’s form component. Once you’ve dragged and dropped one on to a screen you can reference it with J…

---

## [Add analytics and event tracking to your app](https://community.fliplet.com/t/add-analytics-and-event-tracking-to-your-app/345)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [June 30, 2022, 10:43am UTC](https://community.fliplet.com/t/add-analytics-and-event-tracking-to-your-app/345 "2022-06-30T10:43:36Z")

</div>

Track app usage, screen views, user interactions and other custom events PRE-REQUISITES Depending on your jurisdiction or the jurisdiction of your app’s users, you may be required to comply with data protection and pri…

---

## [Custom style a specific component](https://community.fliplet.com/t/custom-style-a-specific-component/378)

<div class="topic-metadata">

**Author:** [@aaberlem](https://community.fliplet.com/u/aaberlem)\
**Replies:** 0\
**Last updated:** [July 6, 2022, 2:08pm UTC](https://community.fliplet.com/t/custom-style-a-specific-component/378 "2022-07-06T14:08:55Z")

</div>

Edit component styles even if they’re not available in the appearance options It’s possible to change many of the appearance settings by selecting an element in Fliplet Studio and clicking the paint brush icon to open t…

---

## [Check the current date or time](https://community.fliplet.com/t/check-the-current-date-or-time/390)

<div class="topic-metadata">

**Author:** [@Deb](https://community.fliplet.com/u/Deb)\
**Replies:** 0\
**Last updated:** [July 7, 2022, 2:40pm UTC](https://community.fliplet.com/t/check-the-current-date-or-time/390 "2022-07-07T14:40:45Z")

</div>

Check the current date or time Obtain the current date or time when an app is running (local or UTC time) You can get the time and date that a user is using a device with JavaScript. Fliplet comes pre-installed with a l…

---

## [Send a push notification](https://community.fliplet.com/t/send-a-push-notification/396)

<div class="topic-metadata">

**Author:** [@Deb](https://community.fliplet.com/u/Deb)\
**Replies:** 0\
**Last updated:** [July 15, 2022, 10:45am UTC](https://community.fliplet.com/t/send-a-push-notification/396 "2022-07-15T10:45:44Z")

</div>

PRE-REQUISITES For the following code examples to work, you will need to add the fliplet-notifications library to your app. To add it follow these steps: When in Fliplet Studio’s Edit screen, open the Developer Option…

---

## [Sorting data](https://community.fliplet.com/t/sorting-data/327)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [May 26, 2022, 3:52pm UTC](https://community.fliplet.com/t/sorting-data/327 "2022-05-26T15:52:55Z")

</div>

PRE-REQUISITES For the following code examples to work, you will need to add Fliplet’s Data Sources API to your app. To add it follow the steps referenced here. Reordering a list or table of data to be used in your app …

---

## [Generate a confirmation popup](https://community.fliplet.com/t/generate-a-confirmation-popup/363)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [July 1, 2022, 10:00am UTC](https://community.fliplet.com/t/generate-a-confirmation-popup/363 "2022-07-01T10:00:33Z")

</div>

PRE-REQUISITES For the following code examples to work, you will need to add Fliplet’s Data Sources API to your app. To add it follow the steps referenced here. A simple way to ask a user to agree or disagree with some…

---

## [Delete data from a Fliplet Datasource](https://community.fliplet.com/t/delete-data-from-a-fliplet-datasource/383)

<div class="topic-metadata">

**Author:** [@aaberlem](https://community.fliplet.com/u/aaberlem)\
**Replies:** 1\
**Last updated:** [July 22, 2022, 5:51pm UTC](https://community.fliplet.com/t/delete-data-from-a-fliplet-datasource/383 "2022-07-22T17:51:49Z")

</div>

PRE-REQUISITES For the following code examples to work, you will need to add Fliplet’s Data Sources API to your app. To add it follow the steps referenced here. Removing an entry (ie a row) of data from a Fliplet Data …

---

## [Show a message if device is offline or on a slow network](https://community.fliplet.com/t/show-a-message-if-device-is-offline-or-on-a-slow-network/394)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [July 14, 2022, 2:56pm UTC](https://community.fliplet.com/t/show-a-message-if-device-is-offline-or-on-a-slow-network/394 "2022-07-14T14:56:14Z")

</div>

Let users know that their device is offline or has a slow network connection. This is useful as certain features might not work if the app is offline or has a slow connection. Paste the following code in the global Javs…

---

## [Generate a toast popup](https://community.fliplet.com/t/generate-a-toast-popup/355)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [July 1, 2022, 9:40am UTC](https://community.fliplet.com/t/generate-a-toast-popup/355 "2022-07-01T09:40:24Z")

</div>

A way to notify a user of something in an unobtrusive way Regular toast popup on web Regular toast popup on mobile Minimal toast popup on web Minimal toast popup on mobile A Fliplet toast is a small non-intrusiv…

---

## [Check the user’s device type](https://community.fliplet.com/t/check-the-user-s-device-type/391)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [July 7, 2022, 3:02pm UTC](https://community.fliplet.com/t/check-the-user-s-device-type/391 "2022-07-07T15:02:53Z")

</div>

Identify if a user is using a mobile, tablet or desktop to view the app Fliplet automatically detects the type of device being used to view an app. Fliplet uses Modernizr (v3.5.0) to help developers target users with spe…

---

## [Animation: Fade in/out](https://community.fliplet.com/t/animation-fade-in-out/344)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [June 30, 2022, 10:31am UTC](https://community.fliplet.com/t/animation-fade-in-out/344 "2022-06-30T10:31:04Z")

</div>

Make a screen element fade in or fade out over a certain timeframe Simple animations can be created with CSS by defining a start and end position and the duration taken to transition between these two states. The CSS th…

---

## [Before going to a new screen](https://community.fliplet.com/t/before-going-to-a-new-screen/341)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [June 30, 2022, 9:24am UTC](https://community.fliplet.com/t/before-going-to-a-new-screen/341 "2022-06-30T09:24:06Z")

</div>

Trigger something to happen before the user changes screen PRE-REQUISITES For the following code examples to work, you will need to add Fliplet’s Data Sources API to your app. To add it follow the steps referenced here.…

---

## [Get data from two or more related Fliplet Data Sources](https://community.fliplet.com/t/get-data-from-two-or-more-related-fliplet-data-sources/389)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [July 7, 2022, 11:10am UTC](https://community.fliplet.com/t/get-data-from-two-or-more-related-fliplet-data-sources/389 "2022-07-07T11:10:56Z")

</div>

Gather data from multiple connected Data Sources using one to link to another PRE-REQUISITES For reference see here: Data Sources JS APIs | Fliplet Developers Documentation For the following code examples to work, you …

---

## [Get data from a Fliplet Data Sources](https://community.fliplet.com/t/get-data-from-a-fliplet-data-sources/388)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [July 7, 2022, 10:47am UTC](https://community.fliplet.com/t/get-data-from-a-fliplet-data-sources/388 "2022-07-07T10:47:43Z")

</div>

Getting data for your app from Fliplet’s cloud based Data Sources PRE-REQUISITES Please see the following before reading the below: Data Sources JS APIs | Fliplet Developers Documentation For the following code example…

---

## [Load a List (from data source) with entries based on a specific date](https://community.fliplet.com/t/load-a-list-from-data-source-with-entries-based-on-a-specific-date/387)

<div class="topic-metadata">

**Author:** [@Mel](https://community.fliplet.com/u/Mel)\
**Replies:** 0\
**Last updated:** [July 7, 2022, 10:12am UTC](https://community.fliplet.com/t/load-a-list-from-data-source-with-entries-based-on-a-specific-date/387 "2022-07-07T10:12:16Z")

</div>

Load data entries based on a specific date Note: for basic filtering, you should use the LFD filters detailed here. Code should only be used code for very custom filtering. Often you will have data sources with a Date f…

---

## [On form field update](https://community.fliplet.com/t/on-form-field-update/386)

<div class="topic-metadata">

**Author:** [@aaberlem](https://community.fliplet.com/u/aaberlem)\
**Replies:** 0\
**Last updated:** [July 6, 2022, 5:27pm UTC](https://community.fliplet.com/t/on-form-field-update/386 "2022-07-06T17:27:05Z")

</div>

Trigger an action when a form entry is changed by a user. Such as validating the data or checking the value against an answer. The following code allows you to do something based on a form field being updated. The code …

---

## [On form load](https://community.fliplet.com/t/on-form-load/385)

<div class="topic-metadata">

**Author:** [@aaberlem](https://community.fliplet.com/u/aaberlem)\
**Replies:** 0\
**Last updated:** [July 6, 2022, 5:19pm UTC](https://community.fliplet.com/t/on-form-load/385 "2022-07-06T17:19:56Z")

</div>

Trigger an action when a form loads, such as pre populating a form with existing data When working with Fliplet’s form component you may want to do something once the form has loaded. A common example would be to prepop…

---

## [On form submission error](https://community.fliplet.com/t/on-form-submission-error/384)

<div class="topic-metadata">

**Author:** [@aaberlem](https://community.fliplet.com/u/aaberlem)\
**Replies:** 0\
**Last updated:** [July 6, 2022, 2:58pm UTC](https://community.fliplet.com/t/on-form-submission-error/384 "2022-07-06T14:58:58Z")

</div>

Do something when a form fails to submit the entries (eg, there was a server error) If a form submit event is triggered (by a user pressing a submit button or by submit being triggered programmatically) and the data sub…

---

## [Submit a form](https://community.fliplet.com/t/submit-a-form/382)

<div class="topic-metadata">

**Author:** [@aaberlem](https://community.fliplet.com/u/aaberlem)\
**Replies:** 0\
**Last updated:** [July 6, 2022, 2:41pm UTC](https://community.fliplet.com/t/submit-a-form/382 "2022-07-06T14:41:41Z")

</div>

Submit a form without needing a submit button to be pressed The conventional way for a user to submit a form is for the user to press a submit button. However, some modern interfaces auto save form data automatically wh…

---

## [Change text/HTML dynamically](https://community.fliplet.com/t/change-text-html-dynamically/381)

<div class="topic-metadata">

**Author:** [@aaberlem](https://community.fliplet.com/u/aaberlem)\
**Replies:** 0\
**Last updated:** [July 6, 2022, 2:38pm UTC](https://community.fliplet.com/t/change-text-html-dynamically/381 "2022-07-06T14:38:56Z")

</div>

Dynamically change the text in your app To programmatically change the text in your app you first need to identify the text component you wish to change. You can do this in the Developer Options by locating the HTML of …

---

## [On form submission](https://community.fliplet.com/t/on-form-submission/380)

<div class="topic-metadata">

**Author:** [@aaberlem](https://community.fliplet.com/u/aaberlem)\
**Replies:** 0\
**Last updated:** [July 6, 2022, 2:30pm UTC](https://community.fliplet.com/t/on-form-submission/380 "2022-07-06T14:30:50Z")

</div>

Do something when a form is submitted (eg, save it to a datasource) It’s possible to run some custom code just before or just after form data is sent from a user’s device to a data source (or a third party database). S…

---

## [Get or save data with Fliplet’s Data Integration Service](https://community.fliplet.com/t/get-or-save-data-with-fliplet-s-data-integration-service/379)

<div class="topic-metadata">

**Author:** [@aaberlem](https://community.fliplet.com/u/aaberlem)\
**Replies:** 0\
**Last updated:** [July 6, 2022, 2:18pm UTC](https://community.fliplet.com/t/get-or-save-data-with-fliplet-s-data-integration-service/379 "2022-07-06T14:18:26Z")

</div>

Using Fliplet’s Data Integration Service to integrate external databases efficiently and securely Fliplet’s Data Integration Service is a more advanced setup for integration with third party data sources. You will need …

---

## [Check the user’s location with GPS](https://community.fliplet.com/t/check-the-user-s-location-with-gps/377)

<div class="topic-metadata">

**Author:** [@aaberlem](https://community.fliplet.com/u/aaberlem)\
**Replies:** 0\
**Last updated:** [July 6, 2022, 2:00pm UTC](https://community.fliplet.com/t/check-the-user-s-location-with-gps/377 "2022-07-06T14:00:27Z")

</div>

Get the coordinates of a user’s device in longitude and latitude To get the user’s location you can use HTML5 Geolocation which is supported on all modern browsers and mobile devices (though a user may choose to conceal…

---

## [On button or image tap (or click)](https://community.fliplet.com/t/on-button-or-image-tap-or-click/376)

<div class="topic-metadata">

**Author:** [@aaberlem](https://community.fliplet.com/u/aaberlem)\
**Replies:** 0\
**Last updated:** [July 5, 2022, 10:37pm UTC](https://community.fliplet.com/t/on-button-or-image-tap-or-click/376 "2022-07-05T22:37:25Z")

</div>

Trigger something to happen when a button or image is tapped or clicked Fliplet’s Button and Image components allow you to select an action when they are tapped. To set this, navigate to the component’s settings (select…

---

## [Filter data](https://community.fliplet.com/t/filter-data/375)

<div class="topic-metadata">

**Author:** [@aaberlem](https://community.fliplet.com/u/aaberlem)\
**Replies:** 0\
**Last updated:** [July 5, 2022, 10:20pm UTC](https://community.fliplet.com/t/filter-data/375 "2022-07-05T22:20:32Z")

</div>

Select a subset of your data based on a filtering criteria PRE-REQUISITES For the following code examples to work, you will need to add Fliplet’s Data Sources API to your app. To add it follow the steps referenced here.…

[Next page](https://community.fliplet.com/c/code-library/12.md?page=1)
