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!

79 1,230 72.3K
1,230 REPLIES 1,230

I think also that a specific topic shold be added for these posts so that things can be handled better at your end e.g.

New UI question

New UI Bug Report

Whenever anything is handled in a "threaded" manner such as in email, texts or forums,  details of conversation will be lost (actually "overlooked" because none of us want to keep scrolling back through hundreds of post).

So... the best way to handle these new Preview items, with regards to reporting progress, is to have a common Status page where all of us can check at a glance the current state and progress.  It could have information such as:

  • Known Limitations
  • Known Issues
  • Fixed issues
  • Last Release
  • Next Planned Release
  • etc

100% agreed.  Many moons ago I used to own an IT Support business and we used a tool called ConnectWise for ticketing and invoicing.  They used to run usergroup meetings every 4-6mths in 5-6 locations around the world.  The ONLY reason I used to go, loosing 2 days of actual work, was to find out which bits of the software didn't work.  Since without this knowledge you'd find yourself attacking a problem for a day assuming that you were somehow doing it wrong.   When in fact, that bit of the software just didn't work right ๐Ÿ˜–.

I agree with the overall sentiment and I have only myself to blame!
Generally speaking, the community announcement does not work well to collect that kind of feedback - that's also true on my side of things. I'd want to change that in the future (for new projects).

I'm currently making a pass through all of the issues that people have mentioned. I'll try to make a recap of them, but as we keep track of all these issues in internal tools, I won't be spending time back and forth between the 2. 

I appreciate all your patience.


@EliK wrote:

Does anyone have success with deeplinks in desktop UI?


โœ‹๐Ÿฝ

But I think the problem might be tied to deeplinks that open certain views on another app

@SkrOYC maybe you can help me. What was the expression sytnax you used.

This deeplink is not from an app, it is in an email template. The user is supposed to be able to click it and go directly to the Detail view of the record. Instead, it is opening the default starting view of the app.

Same here.

@Antonio_Laurean Thank you! I just responded to Appsheet support that other users have the same issue. Hopefully this bug will be squashed soon. @Arthur_Rallu @lizlynch 

I see... yep, it's a bug

I think it's an issue with the url. If you closely look at the url in desktop view, it's different than from the regular one.  and that's the reason it's not directing to Form or Detail view. I think even you cannot direct user in a deck view or table view as well from the email.

@Akshay_patel95 I totally agree with you. With the old desktop view, it was a straightforward URL. The new desktop UX has a long URL string, and I have the same problem with a deeplink to a deck view as well.

However AppSheet support  said they were able to successfully make a deeplink to the new desktop UX, and they think it's something about my app. 

 

@SkrOYC Maybe if more people report this bug to Support, they will be able to replicate it. @Arthur_Rallu @lizlynch 

 

Thanks!

@EliK I DM'd you. 

Found any solution?

Hola como puedo crear una columna virtual con el nuevo menรบ

First of all, Desktop mode is so great, thank you so much for this feature !

 

Do you have the same issue, on chrome, when using desktop mode ?

I zoom 75% and it shows like below :

 

kvngo94_0-1670721322944.png

 

Thank you for the excellent work on the Desktop View.
One issue that does not seem to be mentioned is that the formatting rules seem to be ignored in the Quick Edit Columns of the Detailed view. The following is the example:

Tablet View:

Andrew_W_0-1670864034823.png

Desktop View:

Andrew_W_1-1670864212080.png

The formatting rules make it very convenient to identify the status, it would be really nice to have them work in the Desktop view.

Screenshot 2022-12-13 at 1.02.39 AM.png

Looks like a bug

What happens, after the sync is finished? Your screenshot is seemingly taken while the sync ops is in the middle of ops.

Thank you

I was able to repro and the experience is not consistent if the grouping aggregate value is displayed in the groupby filter area or in the View itself. 

If we are going to desktop then it would be great to have more control over font size. Currently you cannot go smaller than 18 when you select your default font and too be honest that is way too big in my view. I end up using format rules just to reduce this but that can lead to some very inconsistent results especially since format rules appears to work inconsistently in the first place. 

If I could reduce the default size to 14 or 16 then that would be better

It could be controversial subject, as like me with the presbyopia, font size of 20 with appsheet feels confortable.

If you are desktop user then you can adjust the size of the font by chaning the zoom size of browser, 90% 100% 120% ETC.

 


@Koichi_Tsuji wrote:

If you are desktop user then you can adjust the size of the font by chaning the zoom size of browser, 90% 100% 120% ETC.

 


Thanks for the inspiration. I installed a chrome extension that now automatically zooms any appsheet.com page to 80%. That seems to achieve what I need. 

Anyway, any additional options to change the setting is always welcome, I just support your request. 

[Where has the ability to 'like' a comment moved to? ]


@alphacp wrote:

[Where has the ability to 'like' a comment moved to? ]


It's still present for me

Screenshot 2022-12-14 at 8.26.00 AM.png

 

But not for me. Perhaps I disabled it somewhere

Fixed. I hid it so save space on mobile

Hi @Arthur_Rallu last time with desktop mode I can create new record in group or all appsheet alway get valie at initital value which I set. But now when I click to a group value and add a new row, Appsheet will get value follow as group values. It is very high risk if user didn't check befor submit. Please return as orginal data. Thanks.

screenshot_1671087398.png

For me, the current behavior what you see and observe now is right thing to do.  So for me AppSheet team is on the right track.

Hi, @Koichi_Tsuji I don't think it is always the right track. If you have a table of data and you want to group by the status of workflow for easy view and control but you don't want to show the status on the input form the user chooses to change the status step by step by action as workflow. For example with the current group view when users choose a group and take an action to add a new row carelessly, they never know that they set the wrong status for the new row. Please fix the bug. Thanks

This should be fixed now with an experience that is consistent between mobile and desktop. 
I agree that it was problematic, because the selected value was obviously wrong. However, there was two possibilities for us to fix this:

  1. set that value to nothing - because it is not necessarily obvious if the user has in mind the selected value
  2. set that value to the one selected in the groupby filter

We chose to remain consistent and provide this optimization. 


@hien_nguyen wrote:

It is very high risk if user didn't check befor submit. Please return as orginal data. Thanks.


I spotted this months ago, but I don't think they will change it, the new desktop mode has a new way to handle context

Voted

@Arthur_Rallu 

What is the actual difference in the behavior in turning on/off the delayed sync settings with New Desktop UX?

For the current testing on new desktop UX, turning off the delayed sync option seems to be saving the data change quicker than in case of turning on this option. Yeah, it is troublesome when we use the same app with mobile phone as it is forcing sync everytime we made the changes in data, but on new desktop ux, the sync is kinda of background sync, so not disturbing the use of the app by the users, but the sync is finishing faster, which is benefit by turning off the delayed sync.....

 

@takuya_miyai 

Interesting. I'll have to come back to that. 
I see two questions though:

  1. What are the sync behaviors with that setting being ON/OFF for Desktop vs Legacy?
  2. What sync performance is expected in these configurations?

I found  a new bug.

there are somethings in my form_view that there aren't in my detail_view, and when I click the edit button they don't appear to be edited. It only shows the things in my detail_view.

SkrOYC_0-1671201654131.pngTo change this behaviour, you have to go to the system generated Edit view of that table and change to "Open a form"

Another bugs...

Even we set the detail view to be centered (aligned), the images are pushed to the right. Not center aligned.

739C1C84-C668-470E-8FBC-0574126BA5BC.GIF

โ€ƒ

cool!

1. โ€œINโ€ and โ€œContainโ€ expressions not working properly with โ€œEdit_ifโ€