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,
The following issues were fixed in the May 1, 2023 release:

Item Description
Bug For desktop UI (preview), fixed autofocusing of dropdown inputs. When Auto Advance Forms is enabled, the form should automatically focus the next input after a value is entered. This was not working for inputs using the new desktop dropdown.
Bug For desktop UI (preview), opening a form now autofocuses the first input in the same manner as mobile.

Hi all!

I am reaching out to you for assistance with a problem we are experiencing when editing details in desktop mode. When attempting to edit a detail, we are presented with the following error message: "Could not find row with key". It's worth noting that in mobile and tablet mode, everything works correctly.

Could you provide us with any ideas or solutions to fix this issue? We appreciate your prompt response and attention to this matter.

faustosip_0-1682986974823.gif

 

 

Hi @faustosip , thanks for reporting this. We're currently looking into this issue. No ETA yet, but I'll reply back to this thread later when we have something to report. Thanks.

Hello @Peter-Google, thank you for responding to the message. Have you found any solution to the reported issue with desktop editing? You mentioned that you were investigating the problem, but no solution has been provided yet.

Hi @faustosip  , apologies for delay, this issue was fixed just a few days ago, I tested and it's working as expected for me too. Do you mind checking yourself and replying back to confirm? Thanks.

Prueba Sipnube 2023-07-03 08-36-44.gif

Hello Peter,

Thank you, now I am able to edit the row. However, I have noticed that the option to delete the entered row has been disabled. Currently, it only allows me to modify it. I would like to know how I can activate the delete option. Could you please assist me with this?

Thank you!

gscriptTR_0-1683037246160.png

If you have "Form Saved" behaviour and when you submit form,

gscriptTR_1-1683037514152.png

System creates extra rows.

 

First things first.  You have posted this under the thread for the new Desktop Mode in Preview.  Are you suggesting  that you get these extra rows inserted only while using the new Desktop Mode but it doesn't not happen if Desktop Mode is OFF?

If not, then please repost as its own Q&A item.  It would also help to include the implementation of your action(s) that contribute to the row insertions to best help.

[UPDATED 5/16] Thanks, we're not aware of a widespread issue of extra rows being created, so the issue may be specific to something as configured/specified in your app (possibly a bug, but we need to reproduce the issue to know precisely).

Thus, you will need to either provide us access to that app or a separate demo app. I pinged you via  private message for those details. I'll reply back publicly once we can reproduce the issue and have an understanding if there is a bug or not.

EDIT: Nevermind, this issue doesn't seem to be related to desktop preview.

--------

I'm seeing an issue where a child record added from the desktop preview is generating 2 add events for the same record. You can see the 2 "add row" events in the audit logs, as well as any relevant Bots being triggered twice in the automation monitor. Both records have the same key value. In the end, there is only the one record remaining. However this becomes an issue when you have a Bot that is generating other records upon the add, because now its generating actual duplicates.

Adding the child record in the mobile app does not generate any duplicates.

This is also coupled with using the appsheet-database.

@gscriptTR  Does @Marc_Dillon 's description above match with what you are seeing?  Or do you have different circumstances resulting in the extra rows?

Its completely unpredictable and I couldn’t find the root cause. This issue was there few days/weeks back and magically disappeared. I doubt it was after the release of Quicksync feature. 

Thanks @Marc_Dillon , I see your edit that says, "this issue doesn't seem to be related to desktop preview", however, can you clarify:

1) There is still a potential bug, but it happens in both legacy and new desktop (and thus is not specific to desktop)

2) There is no potential bug/issue with the platform, and some other root cause was determined.

Thanks.

@Peter-Google It was #1, there was a bug where each add was somehow counting as 2 adds of the same record, as seen in the audit logs, and thus triggering an adds bot twice. The 2 original records collapsed into one in the end, but the records being created by the bots remained as duplicates.

I had to get the app working asap, so I fixed the issue by switching the record-creation to a form-save action. I did make a copy of the app to possibly further explore the issue, but unfortunately (or fortunately?) I seem to no longer be able to repro the issue in the app copy...

@Marc_Dillon thanks for the additional info. I'm not entirely sure if a consistent repro is needed, so I'm asking around internally.

Eng debugged this case. What happened here is that the app was open directly in the editor as the emulator preview, with some changes, then the app was then opened in a separate tab. Each instance of the app has a separate "client ID", so when each instance of the app sends data to the server (e.g., via automatic updates), the server sees them as separate updates since the client IDs are different, hence 2 rows are added. This was confirmed via the audit logs.

We'll look into trying to avoid this, but for now, just be mindful of this behavior when using the editor vs opening in separate tab at the same time.

Hi,

The following issues were fixed in the May 4, 2023 release:

Item Description
Bug For desktop UI (preview), a bug was fixed where when enabling quick edit with deep links the edited values weren't showing.
Bug For desktop UI (preview), we previously had an issue where if the Valid If condition expression for an action used CONTEXT('view'), the action might not appear as expected. This fixes the CONTEXT() function to correctly refer to the current view that the action is rendered in, as opposed to the view that is on the top of the stack.

Hi,

The following issue was fixed in the May 5, 2023 release:

Item Description
Bug For desktop UI (preview), disables keyboard navigation while in quick edit mode on desktop. Previously, users could navigate between rows using the left/right arrow keys while in edit mode. This was unintended behavior and is now disabled. However, the arrow key navigation will still work while not in edit mode to provide a more intuitive user experience.

Inline card view in desktop mode is scrolling horizontally and only two row is shown in detail view. Hence its limiting the data shown to user. Each time need to go and scroll to see all the data. If there are 20+ rows and each time user have to scroll soo much to view latest data. Please fix this 🙏 @Arthur_Rallu  

Screen Recording 2023-05-10 at 1.18.00 PM.gif

We need it to be arranged vertically like this instead of horizontal scrolling inside an inline view.

Screen Recording 2023-05-10 at 1.18.28 PM.gif

Hi @Rifad , thanks for inquiring on this (thanks @WillowMobileSys for discussing). In the new Desktop UI, the layout of the inline card view depends on the Card View layout configured on the inline view being presented. Here are the Card View layout types:

PeterGoogle_0-1683926725458.png

For example, if I select list layout, the cards are vertical:

PeterGoogle_1-1683926793583.png

large layout is still horizontal (as is photo and backdrop):

PeterGoogle_2-1683926823097.png

For now, I recommend using the new Desktop UI, and the list layout type, to get vertical experience. It's an interesting feature request to request more customizability of the other card layout types, so I'll that add that to our internal queue for future consideration.


@Rifad wrote:

If there are 20+ rows and each time user have to scroll soo much to view latest data.


First, this should be resolved by sorting Descending so latest are always first


@Rifad wrote:

We need it to be arranged vertically like this instead of horizontal scrolling inside an inline view.


I think this is a matter of preference and it would be nice to have it configurable as either Horizontal or Vertical. 

 

 


@WillowMobileSys wrote:

First, this should be resolved by sorting Descending so latest are always first


@WillowMobileSys unfortunately my clients wanted it to be ascending and there are many scenarios we need ascending only. 


@WillowMobileSys wrote:

I think this is a matter of preference and it would be nice to have it configurable as either Horizontal or Vertical. 


I had noticed gallery view scrolling horizontal a while ago but card was still vertical scrolling for inline view. In my opinion there is no point in showing card with half information (I mean 2/20 rows in inline only). If i report it to support they will come up with an amazing workaround and tell us to use deck view. So thought I will post here.

Hello Admin @Peter-Google  @Arthur_Rallu@lizlynch  , I need your help. I have a planning app for a construction company that I think is very useful. I've been working on improving it for a while.

But I need in the calendar view to be able to remove the detail of the hours, that we do not occupy it and it subtracts important space on the screen

MiguelQ90_0-1683898071491.png

 Appsheets is an excellent work tool that has helped provide important solutions and I thank the team that is improving the tool day by day

Greetings and have a good day

Everything is translated with the google translator sorry i'm from latam

 

Calendar view is an old view that has it's quirks since years ago so don't expect too much changes from this side of things. Better look for a Feature idea that's related to it (or post your own)

Por otro lado habemos muchos que somos de Latam también y podemos ayudar con tus consultas. Cuando crees un post nuevo, tienes la libertad de usar el lenguaje que te acomode más

Hi @MiguelQ90 , thanks for the message, but we are already discussing this topic on the other thread. Please note I just replied yesterday (reply thread here) with suggestion of using the Kanban pattern. Perhaps you can review that suggestion next and reply on that thread, thanks.

This is something that we are Definity waiting for and will be a huge improvement for our Desktop users! 

@Arthur_Rallu Please can you update it

Hi  @Arthur_Rallu 

By (desktop mode)

The updated data in the "ASSET" table. Is not appearing while editing in the record for the column name [ Disposal During the Year]

The correct amount is SR151,000.00

E05_10.jpg

 

By ( tablet, mobile & Normal Mode ) 

The updated data in the "ASSET" table. Appears while editing in the record for the column [Disposal during the year]

E05_11.jpg

 

Data in OTHER tables will not be updated DURING a row Edit.  Only after the changes are saved will you see the updates to the other rows being made - either through action updates or Virtual Columns.

Also, the update did not appear after saving by (desktop mode), and i can see the updates if i use ( tablet, mobile & Normal Mode )

There problem with (desktop mode)

You are using the "Edit in place" mode

Yes, if you're using a form-saved event action to update the row this is probably the reason. Please check the settings of the Edit action, there should be an option there to choose "Edit in place" or "Open a form". For a form-saved action to run you'll need to use "Open a form".

Also the issue above with [Disposal during the year] appears to be a difference between "Edit in place" and form behavior with respect to when computed values get updated. With "Edit in place" the column gets recomputed the first time you change some other value, while the form recomputes it immediately on opening. So using "Open a form" should be a workaround for that as well, but we'll look into making this consistent.

Hi @Izzat_Safrah , thanks for reporting this. I pinged you via private message to get a repro app for this. I'll reply publicly again here once we can repro the issue and the next steps are clear.

Hi @Peter-Google 

Thank you so much, the issue has been resolved by your teams and the program is working properly.  🙂

 

Hi  @Arthur_Rallu 

By (desktop mode)

The updated data in the "ASSET" table. Is not appearing while editing in the record for the column name [ Disposal During the Year]

The correct amount is SR151,000.00

E05_10.jpg




Here's a bug i identified in preview mode: (unsure if this is right place or if there is another dedicated post for preview mode )

i have a view in which user clicks and then that triggers an action to perform Grouped:execute a sequence of actions. 

in Preview mode this grouped sequence is working only for the first action being triggered and the second action in the sequence never got it execution done. 

the user has to manually click again to trigger the second action sequence.

In Non-preview mode it works perfectly.

Do let me know if you need any further explanation.

 

Thanks @sandeepraon for reporting this. I'll ping you in private message for a repro app.

Hi @sandeepraon , it's hard to know for sure if there is actually a system bug, or just a bug in your expressions or other action setup. I pinged you via private message but didn't get everything I need.

Here's what we need to proceed on this:

1) A specified application that reproduces the issue, with access granted to the eng team for debugging

2) A clear set of repro steps that work for any user, like:

STEP 1: navigate to this view

STEP 2: click this button

etc..

EXPECTED: describe what you thought should have happened

OBSERVED: described what happened

You can get back to me in private message, or you can file a formal help/bug request with the support team via this link. Please do one of those if this is still an issue for you. Thanks.

I found a bug.

I have 3 things in my app - jobs, customers, calendar events.

I use automation to create/update/delete a calendar event when a job is created/updated/deleted.

When a new job is added, I grab the [Customer].[Name] and dump it into the calendar event title. When I add a customer on mobile it works fine. When in desktop view I can type text into the Customer input (mobile view only shows a dropdown). If I type random text, then add the customer, then save the job, the automation pulls an empty string for [Customer].[Name]. When using mobile it works fine.

When a new job is created, and a new customer is added from the job form, 

Thanks @knoppoly , I pinged you in private message regarding repro app.

I think I see the problem. There's a discrepancy in the order in which the requests are sent to the server. I'll look into making this consistent.