Why are certain features not available for Glide pages?

Hello,

I am new to Glide so forgive me, but why are many features which are available while building a mobile app, not available for web apps? Calendars, progress bars, and other components are not available for web apps. It seems that the web app development on Glide is incomplete. Are these features still under development by Glide?

Yes—Glide is carefully adding components to Glide Pages one at a time. Would love to see progress bar, too!

1 Like

Calendar is there if you look for it :wink:

The Checkbox, Like, Favorite, Progress Bars and multicolor options for buttons are components that I wish it had thats missing.

Also wish we had horizontal sliding Lists like on Apps. I know many websites use it and isnt just a mobile thing.

Ya…multicolor buttons would be nice too. My shortlist:

  • Comments Component
  • Progress Bars
  • Button Colors
  • Ratings Component
5 Likes
  • A functional Map on mobile device would be nice (showing all location pins and not defaulting to SF all the time)

  • Location component also would be great

5 Likes

@Robert_Petitto here is an alternative to a progress bar.

<div style="overflow:hidden;border-radius:15px;background-color:#DDDDDD;"">
  <div style="border-radius:15px;background-color:#29577A;height:15px;width:33%">
  </div>
</div>

9 Likes

Most needed for my work would be some kind of Image Gallery/Slider.

Just spend 2 hours in putting together an Image Array and trying to put it to work only to find out later, through the Community, that it does not work on Pages.

PS Does anybody know how to achieve this in the meantime?

So simple. Nice!

1 Like

Please check this.

1 Like

Thanks again for this. So beautiful in a Custom Collection!

5 Likes

Here is a pretty simple workaround until Glide has a Gallery feature for pages IF your images can be uploaded once and don’t require changing

Use Elfsight, a no-code widget maker to create a slider with a URL that can be shown in a WebEmbed element in pages. Elfsight has a lot of customization options that make it nice to use. You will need to upload the images to Elfsight so this is not a dynamic solution, so may or may not work for your specific project.

Here is a link to a demo I threw together to test viability: https://elfsight-gallery-test.glide.page

To make this, you need to create the widget in Elfsight, then grab the widget installation code, then add to a sandbox template url
https://sandbox.elfsightcdn.com/WIDGET_ID and then use that link as the WebEmbed link.

7 Likes

Really cool. Thanks for sharing!

1 Like

Playing around with a thought to make it easier to add images - using a social feed widget instead to show only photos from a specific twitter feed. The idea would be to create a twitter account just for image upload and then display all images uploaded to that account. Still not the real solution we need - to upload images directly in Glide pages, but a workaround that is a little more dynamic. You can see sample of this on the demo now for @glideapps twitter feed.

1 Like

Hola Jeff,

Any idea or trick to recreate what I did time ago but using Pages? Progress Bar Color - #19 by gvalero

I think I’m missing something to get what I want or Page is playing with me and I don’t realize it :roll_eyes:

Thanks!

Are you talking about the horizontal bars that are overlayed on top of the entry components? Are you trying to recreate that overlay? The bar itself would only be a slight modification of how I did it, but overlaying it might be tricky. Maybe possible if you have have a plan that enables a CSS in Pages, but I probably wouldn’t go that route and instead place the bar above or below each entry component.

Or, are you taking about recreating the vertical bars?

The vertical bars Jeff, something like this:

I think I got the settings finally but my bars move from top to bottom (the yellow one) and it’s wrong, the animation bars should move from bottom to top but I can’t find the right setting.

Any suggestion?

Gracias!

OK, I think I figured it out. Here’s something that I think should work. The key is the position:relative in the outer div container and the combination of position:absolute; and bottom:0px in the inner div container. That will make the progress climb from bottom to top.

(- If you remove margin:auto, then it will be left aligned.)
(- I also noticed an issue with low percentages, where the bar wouldn’t look right, so I added overflow:hidden to the outer div container, which makes it look a lot better by containing the inner div only within the outer div. I’ve corrected my original post above with this same change.)

<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:66%;">
  </div>
</div>

image

If you want to get a little bit crazy, then you can combine multiple bars in an html table, and add some headings.

image

This is what I have for the multiple bars with headings. Had to fix some issues because alignment got weird when I started adding headings, but I think it’s pretty stable now.

<table width=100%><tr>

<td style="text-align: center; vertical-align: bottom;">
Unit 1
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:66%;">
  </div>
</div>
</td>

<td style="text-align: center; vertical-align: bottom;">
Unit 2
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:33%;">
  </div>
</div>
</td>

<td style="text-align: center; vertical-align: bottom;">
Unit 3
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:1%;">
  </div>
</div>
</td>

<td style="text-align: center; vertical-align: bottom;">
Unit 4
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:100%;">
  </div>
</div>
</td>

<td style="text-align: center; vertical-align: bottom;">
Unit 5
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:15%;">
  </div>
</div>
</td>

<td style="text-align: center; vertical-align: bottom;">
Unit 6
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:55%;">
  </div>
</div>
</td>

<td style="text-align: center; vertical-align: bottom;">
Unit 7
<div style="margin:auto;overflow:hidden;border-radius:15px;background-color:#DDDDDD;position:relative;height:200px;width:15px;">
  <div style="border-radius:15px;background-color:#29577A;position:absolute;bottom:0px;width:15px;height:96%;">
  </div>
</div>
</td>

</tr></table>
2 Likes

Let me try… thanks!

1 Like

Amazing @Jeff_Hager … you are a crack :muscle:

I just asked for a tip or help and you gave me a whole solution. Use a table to split my bars was something brilliant.

This is how my idea is taking shape, I still have to make some improvements but I know what to do or not use
image

Gracias Jeff, ten un gran fin de semana!

1 Like