Add icon to identify in the pages list when it has been set to load as a modal popup

Feature Requests
1

It would be really helpful to add some kind of icon automatically next to a page as shown in the list of pages interface so you can see if that page is setup for a modal popup.

Here is a graphic that shows what I mean.

modal
modal737Ă—59 984 Bytes

If the page has been set to display as a modal popup the system will put a small icon of some description next to the page name so you can easily see that.

Because the name you give to the page also becomes the name it takes in the menu, there is no way to add the information to the page name without it rendering on the front end. If I had some kind of visual signpost in the back end it would make it much easier to work with because in a case that I have two forms with the information, but one is modal and one is a dedicated page, I can easily distinguish from them.

Cheers.

2

I appreciate that one of the key points is “automatic”, however, you could use a Window (or Mac) emoji.

image
image1228Ă—1104 94.7 KB

3

Thanks, that’ll do for now :slight_smile:

4

Regarding modals - you may find this of interest if you’ve not discovered the option yet :blush:

1 Like
5

Discovered and using intensely but thanks for this share to see an example.

1 Like
6

Hello,

I do this for almost all my modals. I use FA icons and add them to the Modal window heading. In the builder it looks like so:
image

We update the Name in the Page settings with the HTML:

image
image756Ă—511 17.4 KB

Would be a nice feature though if Knack indicated which pages in your navigation are modals without having to click into them. By adding icons to every modal you can make it easier to see them in a large app.

It also makes the Modal heading look nicer:

image
image900Ă—277 6.11 KB

As far as code is concerned, you dont need all of them but is good to have just in case. We make .fa the default baseline styling centering the icon vertically. I also add .fa-bot and .fa-top stylings in case you want them positioned top or bottom of line. Default styling works best most of the time but here is the CSS if you want all 3:

/*Centers icon vertically on a line*/
.fa { vertical-align: baseline; }

/*Icon rests at the bottom of a line*/
.fa-bot { vertical-align: text-bottom; }

/*Icon touches the top of a line*/
.fa-top { vertical-align: text-top; }

Hope this helps!

1 Like
7

Thanks for this message and this code hack.

I will confess to getting quite nervous about entering HTML code into fields because while it is functional if they ever are changed to not accept HTML you have raw source on the front end, I’ve also seen some unexpected outcomes where a user has hacked the system and then finds that it’s gon and created an uncalled for behaviour in another part of the system.

Still, I’m really grateful for you taking the time to repond to me with that code.