URLs not clickable in data grid

Ask for Help from Community
1

Hi all,

Here’s my project: MP Second Jobs

I have a few questions:

  • If you scroll to the right of the data grid, you’ll see a Source column with URLs. These don’t seem to be clickable for the visitor. Does anyone have a solution?

  • The data grid loads very very slowly and is laggy - even on desktop. On mobile, the ‘Earnings summary’ page doesn’t seem to be loading at all. Any ideas?

Also - side point to creators of the app - I wish there was a way to have some control over the default width of the columns so that I could make the Source column fit the page. :sweat_smile:

Best,
Andrew

2

Try changing the column type to a URL column type in the data editor.

1 Like
3

It is set as URL in the data source and the data grid layout page (see below). But I can also see the ‘A’ next to the column heading when it’s published, indicating it is publishing as a text-type column, which is strange.

image

4

I noticed this when I looked at your page earlier, and almost commented on it then.
I think you’re loading up too much data in the Data Grid.
I’m not sure if pagination will help, but I’d give that a try for a start.

But personally, I think I’d switch to a different collection style - probably a list. The benefit of this is that you get list item actions, so each item would be clickable.

1 Like
5

Thanks @Darren_Murphy . I chose a data grid collection as I want to give the visitor a quick snapshot of the data i.e., now they can immediately scroll down through all of the MPs and quickly see who’s earning a lot, who’s not earning anything etc.

I don’t want to hide that information in a table or a list. I like that it’s all immediately available to view. Unless there’s a trick I’m missing with tables and lists?

6

Then I guess I’m not not sure. I would probably take @Darren_Murphy’s advice and change your approach. Either a simpler collection where you can click to view more details, or use template columns and joined list columns to build out an html table that you can display in a rich text component.

1 Like
7

Thanks @Jeff_Hager . Does seem strange why it isn’t being published as URL-type - must be a glitch? For the latter of your points, I’ll need to look up the Glide tutorials (going through them at the moment) as it’s Japanese to me right now :stuck_out_tongue: . But I’ll keep in mind for once I’ve learned a bit more about Glide.

8

If you’re game, I could show you a way to embed Datatables in a Glide Web View component.
It requires a little bit of coding, but I see that you’re a programmer so that shouldn’t be a problem.

So you could have something like this:

Screen Shot 2022-12-27 at 8.56.16 PM
Screen Shot 2022-12-27 at 8.56.16 PM1228×618 177 KB

Caveats:

  • Web embed is a paid Glide Feature, so if you’re on a Free Plan then you can’t use this option.
  • This also has its limits when it comes to the amount of data you can load in a single table. The absolute limit is one million characters, but it starts bogging down at about 300k.
  • Although the table is sortable/filterable, individual rows are not clickable.
3 Likes
9

Hi @Darren_Murphy - I’m interested! I’m on the starter package so I should have web embeds. The amount of data I load is: for the first page ~650 rows/~60K characters; for the second page ~850-1000 rows/~125K characters. So, should be OK?

10

Yeah, 125k shouldn’t be a problem.

Okay, so the general idea is:

  • Create a HTML table for your data, using templates and a joined list
  • Create a HTML document using a template, which includes the following:
    – CDN links for the required JavaScript and CSS
    – The HTML table
    – Additional JavaScript to initialise the data table
  • Use a bit of JavaScript to URI encode the HTML document
  • Display the URI in a web view

Here’s a video that provides a walk through.

The App I’m working with in the video is a concept I built a while back, just as a proof of concept. As you’ll see in the video, the generated URI comes out at about 118k characters. The initial table load takes a second or two, but once it’s loaded it performs fine.

The JavaScript for generating the URI:

return `data:text/html;charset=utf-8,${encodeURIComponent(p1)}`;

And the template I use for the HTML doc:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    {links}
    <script type="text/javascript" class="init">
    $(document).ready(function () {
      $('#books').DataTable({
        colReorder: {colreorder},
        dom: '{dom}',
        buttons: [
            {buttons}
        ]
      });
    });
    </script>
  </head>
  <body>
    {table}
  </body>
</html>

Yours will probably be a bit different, depending on which options you want included - buttons & DOM options, etc.
Consult the datatables docs to learn all the gory details.

Let me know how you get on.

5 Likes
11

Awesome @Darren_Murphy, thanks so much. I’ve been playing with a plain old web embed today (linked to an excel spreadsheet hosted on my GitHub). I’ll take a closer look at your process soon - vid is very helpful too. Thank you! :slight_smile: