Some Tips and Tricks by this Semi Noob! 😅

Hi Everyone :wave:

Hope you’ll well! :muscle:

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 :

Title.mp4 - Google Drive

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 :

String API | Abracadalo API Handbook


3) If you need to search TV Shows using TMTB API this video can help you!

Search TV.mp4 - Google Drive

API Overview — The Movie Database (TMDB)


4) How to connect GIPHY to use GIF's on your Adalo App? Here's how

GIPHY.mp4 - Google Drive


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 :

Image and GIF.mp4 - Google Drive


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 :

Image Slider with Adalo Collections.mp4 - Google Drive


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 :

Pagination with Adalo Collections.mp4 - Google Drive


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 :

New Quote.mp4 - Google Drive

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 :

SheetDB Filter.mp4 - Google Drive


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 :

image

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 :

Embed Facebook.mp4 - Google Drive


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
image
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 :

Show Video stored in Drive.mp4 - Google Drive


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 :wink: :

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!


23) Block Users

Help to get to delete an email in a text property - #4 by dilon_perera


24) Favorites system

Loom | Free Screen & Video Recording Software | Loom


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

Building a simple comments section - #2 by dilon_perera


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 :

Build Real-Time Chat, for real - #12 by dilon_perera


29) Action Cannot Be Completed Message

The reasons that I know why the Action Cannot Be Completed message appears.

  1. Collection Permissions

  2. If that action doesn’t makes sense.

  3. When you reach your storage. In the free plan this happens lot of times!

  4. 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

Classes.mp4 - Google Drive


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!

23 Likes

Nice one Dilon, great stuff here!

1 Like

This is great, must have taken you ages to put this all together, good job!

2 Likes

You’re the man!

2 Likes

Superb tips and trick repository ! Well done !
You could put them all in an adalo App !! :grin::grin::v:

1 Like

Thank you all for reading and replying here!

Appreciated! :facepunch:

2 Likes

Wow @dilon_perera this is so useful!

1 Like

can this be pinned somehow?

1 Like

You can bookmark the post @pushingpandas

3 Likes

You are an angel - THANK YOU!

1 Like

Thank you :slight_smile:

1 Like