In Preview: New UI design for desktop users

[Arthur_Rallu]

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:

1. Open the app in the app editor
2. Navigate to the UX > Options pane
3. Enable the Desktop mode (Preview) option - see screenshot below
4. 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	Follow-up actions (reopen, next view, click-on-save action) do not get triggered or executed properly; sometimes it is dependent of the app configuration and sometimes it is not Delete and Done buttons are missing to delete new child row Some performance issue when there are many Enum value buttons and format rule(s)
Navigation expressions: LINKTOROW(), LINKTOFORM(), etc	When used in emails When used to go to Dashboard Views
Format rules	They don’t properly show up in a dropdown (for Enum, Ref, etc) They don't always show up in the group-by section They don’t show up new headers
Detail View UI	- In some configurations, showing the wrong display names in a Detail tab - Requests to show the image label in the 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	Error message when action was successful Export data based on what is visible to the user
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!

[KON_TROLL]

Yes. This has been reported earlier. We need this...!

[Arthur_Rallu]

It's working on my end and behaving the same way with the desktop mode enabled and disabled. Can you elaborate?

Thank you

[lucabizzotto]

Hi I have a problem with the forms.
I have reordered and removed some entries from the database, but still, in the desktop view it shows me all the DB entries in the slice forms.
In the "UX views" there are still all the sorting of the entries for each slice.
Could this be a passing problem? Or is there any way to rearrange them?

[Arthur_Rallu]

If you are editing an existing record, the 'Edit' button is not (by default) opening the Form View. From your explanation, I wasn't sure if that can explain what you are observing. If that's the case though, then you'll be happy to hear that we are working on letting app creators decide between opening the traditional Form View and that "QuickEdit Detail View". 

[Hamlet]

Could we get a little more explanation on how the Card Blocks work?

I just created one Show column to split part of the Detail view and the system made separate card  blocks, in addition to the block made by my show column, for the actions sections on top and for each related inline view.

I was under the impression that there would be an amount of card blocks only specified by the amount of show columns used. So if I had only one Show column, my Detail view would effectively be split in two.

[SkrOYC]

In my experience, each of these are card blocks:

1. Header columns
2. Column order fields aside Inline views/"Related..."
3. Inline views/"Related..."

The 2nd one could be divided into more groups per show column, it has to be Page Header if I recall but I'm not sure

[Hamlet]

I found out the following:

Actions get their own block that remains on screen, Inline views get each their own block, the rest of the fields get divided according to where you place the Show column of Page Header type. I think if using Card View Header on the Detail view gives that header it's own block as well.

[SkrOYC]

Yep!

[Ratatosk]

Desktop edit mode on Detail View, now not showing some fields.  It worked fine yesterday. Especially my date fields and some others not showing.  It's also changed from the convenient overlay popout to going to a centered sub view.

Old edit mode on Detail View shows all fields I've set to be shown.

[AllenBrights]

Hi!

Expression like this:

LOOKUP(
MAX(
    SELECT(
      CoverComposer[_ROWNUMBER],
      ([_THISROW].[Ext] = [Ext])
    )
  ),
  "CoverComposer",
  "_ROWNUMBER",
  "Carrier"
)

not working as "Initial Value" in Desktop apps. Found this bug during migration to new desktop view. All mobile-versioned apps still working normally

[tomyeo]

I was using the workaround method below to enable form view instead of "quick edit" view for a detail view.

workaround method: Make a duplicate action of the system-created "Edit" one. Change the "Edit" one to "Do not display".

But it seems like the workaround does not work anymore. (used to work few weeks past) I was hoping to use the workaround method until the official release.. Is there another workaround method that works now? 

[Luke_H]

All I can figure to do for now is LINKTOROW(). It seems to be a good workaround for me as things keep changing. I did disable the default edit as well through do not display. 

LINKTOROW([_THISROW].[ID], "Positions_Form 2")

[Ali_Sabir]

See potential and reproducible bug in the Desktop Preview for Charts

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/Potential-bug-in-charts-for-Desktop-Mode/td-p/4...

[SkrOYC]

New bug @Arthur_Rallu 

Setup:
Map view as Inline with a XY column (haven't tried with address/latlong)

While being on the parent detail view and trying to click/open one of the items from the map the app does nothing, either with split or full screen view.
When opening the inline view as the primary view (by clicking the "view" button below) it works.

@lizlynch 

[Hamlet]

Are the sizes on the panels supposed to always revert back to their original size, or are they supposed to keep the size I give them just like in Dashboards?

They keep going back to original size every time the app is opened and wanted to know if that's the intended behavior. 

[Arthur_Rallu]

Currently, the detail view in a split configuration opens with the same width for all views. If you change that width, you will see that same width as you click around the app, but only in the same session. So, it doesn't behave like the dashboards.

We will want to improve on that, but it'll remain as is for now. 

[lizlynch]

Hi,
The following issue has been fixed in the November 17, 2022 release:

Item	Description
Bug	For desktop UI (preview), fixed bug with EnumList that prevented multi-selecting options when selected not using the checkbox, as reported in the Community.

Thank you,
Liz

[hien_nguyen]

Hi @lizlynch ,

Please fix bug show all column on edit view although we only ordered a few column on input form.

Thanks,

Hien Nguyen

[Arthur_Rallu]

App creators can now decide if they want to open a form or use the detail view to edit an existing record. 

[Ravshan]

Hi, I'm using new UX design and I wanted to know can we view on top of number columns sum of active filtered data?

[Arthur_Rallu]

No that is not possible.
The best you can do is to show an aggregate value in the groupby filter area for each of the groupby values. An aggregate value can be the sum of a column's values or it can be the number of records, for example. 

[Ali_Sabir]

Same app, same chart view, when new "Desktop Mode" is enabled, for a chart based on a slice, it uses a system generated view when clicking through it (instead of using table view of that slice as it correctly picks when Dektop Mode is  disabled):

Chart view using Legacy Editor:

Click through when new Desktop mode is disabled, it correctly uses table view of the slice:

When new Desktop mode is enabled, it uses system generated view based on slice columns:

When Destktop mode is enabled and "new chart editor" is used - it goes straight to details view, instead of table view of the category clicked as it does in previous cases shown above:

Chart UI with new editor and Desktop mode enabled:

Clicking on a bar, goes to the detail view of a random row (possibly first row of the category):

In summary, with the new desktop mode, you can't get chart view right - both legacy editor and new chart editor have bugs. I notices these issues were reported almost a year ago and still not fixed.

[alphacp]

It is so hard to catch up on this thread, it is way too long and so many different topics!

I was particularly looking for the Edit form discussion and I found an answer fairly early on regarding adding my own action button but it appears this is no longer needed as there is now an option on system-generated edit action to open a form instead of an inline edit. Excellent!

[alphacp]

Is it possible to add a divider between standard views and menu views in the navigation bar, in a similar way as before the App Gallery. The fourth view in the screenshot below is a menu view in the mobile app and a distinction is the desktop view would be helpful

[Akshay_patel95]

Automations not working in desktop preview.  I don't know if it's a bug or what. 

Anyone tried to implement record link in email that takes user directly to that record? It seems that it's not doable in new desktop preview.

[scott192]

Would it be possible to change the behaviour of inline collection views on a detail view so that they obey the help text for configuring card blocks?

"To configure card blocks in detail views, add one or more Show type columns set as the Page_Header category to the associated table. Each Page_Header column creates a new card block that includes all columns below it until the next Page_Header column."

This behaviour is ignored for inline view columns and it is NOT possible to group information sections using this method as every inline view automatically creates it's own card block and chooses an alternating column on the screen to display itself in.  In fact, the Page_Header show column displays on its own and you just end up with 'orphan' headings.

This is my personal opinion of course, but I think that if you change the behaviour so that inline views do not decide to make themselves a card block and leave it up to the user to create blocks using the method suggested in the docs it would flow logically.

Can I also suggest that it is not necessary to split off the 'Actions' header section into its own column either?  Leave it attached to the detail view as it wastes a lot of space below itself when detached.

[SkrOYC]

Hey @Arthur_Rallu, I found a major design flaw!

It seems like when you are typing data to a Form view on the new Desktop Mode the record is being added in real time to the local storage of the device, even before you hit save.
Before the record was just inside the local copy of the database once the form was saved.

This breaks many use cases that compare the current data being added with the database!

As an example, I have an app where there is a flag column that checks if a certain record was already inside the database so that if it's uploaded through CSV import AppSheet marks this as a duplicate and automation deletes the duplicated value and keeps the original one.
This is done by concatenating some columns that whose combination is unique and could even be seen as a computed key, although it's not.

But now when inputing something AppSheet thinks that the newly inputed data is duplicated because it's comparing the current form data with the (supposedly) existing data, but it's a bug because the new desktop mode is adding the data before the current form is saved.

[SkrOYC]

A related problem, no sequential!

Since we count how many record there are, the number changes once you start typing the rest of the info because it counts itselfs as if it were already added before to the database!

@Arthur_Rallu @MultiTech @Steve 

[alphacp]

---

@SkrOYC wrote:

Hey @Arthur_Rallu, I found a major design flaw!

It seems like when you are typing data to a Form view on the new Desktop Mode the record is being added in real time to the local storage of the device, even before you hit save.
Before the record was just inside the local copy of the database once the form was saved.

---

I think this matches my experience in this item: https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/Desktop-View-Initial-Value-changes/m-p/493159#M...

[MiguelQ90]

Se pudo hacer algo con edición rápida en el modo escritorio porque me daña las validaciones que tengo

[stratemis-it]

@Arthur_RalluI am experimenting on my private free plan with the new feature for an upcoming project at our company. I noticed that when adding virtual show columns, to group some input fields to be more user readable (in the detail and form view together), which in turn are based on slices of a particular table, the edit form when accessing from the slice view opens the form view from the base table, not of the slice.

Is there a workaround or is this an issue on your side?

[Former Community Member]

I believe we have a fix for that waiting to go out.

[1minManager]

Edit button opens wrong records in dashboard views where view is set to Ref

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/New-UI-Bug-Edit-button-opens-wrong-records-in-d...

[1minManager]

Another minor issue.  I updated the display name of a virtual list colmun.  Saved & verified.  Opened new UI, it shows the old display name.  Clicked sync, now displays the new display name.  Seems when its loaded it doesn't appear to do a sync.  This maybe be related to an earlier post where I deleted items in the spreadsheet, then opened the new UI and the deleted items showed up 🤔

[lizlynch]

Hi,

The following enhancement and bug fixes are included in the December 2, 2022 release:

tem	Description
Enhancement	For desktop UI (preview), adds a detailed synchronization information UI that provides the ability to discard changes, view errors, and support fully localized strings. For example:
Bug	For desktop UI (preview), fixed a bug where clicking an edit button would sometimes open the wrong edit view.
Bug	For desktop UI (preview), fixed an issue where auto-reopen for forms did not work.
Bug	For desktop UI (preview), fixed an issue where forms do not auto-populate values when adding rows from collection views with filters.
Bug	For desktop UI (preview), fixed an issue where the drill-down tree was not filtered when navigating from the View button in an inline view.

Thank you,
Liz

[scott192]

Bug Report:

In Desktop Preview, a Form which has a Ref does not obey the 'Editable?' flag in the Update Behaviour section of the field definition.

Expected behaviour is to show the Ref value and not allow the user to make changes, but Desktop Preview allows the user to select other records.  The display of the Ref field is correct and it does appear greyed out, but it is still selectable in the form.

[Koichi_Tsuji]

I tested with my own enviroment. Yes you are right.

This is a bug. No consistency between legacy and new desktop ux behaviror. Once we set edtiable if to false, then it completely not able to edit, even through the data change actions.

Typical bug.

@Arthur_Rallu 

[alphacp]

With such a large thread, I am not sure whether this has been covered or not, but the use of Page_Header type show columns to group panels of fields seems odd to me. Why was this not Section_header? It makes such a difference in experience between a mobile app and a desktop app. But then again I have always disliked how Section_headers look different than how Inline tables are shown in the mobile app. I guess most people will develop for one platform or another and if they need their app to work well on both, they will make platform specific views I guess. 

[lizlynch]

Hi,

The following issues have been fixed in the December 6, 2022 release:

Item	Description
Bug	For desktop UI (preview), updated localization strings for drop-down and sync which will remove any pre-existing localizations. Note: You must re-localize these strings for any apps that had pre-existing localization.
Bug	For desktop UI (preview), there is a simpler confirm dialog presented when navigating with unsaved changes. Previously when navigating away from a form with unsaved changes in desktop mode, a confirm dialog would prompt the user to save, discard, or cancel. This change simplifies the dialog to use a more conventional two options: Discard or Continue editing.

Thank you,
Liz

[khuslid]

I know you are progressing in bug fixes and updates for the new UI design for desktop: Thanks a lot for your efforts.  But could we ask for an updated list of known limitations and issues? Then we could turn to that list to see status of bug fixes. As it is now, this tread is all we have and the same issues are being tested and discussed over and over again. A lot of time wasted... And a lot of frustration...