Using a diagram as the user interface in the App

Help Center Get Answers
1

I want to create a set of topic graphics that people click on to get to see more information on that particular topic. For instance, a series of boxes, set in a grid fashion. Clicking on a box tells me more about the topic and what assets in my library are relevant to that topic.

Dave

2

You could create a list view from parent records then have a link icon to open a modal popup that shows the related line items. You can add rich text to the list view records to make it more attractive. I’m sure there is no end of customisation you could do with some CSS if you’re a coder. Not sure if I have understood your requirement but I have done the below with a a bit of code for the card borders.
(credit Johnny Parsons - Knack.mods - List Cards)

May be worth checking out Knack.mods:
https://forums.knack.com/t/even-more-tips-and-tricks-from-knack-mods-this-week/8473

#view_XXX .kn-list-item-container { /*change XXX to your view*/
  border: solid 0.4px grey;
  -webkit-box-shadow: -1px 2px 5px 7px rgba(163,163,163,0.33);
  -moz-box-shadow: -1px 2px 5px 7px rgba(163,163,163,0.33);
  box-shadow: -1px 2px 5px 7px rgba(163,163,163,0.33);
  margin-top:20px;
  padding-bottom:30px;
}

View Cards
View Cards1920×974 93.2 KB

3

Thanks Carl. Not a coder, those days are long gone. Was looking for something like Powerpoint, i.e. drag and drop some shapes, assign a record to a shape, or indeed take the records and populate a page with shapes attached to each record.

4

Sorry, no function to drag and drop shapes like PowerPoint. I’ve never seen a Knack app with a design like you describe, it may be possible with a dose of JavaScript and CSS if you wanted to employ the services of a developer.
I may be missing something so happy to see if anyone else comes up with a solution.
I’d like to use it too :blush:

5

Hi

You could try the technique I have covered in my recent blog post on styling Knack app:

Hope this helps?

1 Like