UI Inspirations?

Hello Community,

I’m excited to see the incredible UIs you’ve crafted using AppSheet! I’m on the lookout for inspiration from seasoned app developers in our community.

Let’s kick things off by showcasing a few UIs that I have done, particularly those created with the new desktop UI. A special shoutout goes to @Arthur_Rallu and their team for their outstanding work on new desktop UI.

Screenshot 2023-09-04 at 5.03.30 PM.png3300×1774 540 KB

Screenshot 2023-09-04 at 5.17.09 PM.png3342×1836 381 KB

Screenshot 2023-09-04 at 5.15.46 PM.png3338×1838 489 KB

Now, I invite to all you talented developers and contributors in our community. Share your remarkable UI creations here!

@MultiTech @Suvrutt_Gurjar @Koichi_Tsuji @SkrOYC @Kirk_Masden @Marc_Dillon @Jonathon @JuneCorpuz @Joseph_Seddik

These are some neat implementations @Rifad . Thank you for sharing. You really have a penchant for aesthetics in app views, Your elegant use of SVGs is really neat in the earlier posts you shared in the community. @Jonathon pioneered the use of SVGs. @GreenFlux , @jyothis_m and you have also posted some interesting use cases of SVGs in apps.

Yes, a big shoutout to @Arthur_Rallu and team for this elegant , comprehensive new desktop UI.

Keep it up. I will definitely post in this thread.

Thank you so much! I appreciate your kind words and support. It’s a pleasure to contribute alongside great talents like you. Looking forward to your contribution too!

Thanks @Rifad ! I’m honored to be one of the people tagged here.

I’m a rather odd AppSheet creator in that, instead of making lots of different apps, I have been continually tweaking one app for many years now. It’s an educational app (a flashcard app for language learners) and so I’ve wanted to make the UI attractive and intuitive for students.

I searched for posts I’ve made in the past that I think are still relevant to your topic (updating may be appropriate in some cases) and are important to the current version of my app. Here’s what I found:

Category 1: Making stuff look right in detail views

Adding vertical space between items in detail view
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Adding-vertical-space-between-items-in-detail-view/m-p/281811

Rich Text Formatting - in Preview Program
https://www.googlecloudcommunity.com/gc/Announcements/Rich-Text-Formatting-in-Preview-Program/m-p/352427
(Not a tip from me but rich text formatting has been very valuable to me in getting things to look right in my detail views.)

Category 2: Making stuff look right in table views

Working with table view (Q&A)
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Working-with-table-view-Q-A/m-p/245914

How to add a checkbox to a table view
https://www.googlecloudcommunity.com/gc/Tips-Tricks/How-to-add-a-checkbox-to-a-table-view/m-p/318307

Adjusting table spacing
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Adjusting-table-spacing/m-p/

Category 3: Dealing with the “no data” problem in deck views

Make many views do the work of one
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Make-many-views-do-the-work-of-one/m-p/293197

Category 4: Using still images and animated gifs more effectively

Using SVG “interface” images
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Using-SVG-quot-interface-quot-images/m-p/504387

Animated gifs
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Animated-gifs/m-p/255103

Important update from Koichi_Tsuji:
GIF file - now animation is preserved
https://www.googlecloudcommunity.com/gc/Tips-Tricks/GIF-file-now-animation-is-preserved/m-p/327057

Using QuickChart in your apps
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Using-QuickChart-in-your-apps/m-p/255189

Category 5: Let the user know that data will change after sync

Display a “Waiting for sync . . .” message
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Display-a-quot-Waiting-for-sync-quot-message/m-p/369613

P.S. I’m happy to report that the implementation of one UI-related feature request I made in the past is “planned”:

Capability to change size, color, etc of display name with format rule

https://www.googlecloudcommunity.com/gc/Feature-Ideas/Capability-to-change-size-color-etc-of-display-name-with-format/idi-p/382112

Anyone new to AppSheet who might be reading this should know that “format rules” can be very useful in improving the UI of your apps. Here’s a tip I wrote about how to implement format rules more effectively:

Put format rule conditions in virtual columns
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Put-format-rule-conditions-in-virtual-columns/m-p/364411

@Rifad the Sales Order Acceptance Detail View looks highly advanced. Thanks for sharing. If possible please share more details about how that view is implemented.

I agree. Its uniqueness didn’t register at first but I think it’s quite special indeed. @Rifad , could you make a template app that those of us who want to learn could copy and play with on our own?

Hey @Rifad ,
These are some pretty slick UI developments on the Desktop version!
How are you getting your related records in the first image to take up that much space?
It looks like you are using a dashboard views to combine and resize things, but when I try this with Appsheet’s generated inline view for child records it doesn’t scale the size properly.

@Kirk_Masden That’s an impressive collection of posts! I’m looking forward to seeing more content like this that benefits everyone. Your posts have been a great source of inspiration for me. Eagerly awaiting your set of UI inspirations.

Thanks a lot @jyothis_m @Kirk_Masden I’ll make an effort to share it. I’ve created a bit intricate formula using multiple ‘if’ statements and ‘Concatenate’ functions. I’ll attempt to shorten it and share it here.

Thanks @Kyric

I agree with you; the new multicolumn UI inline table lacks support for adjusting width, making it challenging to display more data in related tables. This has left the client somewhat disappointed. To address this issue, I went the extra mile and crafted a dashboard view that consolidates multiple views. In this specific scenario, I introduced a ‘User Settings’ Table, which passes values to the ‘current user’ slice. Each view is now equipped with a separate slice featuring a formula that resembles the following:

Screenshot 2023-09-06 at 4.42.51 PM.png1868×814 65.7 KB

Just like this each tab in dashboard. The ‘KEY ID’ of each table is passed to User settings table.

Also, I had tried using just LINKTOROW() when a table is clicked to navigate to dashboard view. But many times I had faced issues with that setup so I did it differently. This way I could also show many other datas that related differently to a specific record also.

Thanks for the info!!
Sorry, I have one more question - how are you passing the KEY ID to the user settings table?
Currently I have a table view of Orders and ideally a user would click on an Order to view its details, and the [Current Tender ID] would be updated to the one they clicked on, but I can’t figure out how to do this.

@Kyric FYI User Settings is a table I have created manually to pass values on each row click using INPUT() - AppSheet Help

I pass values using an empty string using INPUT()

Here is a post that might help you Using INPUT() to update another table using a valu… - Google Cloud Community

I really liked seeing your first image. I want to be like that too. But I don’t like desktop mode.

Thanks.

Not sure why. New desktop UI is something that is really amazing compared to the old one.

WOW!
That definitely took me a minute to wrap my head around - somewhat abstract. No idea INPUT() had that functionality.
This is going to make my detail UIs so much better!! Thanks for answering my questions and for making this post!

jyothis_m_0-1694068343401.png453×682 73.1 KB

I was referring to this view. Eager to know how the UX elements are implemented. Is it SVG or options directly available in Appsheet

Its all SVG images. None of that is option thats available in appsheet. Its Show type column and the last one is Longtext Column with HTML. I made it HTML because that column will have multiple url redirects that is clickable.

You must give it a try @Kyric

SVG element makes the UX very elegant