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

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.

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.


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

Thanks, that’ll do for now :slight_smile:

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

1 Like

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

1 Like


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:

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

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:

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

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.