LinkedIn
Twitter
Hey everyone,
Weโre excited to announce we are now previewing our new visual design for applications that are accessed on desktop browsers.
Currently, your AppSheet applications tend to follow mobile design patterns even when your users have large screens and these patterns can be confusing to desktop users. The new design lets these desktop users navigate their apps more easily and access information in context, and provides an efficient way to create and update records without losing context. App creators can also present more information by leveraging the larger screens but still keep it organized.
Here are some before and after images that better illustrate the design changes.
Legacy Design - Screenshot #1: Sifting through a collection of records grouped by City and State after selecting a State (Deck View)
Legacy Design - Screenshot #2: Looking at a specific record after selecting that record in the screen above (Detail View)
Legacy Design - Screenshot #3: Editing an existing record/Creating a new record (Form View)
New Design - Screenshot #1: Seeing your data in context (Deck View + Detail View)
New Design - Screenshot #2: Focusing on a specific record (Detail View)
New Design - Screenshot #3: Editing in place an existing record
New Design - Screenshot #4: Creating a new record (Form View)
Whatโs next? Well, this is still a work in progress. Weโve been gathering feedback from a number of design partners, including some of you in the AppSheet Community, and we know there is more to do before it can properly support all of your applications. At this stage, we feel that it would be good to let you play with the new design and to give you an opportunity to share your feedback - what you like, what doesn't work, what you think could use some improvements. This represents a significant change and your feedback will help us guide our next steps.
As this feature is in Preview, you may see visual changes in your apps as we work to improve the new desktop design in real-time. We don't recommend using the new desktop design in your production apps.
Thank you
The AppSheet Team
FAQ
How do I get access to this new desktop design?
We are currently slowly ramping this new experience over the next week or so, so you may not see this option in the editor immediately.
For each application, you can opt-in to use the new desktop design. You can toggle between the new and legacy desktop modes, as desired.
Follow these steps to enable the new design in your app:
- Open the app in the app editor
- Navigate to the UX > Options pane
- Enable the Desktop mode (Preview) option - see screenshot below
- Save the app in the Editor
All users of this application that access the app on a desktop browser will then see the new design after their next sync.
How do I configure the design of my app? I donโt see any new settings in the Editor!
There are minimal changes to the Editor for now. Mostly, the same settings are leveraged to specify the desktop and mobile designs. Let me give you an example.
Your apps have โprimary viewsโ and โmenu viewsโ. With the new desktop design, all of your views will be accessible from a side menu. That menu will list first the โprimary viewsโ and then the โsecondary viewsโ. In the future, we will adjust the configuration settings and in particular the language so that it makes sense for both mobile and desktop apps. For example, position values of "left most" and "right most" don't make sense for the new desktop design with its vertical menu structure.
Weโll be giving app creators more controls over some features that are currently set by default.
Is there some documentation or more information on what changed?
See Optimize the user experience using the new desktop design (Preview). Weโll update it over time.
Is there a list of functionalities that are known to not work with the new design?
Yes.
First, here is a list [as of July 31st] of (high-level) issues and requests that were reported to us and that still need fixes or assessments. Some of them are independent of the desktop mode, but we're still listing them here since people may want to know about them and so they don't need to report them unless it was reported for different app configurations :
| General theme | Issues |
| Form View |
|
| Navigation expressions: LINKTOROW(), LINKTOFORM(), etc |
|
| Format rules |
|
| Detail View UI |
- In some configurations, showing the wrong display names in a Detail tab - Edit-in-place in Dashboard view - Sync gets the app user out of Editing mode in a Detail View |
| General UI |
- Improvement requests on the subnav bar (e.g. larger text button, better responsiveness w.r.t. title, actions, text) - Clicking in grey area around onboarding view should not navigate the app in the background - Filtering on Dashboard - Tooltip for icon action buttons - Chart Views do not behave like other views |
| Localization of strings | Some strings are missing |
| CSV import/export |
|
| Other app functionalities |
- Missing Share, Feedback buttons - App Gallery behaving differently - Support of Amazon Cognito (missing account icon) - OCR not working on Desktop |
| Functionalities for app creators | โPreview asโ is not available for the desktop emulator |
Second, here is a list of some issues and feature requests that we know we are not going to tackle, at least for now.
| Supporting multiple navigation actions in a grouped action |
This is not something that we support. The team very intentionally did not want to support this. App creators should not rely on it and it wonโt work in desktop mode. |
| Multiple requests to improve the Table View UI |
We got requests to improve the Table View in general. The requests are valid, but that is out of scope for desktop mode. Changes we would be making would also impact the legacy UI and mobile apps. |
| LINKTOPARENTVIEW() not supported | For desktop users, there are better options to navigate back: the browserโs back button and the breadcrumbs. |
| Font size changes (via app settings) lead to layout issues | Generally, we recommend using the browserโs zoom which does a better job at resizing the app. |
| Background image |
See also Limitations and known issues.
How do I provide feedback?
Please share your feedback in this thread below this message!
Hi,
I guess what @NCD is trying to come up with is that when you open a detail view on new desktop UI it dismembers the header from the rest of the record columns. Below is a screenshot:
So, when you drag the delimiter from the middle to a short width is rejoins again vertically.
Even if it is not what the person meant, this is one of my personal suggestions:
- Let it always be joined, even if you increase the width from the detail view.
See screenshot below to understand what I'm saying.
This way it is much more presentable, organized and people won't have to move the delimiter to do this everytime they open the app.
I think it's a very good approach and good practice, since, as per my experience, people will not want the separate header from the rest in any case.
Hi @checktheclaws,
Wanted to give you an update on what we're doing, and what you'll be seeing.
One column vs Multicolumn option in the editor:
- Multicolumn: One of our goals is to make some use of available space (not jamming everything into the detail pane), but provide some stable areas vs up to 2 scrollable columns (The stable areas mean that headers, actions, and main image are visible and accessible at all times). This is what you see today in the card header layout option on desktop.
- Single column: We know that some apps have either simple detail views with a few properties, or creators prefer to keep a vertical linear flow (with the understanding you'll see less information above the fold).
The top card you see in either option represents a 'Header card'. This card consists of any of the following:
- Headers (1-many)
- Image (main image for your detail view)
- Actions (the circle buttons)
This is decoupled from the layout choice, so if you have single column, it sits on top at all times.
We're going to give you the option in each detail view: see the enclosed sketch.
Hi,
The following enhancement has been released with the March 1, 2023 release:
| Item | Description |
| Enhancement | Desktop multicolumn layout setting for detail views
For the desktop UI (preview), we recently made changes to improve how detail views are displayed to try and make use of the available space by introducing a multicolumn layout. But we understand that some app creators prefer to keep a vertical linear flow. We're introducing the new Desktop multicolumn layout toggle in the app editor that will allow app creators to control whether to render single or multiple columns for each detail view. Turn on Desktop multicolumn layout to display details using multiple columns in desktop browsers if space is available. For example: 
The Desktop multicolumn layout setting is on by default. Turn off the setting to use a single column layout. In this case, all content appears in a single, scrollable column. |
@amyplin
My thoughts for what it is worth.
I actually appreciate the new default Desktop multicolumn layout implementation.
Some points to note however.
- I believe I would have mostly kept the Desktop Multi column layout toggle on, if it was not for the seperate card for the header column / main image / actions.
This card will always be small, and there will always be a large blank space under it that is wasted.
It really needs to be located on top of each other vs seperated, to ensure that there is not always wasted space under it.
Unfortunatly I would mostly need to go switch this toggle off on most of my views, purely for this reason.
Please consider adjusting it as recommended. - The new header location implementation on the desktop view however is a lot better option vs how it is implemented on the mobile view with head overlapping the main image in the middle.
Compare how the Desktop view looks vs the mobile view on pictures below.
The Desktop is much more professional look vs the current mobile view implemenation.
Pleas consider updating the mobile view to align with the Desktop view.
Bulk actions seem to be missing in the Desktop Preview. There is usually a dropdown in the upper right corner with several options, but the only bulk action available seems to be 'Delete'.
Is this a known issue?
Hi,
Thank you for trying that out! I looked into the Behavior settings and can confirm the conditions are all met or set to "true". I tried a number of other things and noticed that none of my inline and hidden actions work as bulk edits in the Desktop preview. It appears they have to be set to "Display prominently".
This is not the case with the mobile version and the original desktop version. I'm wondering if this is intentional in the UI that we are limited to "Prominent" actions for bulk edits. Or is this a bug?
Indeed, the behavior of "mass actions" is different in the new desktop UI,
below is a comparative table of the old and new UI:
| Prominence | New UI desktop | Old UI |
| Display as primary |  | 1: |
| Display prominently |  |  |
| Display inline |  Not displayed | 1: |
| Do not display | Not displayed | Not displayed |
I would like to use the "Action" located in the "Display inline" for "mass use" as in the old version of the UI
Hi,
I guess I found another need for a fix.
I think the [_THISROW_BEFORE].[Column] expression is not working in the desktop view.
I have a form that, in the end, creates a numbering of a tree of records in levels.
It should not allow the user to enter a number that is already used in other records, but it should allow it's own number, for when you're editing the record. So it should allow the user to let the number be the same that it was at the time of the edit (or an unused one).
The expression I used is this: (in "asdasdhuasd" column name in the screenshots)
OR(
[Numeraรงรฃo do Plano]=[_THISROW_BEFORE].[Numeraรงรฃo do Plano],
NOT(
IN(
[_THISROW].[Numeraรงรฃo do Plano],
Plano de Contas[Numeraรงรฃo do Plano]
)
)
)line 1: The first part is to let the user use the same number the record already has.
line 3: The second part is to get the list of all the records and prevent the user from using it.
In the older desktop and mobile versions it works fine. So I guess it is a problem with the new UI. Even in the desktop preview mode it works fine.
Or if I'm doing something wrong or there's a workaround you can point out, please.
Here are some screens so you can understand better:
Sorry about the "asdasdhuasd"... I was testing the Description field in the editor about a month ago and somehow I can't get rid of it anymore... It's still showing up, even though the field is blank in the editor. So maybe this is another bug. I even wrote something different there and it still displays this. This test name ["asdasdhuasd"] I wrote about a month ago, just for the record.
So, as you can see the record is 1.4.1 originally, but when someone edits it, it gets the valid if error, even if it's the same number. But I guess the expression is correct, since in the other visual versions of the app (mobile or old desktop view) it works fine, no problem, even the column name works fine.
I guess the problem is in [_THISROW_BEFORE] expression.
Or maybe because I was using Suggested Values field in editor and now it's gone.
Just some hints.
Feel free to ask anything to understand better this situation.
Ps. If someone could check why I can't get rid of the description field in the name of the column from a month ago, would be great too!
