Re: In Preview: New UI design for desktop users - Page 11

Arthur_Rallu · 08-02-2022 12:58 PM

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	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

YES!

@lizlynch wrote:

to launch the desktop emulator in a separate tab.

Tested and looks awesome!

Btw, this new button is available if the Desktop Mode Preview is turned on, but we might want to use it as a preview without wanting our users to access the new preview considering the bugs that are still there. Finally, I think that an external window should be opened instead of a new tab on the same browser.

Ceke

Right!

hien_nguyen

Hi @Arthur_Rallu ,

I see new desktop have a bug with edit form as picture bellows:

So that if I only show selected column in the form, when I create a new record the app run rightly but when I click to edit, the editable form show all column. I want the app only show selected column which I show on the form, not all.

Thanks,

Hien Nguyen

hien_nguyen

Hi @lizlynch Please update group of thousand digit for count of group.

Thanks

KON_TROLL

Yes we need this thousand separator. It's frequently used for financial amounts...

SkrOYC

It's just Count that doesn't show the thousands separator, and to be honest I don't use it that much so I don't know if the Mobile Mode showed it or not

SkrOYC

@hien_nguyen wrote:

So that if I only show selected column in the form, when I create a new record the app run rightly but when I click to edit, the editable form show all column. I want the app only show selected column which I show on the form, not all

Please check earlier comments

@hien_nguyen wrote:

Please update group of thousand digit for count of group.

That's under the column config you are using. "Show thousands separator"

hien_nguyen

Hi @SkrOYC,

I ca not group thousaand for this column because this type is text.

Thanks

SkrOYC

So it's a count instead of sum/average?

hien_nguyen

Yes I group count aggregate for this column

EliK

@Arthur_Rallu @lizlynch When clicking on a deep link to a specific detail view, the new desktop UI doesn't open the detail view, it just opens the default opening view of the entire app.

EliK

@Arthur_Rallu @lizlynch is there any update on this issue of deeplinks with the desktop UI? It's affecting my app, because we send emails with a deeplink to the specific record, but the link doesn't work on desktop anymore.

SkrOYC

You are trying to open another app to an specific view?

EliK

Hi @SkrOYC !

I send update emails with a deeplink to the specific record in the app, to allow the user to click from their email directly to the correct record of the app. When using the desktop UI, the deeplink takes you to the defualt stating view of the app, not the detail view of the specific record. It still works fine on mobile.

The expression I'm using in the email template is :

<<HYPERLINK(CONCATENATE(“https://www.appsheet.com/start/******#view=JL%20Export_Detail&row=”,[Students.StudentNum]),[Last Name First])>>

SkrOYC

Btw, eventhough you said that it works fine on mobile, can you make sure that [Students.StudentNum] is correct?

Also, can you try by using LINKTOROW()?

EliK

Yes, [Students.StudentNum] is the name of the key column. the naming structure of this app comes from a SQL database, which was exported into a spreadsheet...

I can try it with LINKTOROW() and see if it makes a difference.

Antonio_Laurean

LINK works well in both mobile and tablet views. It does not, however, work in desktop view. The structure is as follows:

LINKTOROW([MessageID], "Messages", "App").

EliK

I'm experiencing the same issue, but Appsheet Support said they couldn't replicate it. But it's happening across all of my apps with desktop UI. @SkrOYC

EliK

I've tried it with linktorow, and it still did not work, but the link works on mobile devices. Appsheet Support said they tested it and it works for them fine.

Does anyone have success with deeplinks in desktop UI?

Rifad

LINKTOROW is not working for me in table views too. Since the release of new desktop mode I have been waiting for this bug to be rectified to switch an existing app to new desktop mode. Unfortunately waiting since then.

SkrOYC

@hien_nguyen wrote:

I see showing the drill-down tree for group column as very useful for users on the new desktops, but I don't why Appsheet removed it for new update version?.

But it was almost uselesss when you have just one group-by.
So the inner group-by is shown on the list itself (as it was before) and the upper ones are shown as a quick filter

Derinko20

No, having the drill-down tree is useful for quick glance info; I have people divided by zones (20 in total) and with a simple glance I could see how many people were assigned to X zone, now I have to scroll the entire view to see how many people are on each zone

SkrOYC

I have apps where there is just one category inside the group by to count all records on the view so having a filter tree with just one value doesn't make sense and wastes space. Maybe we could get an option for this behaviour inside the editor

Arthur_Rallu

@SkrOYC and @Derinko20
Please see https://www.googlecloudcommunity.com/gc/Announcements/In-Preview-New-UI-design-for-desktop-users/m-p... above
I think you should both be able to get what you want.

Atlas

Desktop views don't show grouped by column name on the left side anymore, unless there are two grouped by columns. Big no!

Arthur_Rallu

In case you're still waiting on this.

We've updated the behavior to be consistent with the experience on mobile devices. If you want to have a single group-by column on the left side, then follow the instructions (at the bottom, in the note) at https://support.google.com/appsheet/answer/10106698?hl=en

Former Community Member

Heads up, we noticed a problem in the desktop emulator code that could break the editor save button under certain conditions, so we had to turn it off. We should have a fix out Monday.

Former Community Member

Update to my update, the desktop emulator is now rolled out to everyone.

Merit

Hi!

'Editable_If' expression not working with "IN" and "Contains" expression at all

SkrOYC

@Atlas wrote:

Big no!

Read earlier comments, a big yes in my case, I reported this months ago
Also read release notes

lizlynch

Hi,
The following bug fix has been included in the November 14, 2022 release.

Bug	For desktop UI (preview), detail views in multi-column layout on wide screens now center properly instead of aligning to the left.

Thanks!
Liz

SkrOYC

Loved the "something something copy text" part
😂

Koichi_Tsuji

You mean the copy the text to clipboard type of action is going to avail possibly soon?

@lizlynch

lizlynch

@SkrOYC 😂 I'll pass this little type along to the dev team! LOL

hien_nguyen

Hi @lizlynch, It seen this fearture doesn't exist in my accounts. When will it apply for all account?

KON_TROLL

@lizlynch Ahhhhhhh. BIIIIG THANKS!!!!!!!!!!😘

An absolute vital feature!

lizlynch

@SkrOYC @KON_TROLL @hien_nguyen

Apologies! This enhancement was announced prematurely! I've removed it from the release notes and the announcement above. Apologies for the confusion. Stay tuned for its release! 🙂

Liz

1minManager

2 x Bugs found on 10/11/2022

Not sure why but at 1514ish I had an App that stopped adding the ID for the parent record to the Ref column of the daughter record. Record added at 10/11/2022 15:13:53 was fine. Record added at 10/11/2022 15:15:19 the Ref column was blank, as was all the subsequent records. Only affected the new Desktop Mode; worked fine in App Preview and also started working again when I turned new Desktop Mode off.

Also another issue, not a bug but more of something that can confuse users. So the table hierarchy is Customer -> Job -> Issue. In the customer view the user did a search for "abc". Clicks on ABC customer record. Then clicks on the relevant job record. In the job record the user can see 2 issues listed. They click "View" to see them all on one screen. But it doesn't show any records. The reason is the search bar at the top is still filtering by "abc" which doesn't match any Issue records. I think this filter text needs to clear as you click "view".

Arthur_Rallu

I believe both bugs should be fixed now.

1minManager

Another bug. Address type columns don't seem to be suggesting addresses.