In Preview: New UI design for desktop users

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)

Arthur_Rallu_0-1659469291920.png

Legacy Design - Screenshot #2: Looking at a specific record after selecting that record in the screen above (Detail View)

Arthur_Rallu_1-1659469291926.png

Legacy Design - Screenshot #3: Editing an existing record/Creating a new record (Form View)

Arthur_Rallu_2-1659469291979.png

 

New Design - Screenshot #1: Seeing your data in context (Deck View + Detail View)

Arthur_Rallu_3-1659469291995.png

New Design - Screenshot #2: Focusing on a specific record (Detail View)

Arthur_Rallu_4-1659469292027.png

New Design - Screenshot #3: Editing in place an existing record

Arthur_Rallu_5-1659469291998.png

New Design - Screenshot #4: Creating a new record (Form View)

Arthur_Rallu_6-1659469292016.png

 

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

Arthur_Rallu_7-1659469291922.png

 

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
  1. 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
  2. Delete and Done buttons are missing to delete new child row
  3. Some performance issue when there are many Enum value buttons and format rule(s)
Navigation expressions: LINKTOROW(), LINKTOFORM(), etc
  1. When used in emails
  2. When used to go to Dashboard Views
Format rules
  1. They donโ€™t properly show up in a dropdown (for Enum, Ref, etc)
  2. They don't always show up in the group-by section
  3. 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
  1. Error message when action was successful
  2. 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!

80 1,246 73.4K
1,246 REPLIES 1,246

Hi @Adam-google 

Regarding the column that was displaying a strange title, I tried everything and it didn't go away...
But today I was checking again this issue and now it is gone. Don't know what happened. Probably something that was changed in this bug fixes that are happening in Desktop View.


Anyway, thank you for your help.

Hi!

I suggest trying the option without using [_THISROW_BEFORE].

In my applications, I check the uniqueness of a non-key column with the following construct "Valid If":

 

ISBLANK(
	SELECT(Plano de Contas[Numeraรงรฃo do Plano], 
		AND(
			[Numeraรงรฃo do Plano] = [_THISROW].[Numeraรงรฃo do Plano],
			[Key_Column] <> [_THISROW].[Key_Column]
		)
	)
)

 

[Key_Column] - replace with key column

Description of work:

1. Select records from the desired table and check 2 conditions:

1.1. The value of the column being checked is equal to the current value

1.2. The entry key is not equal to the current key

===========================================

When adding a record, condition 1.1 is not met

When editing a record, condition 1.2 is not met

So you can try to solve the problem without using [_THISROW_BEFORE]

 

P.S. I checked the work in Desktop mode - it works

Hi @Axel_Pro

So far, in a few minutes of testing, It works great!

(And I still don't know why. I have to look at your expression carefully to understand why)
And I don't have to use [_THISROW_BEFORE].

If it doesn't work I post again here.

Very nice.

Thanks.

@Arthur_Rallu 

There seems to be a mismatch between formatting in detail and form views. Our prototype solution is based on MS Excel on SharePoint and it is correctly as German-Germany formatted (dots as thousand separators, commas as decimal separators). However, AppSheet is correctly displaying numbers in all views (detail , table, card etc.), but when switching to form view, the input fields revert back to US style number format (dots as decimal, and commas as thousand separators). Switching between regional and language settings in a web browser does not correct the problem.

I have a similar issue, suddenly R10000.00 was acting up and displaying R10000,00. After any edit and save it converted to 1000000 on google sheet

It's like the comma in price with 2 decimal triggered the thousand seperator although turned off.  It is a horrible mess cleaning data that was now mutipled by 100 randomly where clients edited on forms. I understand it's in preview but CRUD101  bugs affect core data values. 

 

 

I ended up making columns number format with decimal and displaying price as VC from number. 

Update: The Date format is also broken.

The all views except the form view show correctly our German format (DD.MM.YYYY) while in forms it reverts back to US format (MM/DD/YYYY).

Looks like calling virtual column as part of formula is not working

DESKTOP MODE

* editable formula is not working. im calling here a value of virtual column from another table via ref

* the one encircled in desktop mode is a value of virtual column from other table via href

Sanie_Magro_0-1677306556138.png

DEFAULT VIEW

Sanie_Magro_1-1677306678674.png

 

Hi!

Perhaps you have display conditions set by expressions in "Show" in the "Assigned_to" and "Remark" columns?

Axel_Pro_0-1677578043813.png

If this is the case, then most likely some of the formulas still work somewhat differently in the new interface. Can you provide more information - the formulas used in "Show if" to adjust their operation in desktop mode?

If the "Show" expressions depend on the result of calculating virtual columns, then their expressions are also necessary to find a solution.

I don't see this either in the thread or in the known issues list so figured I'll just post it in case it is not considered yet. 

Format rules are not applied on primary actions.... But then I realized they are not applied on primary actions for non Desktop UI either, is this intentional?

Screenshot 2023-02-27 at 5.42.21 p.m..png

From yesterday to today (US time probably) new codes should have been released to the new desktop UX, which is making another new problems on the new desktop UX. We see bunch of the new problems (error messages and detail view headers are broken). There are bunch of new reports from our users, but I dont have time to recap those all, as they are too many. Suggest to roll back the new codes to help our life, if Google want to help us out.... ๐Ÿ˜ฅ

Same here. I cannot save form with new desktop UX. It's show This page isn't responding once I save form. Please roll back. 

I have same issue, was occurring a few days before this release, mobile works awesome.

IMG_20230301_094721_edit_86211132243614.jpg

โ€ƒIf I try cancel or refresh, it seems to have completed saving my parent form, however my groups actions for looping creating child records is what failed on desktop. It created one of my child rows and stuck. 

IMG_20230301_095419_edit_86558247746165.jpg

โ€ƒ

โ€ƒ

Untitled.png

 

That's exactly my issue. There is something wrong with looping action. 

Today my problem about loops was solved. But I changed one of my apps to the old desktop for stability. I appreciate the team's effort in supporting us. Many thanks.

Thanks for reporting it, we have identified the underlying problem and a fix will be coming soon. In the meantime, turning off the desktop mode is probably the best workaround.

Hello @Adam-google looks like the looping action is currently adding rows but initial values in child table is not being updated in Desktop UI but same is working properly in editor UI and Mobile. Please have a look into this because its causing issues.

Hi!

Thank the team for the update!

After the release of yesterday's update, I confirm the partial elimination of the problem with the search described here (part 1):

https://www.googlecloudcommunity.com/gc/Announcements/In-Preview-New-UI-design-for-desktop-users/m-p...

Now for example you can open a detailed view of the linked record

Apparently, the search field now does not affect some types of views (forms, detailed views), but continues to affect related table views (and most likely all views that have a search - such as DESK for example)

ะŸะพะธัะบ-2.gif

Perhaps a more correct way of working with the search may be to link the search to a specific view on which it is entered (the search belongs to a specific view and no more)


@SkrOYC wrote:
@SkrOYC wrote:

FYI, loops are almost broken now since one of the last updates


Today I found this to be solved


I'm very sad and frustated by the fact that this seems to came back on my side.

@Arthur_Rallu have you done some things in the backend? Others are also posting problems with loops

FYI, this came aside an update that makes my Detail Views be on the old stacked layout in a single column but it shows the sections separated:

SkrOYC_0-1677704352175.png

It doesn't seem to be loops only. It really is just about any action where performance tanks quite a bit. The same exact processes take at least 2-4 times longer than they did before all of these 'updates' started coming out (in the last month or so).

I am totally aware that my applications are a little bloated to begin with so syncs do take a little bit to go through, but I am getting way more complaints from users that the UI is very slow in reacting. I'm getting to the point where I am considering other programs outside of Appsheet and yet have to rebuild interfaces yet again (previous time was because Google deprecated Google App Maker). Really having to wonder if that's what they are trying to accomplish here also.

In my case I'm refering to a particular change that was deployed between yesterday and today, and those where the two things I noticed about that release

Please solve this automatically run expression issue

I'll describe the situation as below :  

Desktop view enabled, form view, when clicking on the enum button or do any kind of task within this form view (not click Save the form yet), the other column that contains expression run automatically 

See below how it turns from 36 to 37 in Request # column, when I click on Factory column enum buttons : 

2023-03-02 20_28_13-Backpack Factory.png2023-03-02 20_28_08-Backpack Factory.png

@amyplin could you please advise about this issue ?

@Arthur_Rallu Hello Arthur, could you please advise regarding this issue ? Thanks !

@kvngo94 Can you confirm if this is still happening today? A change was rolled out last week that may have addressed it.

Dear Adam-google, 

It's fixed. Thank you, but still happens another issue as my latest post in this thread. I want to attach an video but can't

See the video in below link, CODE and ITEM columns does not have any relationship with the COLOR column instead

kvngo94_0-1679359695695.png

 

https://youtube.com/shorts/SXZ_Dj--TXY?feature=share 


@lizlynch wrote:

Desktop multicolumn layout setting for detail views


I was expecting something like this happened, but the option for multi-column layout was not on my side. The thing is, you need to turn on the Desktop Preview in the editor for the option to be shown, which is confusing when you just want to test the Desktop Preview without affecting users. I guess the team expect us to have a testing version of our apps?


@nphuoctuan wrote:

Today my problem about loops was solved


Not for me, the loop practically freezes the app eating up ram as crazy after yesterday's release

For reference, the loop in mobile mode is almost instant, same as it was between today and the last time it was fixed on Desktop

Yes, still same issue existing. I use the Form Save event to trigger a Group action that contains a repeat loop for creating child records and then Force Syncs certain tables, works perfect on mobile. This is Surely something that can be brought to top of fix list for a day or two.

 

I may just enjoy the other new changes released then. 

A change was being rolled out this week that is affecting the evaluation of the exit condition of the loop, such that it ends up looping indefinitely. We're rolling back that change for now until we have a fix for the underlying problem. I expect that rollback should take effect within an hour or two.

The loop is working again as expected, thanks.
I strongly suggest to test these scenarios before pulling the trigger

I've added a set of new tests for looping action scenarios, hopefully it will prevent this kind of regression from happening again.

Thanks @Adam-google  as always.

We noticed the grouped actions (not looping) is also give us slow response,do you believe tihs fix will bring the medicine to that?

 

There was recently a performance issue affecting all kinds of data change actions run in a sequence (looping or not), but a fix for that was released for that a few weeks ago. I no longer see a significant difference in my own test apps, so it might be something specific to the actions that you're running or the computed values in the rows involved. If you're ok with me accessing the app, could you send me the details for the app name and how to run the action involved? I can try to profile it and see specifically what's causing the time difference.

@Adam-google not specific to this thread, but could you elaborate on the performance issue for data change actions? Maybe point me to the release notes or announcements where this was mentioned? Was this a partial roll out or full, because I can queue up over 100 changes and it will take 5+ minutes before they are persisted. Thank you for the help.

For a few days the Syncing is getting very slow. And the error of duplicate request comes while Syncing.

Is there any way to improve the syncing speed a bit.

I got this issue about duplicate row too. Sometimes, it appeared and I didn't know reason why. It's never happen before. I just want to notice Appsheet's team

It could be a bugs. 

Hi there,

I am currently working on building an app in desktop mode, but I am experiencing an issue where the action button appears to be unresponsive or freezes when clicked. When I tried using the action button in mobile mode, it worked perfectly fine.

The button action in question is like this  FAQ: add row per value in EnumList  and I suspect that this might be a bug specific to the desktop mode.

I would greatly appreciate it if you could look into this issue and provide any assistance you can offer.

Best regards,  Julio

A change was being rolled out this week that is affecting the evaluation of the exit condition of this kind of action, such that it ends up looping indefinitely. We're rolling back that change for now until we have a fix for the underlying problem. I expect that rollback should take effect within an hour or two.

Desktop view is good

But in form view, I see you split to columns for this view, this is good, saving space, but the first column drawing type, It's not showing fully, and I can not do anything if it's showing's like this

kvngo94_0-1677774453869.png