Hi Everyone 
Hope you’ll well! 
Happy to share some Tips and Tricks that I learnt!
1) Let's say that you want to add a image automatically for that Item's Name.
You can do this with API’s ( Pixaby,Unsplash and some other API’s ).But one day I learnt a new way of doing this from a video that made by Jesus Glide Expert : LESSON 52 Glideapps tricks: Add images without having your users uploading them to your app - YouTube
It’s with Unsplash Hotlinking without API’s!
Here’s the video how you can do it :
Unsplash Images.mp4 - Google Drive
And here’s the URL :
https://source.unsplash.com/random/?{name} ( Replace the {name} with the magic text of that item )
2) Let's say that you need to convert a word to a simple word ( Lowercase ) then this video can help you!
And you can convert a word to Uppercase , Title ( like the first word starts with Capital ) , and more with Abracadalo!
Convert a word to Lowercase :
Lowercase Abracardo.mp4 - Google Drive
Documentation :
String API | Abracadalo API Handbook
( You can do this with setting the Input to Lowercase but that setting doesn’t allow to input capital letters for users. )
Convert a word to Title :
Documentation :
String API | Abracadalo API Handbook
And for convert a word to Uppercase also same as Lowercase and Title but the only thing has to be change is the Base URL and the example value that you entered to the input.
Documentation :
3) If you need to search TV Shows using TMTB API this video can help you!
4) How to connect GIPHY to use GIF's on your Adalo App? Here's how
5) Let's say that you need to add a way to post GIF's for Users and with ability to add images too!
There is no component for this as far as I’m aware but you can do this with GIPHY!
You can connect GIPHY as a External Collection like on the 4th tip and then you can do like this :
6) Still there is no way to add a Name on the Image Slider. But there is a option for add a action that we can make a workaround.
In this video I used Airtable but you can do this with Adalo Collections too!
With Airtable :
Image Slider with Airtable.mp4 - Google Drive
With Adalo Collections :
7) Pagination for Airtable. And you can do the same with Adalo Collections too!
How to do with Airtable :
Pagination with Airtable.mp4 - Google Drive
How to do with Adalo Collections :
8) Let's say that you have a letters collection and a Names collection and need to filter the Names collection according to the clicked letter. Here's how
With Airtable :
Airtable Names start with a letter.mp4 - Google Drive
With Adalo Collections :
Filtering Names by a letter using Abracadalo.mp4 - Google Drive
9) I need to display a quote for the user but how? Here's how
With Rapid API :
With Abracadalo :
Abracadalo New Quote.mp4 - Google Drive
( In here I used Rapi API and Abracadalo. But there are more API’s that can do the same job! )
10) I have connected one of my Google sheet as a External Collection with SheetDB and I need to filter the results. But I don't know how?
Credit goes to Karimo! : Problem with sheetdb and query parameters - #2 by karimoo
Here’s a video :
11) Show Facebook Page inside the app
When I tried to a show a Facebook Page through the Web View component I got a message like this :
But I need to show the Facebook Page on my app. Is there a way? I have found a way to show a Facebook Page through the Page Plugin in the MetaforDevelopers website ( Facebook Developers website ). The other way is add a External Link action to a button and add that Facebook Page URL and then on the Use In-app Browser on the Advanced Options to open it inside Facebook ( Facebook Browser ).
A Video :
12) How can I show a Image or a GIF that stored in My Google Drive Account inside the app?
When I make the access of that Image to everyone with the link and copy the Share URL and paste it in the Image component I don’t see the Image.
How can I show a image on the image component that stored in my Google Drive Account? You can show that with formatting the URL a bit!
Normally when you copy the share URL it looks like this :
https://drive.google.com/file/d/1xBHlysnCEnzxhDTEJTwkLdWrNhOyxRc7/view?usp=sharing
In here you need to format like this :
The Full Share URL :
https://drive.google.com/file/d/1xBHlysnCEnzxhDTEJTwkLdWrNhOyxRc7/view?usp=sharing
Cut out these parts :
this one file/d/ and this one /view?usp=sharing
After cutting that parts of the URL you will get the URL like this :
https://drive.google.com/1xBHlysnCEnzxhDTEJTwkLdWrNhOyxRc7
Then add uc?id= after the .com/.
After adding you will get the URL like this :
https://drive.google.com/uc?id=1xBHlysnCEnzxhDTEJTwkLdWrNhOyxRc7
And then you will see that image :
A Image :
A GIF :
GIF.mp4 - Google Drive
13) How to show a video that stored in my Google Drive Account?
You can copy the iframe of that video like this :
How do I embed videos from my Google Drive / Google Photos into a Blogger post? Embed is no more??? - Blogger Community
https://storage.googleapis.com/support-forums-api/attachment/message-1996729-13789914067147966787.gif
and paste it in the Pragmaflow Better Web view component! ( How to Download : PragmaFlow's Adalo Marketplace Reopened - YouTube )
Here’s a video :
14) When I add the share link to input component I want the 12th tip to do automatically when I click a button. How do I do that?
If I can get the share URL ID then this can be done! But how I get it? You can do this with Abracadalo Substract API !
String API | Abracadalo API Handbook
I copied and pasted lot of share URL’s and counted how many characters are in the ID of that URL. And I got 33 for every URL. Then I counted from the beginning of the URL until the URL’s ID start character and the count is 32. Now we can use 32 for the start parameter for the Abracadalo Subtract API and 33 for the length parameter
Ok. Thanks! But I’m a visual learner and I didn’t fully understood how to do this. LOL!
Don’t worry! I made a video 
:
Auto Show after adding share URL.mp4 - Google Drive
And also change that share URL access to public if you haven’t done it yet before entering!
15) I have another problem with showing a PDF! I have a PDF that stored in my Google Drive Account but how can I show that PDF on my app? Here's how
Once you copy the URL you get the URL like this :
https://drive.google.com/file/d/1RkJXfe8soaj2AVSmvJFE1VGPxnPdixAr/view?usp=sharing
In here remove the part that after the ID/. Once I removed I get this.
https://drive.google.com/file/d/1RkJXfe8soaj2AVSmvJFE1VGPxnPdixAr/
And then add preview there and check the app. At the end the URL will be like this.
https://drive.google.com/file/d/1RkJXfe8soaj2AVSmvJFE1VGPxnPdixAr/preview
And also change that share URL access to public if you haven’t done it yet!
If you want to auto display once I add the share URL you can do the same like 14th point. Paste this URL https://drive.google.com/file/d/{ID}/preview on the Web view component and replace {ID} with Current URL ( according to the 14th tip video )>ID.
16) I have a folder that created on my Google Drive Account and need to show that in my app! But how can I show it?
Do like this :
Make that Folder as Public ( Anyone can view ) and then format the URL like this :
Once you copied the Folder URL you will get the URL like this :
https://drive.google.com/drive/folders/1VpUPUKxEwPlHbARvSKcK3HABnwD7iSRI?usp=sharing
Then in here cut the drive/folders/ part and add embeddedfolderview?id= there and then cut the ?usp=sharing part and add #grid there. Then you will get a URL like this :
https://drive.google.com/embeddedfolderview?id=1VpUPUKxEwPlHbARvSKcK3HABnwD7iSRI#grid
And paste this URL on the Web view component. If you need the Folder looks like a list then add #list instead of #grid.
Grid :
List :
If you need to add automatically you can do the same as 14th point!
17) 404 Not Found error message
You have added a website to the Web view through the Magic text or manually but you are getting a error message like this 404 error. Not Found. Check if there is a space at the end of the URL!
18) How to add Notifications for 1v1 chats to the Real Time Chat component Pragmaflow created or for a normal chat ( custom list )?
Here’s how :
Real Time Chat Notifications.mp4 - Google Drive
( Credit goes to Victor! : Adalo hints: chat app enhancements - YouTube )
19) How to Flip a list Card?
You can do this with Pragmaflow Better Web view component! Here’s how :
Flip List Card.mp4 - Google Drive
The Code ( You can find it here too ! : How To Create a Flip Card with CSS ) :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 380px;
height: 200px;
perspective: 1000px;
border-radius: 12px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border-radius: 12px;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
border-radius: 12px;
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 12px;
}
.flip-card-front {
background-color: #bbb;
color: black;
border-radius: 12px;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
border-radius: 12px;
}
</style>
</head>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="image" alt="Post" style="width:380px;height:250px;border-radius: 12px">
</div>
<div class="flip-card-back">
<br>
<h2>Title : title </h2>
<p>Description : desc </p>
<p>Added By : added </p>
</div>
</div>
</div>
</body>
</html>
20) How to Fade in a list card?
You can do this with Pragmaflow Better Web view component! Here’s how :
Fade In list card.mp4 - Google Drive
The Code ( You can find it here too! : How To Create Image Hover Overlay Effects ) :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 380px;
}
.image {
display: block;
width: 380px;
height: 250px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 250px;
width: 380px;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="image" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Title: title<br><br>Added By: added</div>
</div>
</div>
</body>
</html>
21) Magnifier Glass?
You can do this with Pragmaflow Better Web veiw component! Here’s how :
Magnifier Glass.mp4 - Google Drive
The Code ( You can find the code here too! : How To Create an Image Magnifier Glass ) :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}
.img-magnifier-container {
position:relative;
}
.img-magnifier-glass {
position: absolute;
border: 3px solid #000;
border-radius: 50%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: mywpx;
height: myhpx;
}
</style>
<script>
function magnify(imgID, zoom) {
var img, glass, w, h, bw;
img = document.getElementById(imgID);
/*create magnifier glass:*/
glass = document.createElement("DIV");
glass.setAttribute("class", "img-magnifier-glass");
/*insert magnifier glass:*/
img.parentElement.insertBefore(glass, img);
/*set background properties for the magnifier glass:*/
glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";
glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
bw = 3;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
/*execute a function when someone moves the magnifier glass over the image:*/
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/*prevent the magnifier glass from being positioned outside the image:*/
if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
if (x < w / zoom) {x = w / zoom;}
if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
if (y < h / zoom) {y = h / zoom;}
/*set the position of the magnifier glass:*/
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/*display what the magnifier glass "sees":*/
glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
</script>
</head>
<body>
<div class="img-magnifier-container">
<img id="myimage" src="image" width="100%" height="auto">
</div>
<script>
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
magnify("myimage", 3);
</script>
</body>
</html>
22) How to have a default image if the user didn't upload a profile photo?
Here how I did it with Boringavatars :
Default Profile Image.mp4 - Google Drive
You can put your own 5 color Hex codes!
24) Favorites system
25) Auto Populate display issue
When you add a list except Custom List and connect the list to a collection the values automatically populated. Delete them all and add them again otherwise sometimes they don’t display!
26) Add a comments section to your app
27) Layout
Use Rectangles as containers!
28) Display Full screen issue
The web view, map, image, pragmaflow real time chat components doesn’t fill the full screen. For that you need to stretch the component a bit!
A example for Pragmaflow Real Time Chat Component :
29) Action Cannot Be Completed Message
The reasons that I know why the Action Cannot Be Completed message appears.
-
Collection Permissions
-
If that action doesn’t makes sense.
-
When you reach your storage. In the free plan this happens lot of times!
-
Sometimes if this three points are correct and still displaying then it’s a bug in Adalo as far as I’m aware.
30) Assign something to multiple Users
31) When Image picker is on a Custom Form Validation
If you are using Custom Forms with the Image Picker you need to add a visibility condition to the button that only appears when a image is uploaded! Adalo added a feature that we can access the Image picker URL and set the visibility conditions base on that.
A Video :
Custom Form Image Picker Visibilty Condtion.mp4 - Google Drive
Let me know if these are helpful!
Thanks for reading!
Have a great day!
