🆕 Custom Component (AI Generated)

Strange - my App becomes just a blank white screen.

1 Like

You can inspect and get the code, then try to edit its background color, paste back into the HTML version of the component.

Yea I tried, but couldnt identify it. I also copied the html and looked like a giant rat nest where identifying what was adding then whole background was beyond my skillset lol

image

It was working for me yesterday. If you have this part like me, it’s the “bg” thing.

<body
  x-data="state"
  class="flex items-center justify-center bg-[#0a0a0a]"
  style="height: auto !important; padding: 0;"
>
1 Like

Ok cool, I will take a closer look at mine! Does your bg adapt to dark mode? When I applied dark mode, it only adjusted the next and toggle.

My client had dark mode set for his app so I didn’t have to adapt dynamically. I think we can make it work with CSS though.

Found my code:

<body x-data="state"
class="flex items-center justify-center bg-transparent">

Looks like the background should not appear at all. Changed to to your color and didnt have any impact. Also tried V2 and made it worse lol

Posting again - I have added a custom component to a couple of different Apps. They all work well in the editor. However, when testing the live published versions on PC or mobile, the screen briefly flashes up the correct screen then goes 100% blank. Deleting the new components restores the apps back to normal. Clearly the new custom components are responsible.

I believe others are experiencing this issue too… any tips or pointers please?

1 Like

Custom components currently only work in the builder. According to info we got from David, they should work in the player (published App) later this week.

5 Likes

I worked that out yesterday… I had an app that went blank … sometimes. It turned out that it was using a custom component (the one I had with the audio player) that blanked out screens. I finally worked out that it was the custom component when users used it… so I then switched it off (and achieved my audio player in the normal way).

2 Likes

I try to make a more collaborative text editor, where users have their own text colors. Best would be, if the color is stored in the user profile table.
So far, they need to choose them at every text editor:

The following prompt recolors the whole text, when I change the user in the editor:

Newly added text is colored in the users’ own colors. These colors are stored in Text_Color

Do you have an idea for a better prompt?
Any advice is highly appreciated.

I truly love tath, see what i do:

GravaodeTela2024-07-11175321-ezgif.com-video-to-gif-converter

3 Likes

At least my custom component, which use the HTML mode, is working normally.

1 Like

This is unbelievably awesome. Like magic I’m stunned

Looks like the new custom component is down today.

We haven’t merged it.

3 Likes

Absolutely great, thanks.

When using HTML custom component, can we link to Glide actions?
without doing a whole javascript inside the html component.

I want my 3 pricing cards to trigger 3 differents actions. By clicking on it. You can swipe the cards.
Show webview payment for offer basic
Show webview payment for offer premium
Show webview payment for offer entreprise

My UI work around for now: a multiple buttons component below…

Screenshot 2024-07-14 at 20.00.48

Here’s my attempt yesterday.

I think the best workflow for me is to prompt either using Glide’s AI version, or using Claude/OpenAI.

Then, I get the underlying code that the LLM generates, connect the actions to the component, and reference them where I want to in the code. That makes sure I get the full control of the code and not relying on the prompt (which is impressive from Glide nevertheless).

i have this whole piece of html/css in a single html custom component with a button designed in it.
how to connect the button part to the normal glide actions? there is an ID for action or something like that?

Maybe i didn’t understand your answer Thinh
i know how to use rich text actions.
But with the new custom component HTML generator… ?