Not a brief post, but thereโs a lot to touch upon. There will be further posts, as we develop, release and get feedback, but we wanted to let you know some things weโre up to. Still a lot in the works, and iterationโฆ
Weโve been researching and working on some patterns for desktop apps; these will start being released in the Preview Program, giving us some extensive use across variety of apps, and iterating along the way. We asked the community for some desktop use cases earlier this year as well.
The major desktop elements are discussed below:
Whatโs not in motion at this time:
Hereโs a high level overview and concept sketches of what weโre working on, and will be coming to the preview program:
When AppSheet is being used on a desktop, weโre exposing the app views as a visible navigation rail on the left side of the viewport.
Besides being present at all times, weโd like you to be able to work with this in two modes: Collapsed or Expanded. Hereโs a sketch:
When collapsed, youโll see the icon associated with the view, and on hover youโll see the view name in a tooltip. Collapsed means you can have more space dedicated to the content pane. Either mode is scrollable for apps with lots of views.
If you donโt show an app icon in your app bar, youโll see the app icon (and the app name) when you expand the drawer, similar to what you see today on mobile.
When expanded, it resembles the mobile navigation drawer you see today, except it occupies persistent space, i.e. the menu links are visible.
Following a more standard desktop web app pattern, you wonโt see the bottom app bar on desktop.
Tab nodes โ Top of nav rail
This means we map the visible tabs on mobile to the top of the view list in the sidebar, putting them in the top position in the list:
Another change weโre making is switching the position of the menu bars and the app logo (if you use one), so the menu control is directly aligned above the navigation links. Pressing the menu control toggles between Collapsed and Expanded states.
Weโre starting with detail views, as itโs one of the most important and potentially information dense, and currently itโs designed primarily for mobile.
Weโre looking to use the available real estate afforded by desktop to break out the content into sections. These sections can be laid out across columns.
Letโs look at the basic structure:
Starting from the top, youโll see a a common pattern when you drill down into a detail from a collection: a (hierarchical) breadcrumb bar:
This means thereโs one click up to the collection, and if a user lands in this view from a link, itโs clear what collection this instance belongs to.
The use of Overlay buttons (aka FAB: Material Floating Action Buttons) is a fairly standard mobile pattern. The core idea is that itโs for the ONE most important action, but AppSheet lets you add multiple.
Translated to the desktop, Material originally kept the floating overlays in the bottom right of the viewport, but after testing and research, transitioned to the top app bar, because of discoverability issues and content overlay. App creators weโve interviewed have brought this issue to our attention.
Right now, weโre starting with having the primary system action button, Edit appearing as a contained button with a label.
The remaining overlay buttons take are displayed as secondary action buttons, and other system actions (delete, sync) remain as icon buttons, and all buttons will have tooltips as well:
Hereโs a sketch of how we are structuring the top right of the app bar for Detail views:
For these, weโre moving to dedicated buttons for navigating sibling records. If you have to skim back and forth between records, the buttons are in a stable place, and close together. Weโre also exploring (future) keyboard shortcuts to aid in sibling navigation: This can aid in quickly traversing records, and is effective for power users.
You may have seen this pattern before: Weโre currently using it for detail views in dashboards:
Consolidating interaction patterns when possible is part of a larger push.
Right now, detail views form one long strip of mostly undifferentiated content.
Weโre working on a way of grouping these into the following types of sections.
These sections can be ordered, and sections can be arranged into columns.
So a layout on a browser can form up to 3 columns, containing multiple sections.
Hereโs an sketch of a detail view with 1. a primary section with an image and some overlay text, a medium amount of secondary properties, and 2 inline lists:
Consider a โprimaryโ section (name may change for clarity) as including some of the following:
There are many permutations of headers, images, and both combined, currently in apps. There are combination of headers and images, just headers (up to 6), or the card layout.
Right now weโre giving any and all of these prominent placements in the upper left of the content pane when multicolumn layouts are in effect.
Together a primary section of content allows you to:
Next are the remaining properties (columns) of the record. These can have tremendous variance: we have customer apps with anywhere from 5 - 70 plus properties represented in their detail views.
Tradeoffs: There will be some potentially large height differences in sections, simply due to how many properties a section contains.
To start with these will default to a single section, and we want to empower you to break these into more groupings, and weโd like to allow you to use the SHOW type header as one means of doing so:
The third section type is inline views, such as ref lists. These form other individual sections.
Next we have our collection views. Starting from the top:
Another common pattern is a visible search field. With large lists, a persistent field with a visible label provides a quick way to find items.
The other aspect is that the filter icon is visible, and can be accessed with a single click.
We notice that app creators are configuring interactive dashboards, setting up a table or similar collection, and adding a detail view. This is recreating the common collection - detail pattern (aka split pane or two-panel selector).
Weโd like to allow app creators to configure a collection view to accommodate a split pane, no dashboard creation required. This will facilitate working in context, and avoiding jumping from collection to detail and back to collection. Hereโs a concept sketch:
Youโll see this pattern in Gmail: users can invoke the split pane from an icon control, and a single click allows for viewing details.
Iโm displaying a data table for the concept mock, but this pattern can apply to other forms of collections (cards).
Itโs a long post, but we wanted to bundle this together to give you a heads up, and break down some of the core concepts and patterns. Thereโs a bunch of details weโll dive into more in other posts.
We put out a call for desktop views and use cases earlier this year, and have gotten some excellent examples of dense data displays. We look forward to receiving more as we go forward.
Stay tuned for more specific detailsโฆThereโs a lot of tuning to do, big and small.
Do you mean, Appsheet Accept upload multiple files or images in the same time?
So close!
Looks like it will be very good.
My minor suggestion would be to provide variable width columns in table view, and/or wrapped text.
Are there Anynews today my brothers?
It depends
Any chance the long text textboxes are adjustable in size or will scale to a larger size than they are? Also, really looking forward to this preview. Would love to get my hands on it soon!
I'm waiting, I hope it available early
Thought I just mention that all the demos I have seen look great ๐ Not that anyone on this thread needs more encouragement to be excited.
Release process wheels are still turning but team still expects it to be publicly available before end of week. Initial wave is a portion of free users. Paid users won't get updated until next week (standard ramped rollout to make sure changes get baking time before hitting paid production accounts).
Looking forward to hear what all of you think!
I can't wait for this!
๐
After switching away from a custom PHP asset tracking system to App Sheet; I have been looking forward to adding back some of the UX elements on the information-rich panels
I think you will still need some workarounds to get that kind of richness you expect.
Dashboards will still be a crucial part of any information-driven app.
Check @Suvrutt_Gurjar's posts about he usage of dashboard views, svg and more
Create risk analysis matrix or any other matrix gr... - Google Cloud Community
Dashboarding Options With Card Views - Google Cloud Community
Hey everyone,
Quick update on this front. You probably saw AppSheet had an outage today, so we had to postpone releasing the new design into Preview. New ETA is on Tuesday morning (August 2nd).
Just curious if the plans mentioned in the Content: Sections, columns, and flow section above will also apply to Form views. It would be great if different sections (like a dashboard view) will be visible in the form as compared to having to browse through different tabs.
Morning, Just looking to see if we are still on for today?
I also can't wait for this and hoping I get the roll out today. Just in time for my new app release by end of the week.
If I refresh 11 more times will it show up?, lol. Cannot wait for this launch this morning! Excited!
Seems like it's already out there for all accounts but hidden.
I'd wait for @Arthur_Rallu to give more instructions
Has anyone seen any change in anything? Heard any news from anyone?
โ
Im waiting
me 2
Hi everyone,
As @vYGY pointed above, we've started rolling out in Preview the new design for desktop users. See more at In Preview: New UI design for desktop users.
It's possible you don't see it yet as the rollout is progressive over a week or so. The Release Notes will update and let you know how far along the rollout is.
Thank you
How can edit by Form with Desktop mode?
Now I only edit by "Quick edit columns" in Detail .
At the time of this post, the default behavior for the desktop edit buttons is inline-editing.
If you don't want that you can replace the default edit button with an action like this:
@Jonathon Thanks for your support
It appears when I edit the value on Desktop view mode
Frequency: Regularly
Error id: 413685
Stack: TypeError: n.recomputeInfluencedAttributes is not a function
at h (https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:2...)
at https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:2...
at Array.forEach (<anonymous>)
at g (https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:2...)
at h (https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:2...)
at e.value (https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:2...)
at https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:3...
at o (https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:3...)
at Object.onUpdate (https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:3...)
at e.value (https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:3...)
at n.value (https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:2...)
at r.onValueChange (https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:1...)
at n.value (https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:2...)
at https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:1...
at ls (https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:9...)
at Tl (https://www.appsheet.com/assets/c22cb4f98c7423843422507223e7cd3292aca19a909f31303a0e615c0c097468:1:9...)
Action: Go to another appsheet app (view) does not work in desktop mode. It works fine without desktop mode.
I have a column in a menu sheet that redirects both to views within the app and other apps)
Currently, New desktop UX is in preview. They (Appsheet) has the special URL to render new desktop ux. So when you set the new desktop mode is on, then you will see that your will be redireced to new URL, which is causing problem. Deeplink action not gonna work.
Thank you for the clarification on that deeplink action does not work.
I figured out a temporary solution:
"YOURAPPNAME#viewStack[0][identifier][Type]=Control&viewStack[0][identifier][Name]=YOURVIEW&appName=YOURAPPNAME"
I have noticed that the date picker in desktop preview and normal browsers on chrome require you to move your mouse somewhere in the middle of the cell until your mouse cursor changes. Most of my users have not realized that and intuitively try and click on the calendar icon to open up the date picker.
Is this by design?
Just seems the current implementation is not very intuitive, but I am not sure if the implementation is controlled by the browser and not by AppSheet.
I wonder if AppSheet can force the date picker upon selecting the calendar icon in the cell.
Not sure what Appsheet's thoughts are on this
See Gif below
โ
Hello All,
@JayG hi, check on the Edit action itself, there is option "edit in place/open a form".
Change this to edit in form and check..
@Denzil_Snyman - Thanks very much for you help! Works perfectly.