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)

Before - Legacy design on desktop browser

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)

After/Now - Desktop design on desktop web browser

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!

[Rifad]

Support told me that only 3 actions is allowed in detail view for inline action. That’s really bad. There are scenarios that require more actions. Why do we have unwanted limit on things like these ? I would like to request AppSheet team to allow more inline actions per column in detail view. Is there any documentation or announcements regarding this limit. Looks like it was possible to have more than 3 actions before. But this limit was imposed recently.

@Arthur_Rallu 

[Jason_Spicer]

When using a dashboard view for related tables and click on add, it does not carry over related info to the form like it does with out the desktop mode. If you are on a detail view and click add on a related records inline view, it fills in the related columns from which you are adding from. I tried to see if anyone posted this but didn't see it.

[aneville]

We have seen the same issue

[Axel_Pro]

When performing certain "actions", the application freezes (most likely goes into an infinite loop).

A cyclic action that adds child records.

Condition "Only if this condition is true", It looks like this:

ISNOTBLANK(
	SELECT(PROJECT_STAFF_ROLE[staff_id],
		AND(
			[project_id] = [_THISROW].[project_id],
			IN([project_role_id], LIST(1, 4)),
			NOT(IN([staff_id], SELECT(RESULT_SALARY_ITEMS[staff_id_],
			[results_projects_id] = [_THISROW].[id])))
		)
	)
)

The action is performed until the content of ISNOTBLANK() returns an empty value

According to the test results, this part of the expression:

NOT(IN([staff_id], SELECT(RESULT_SALARY_ITEMS[staff_id_], [results_projects_id] = [_THISROW].[id]))) - causes a hang

Selection conditions containing NOT(IN()) having nested SELECT - cause a hang. Perhaps it's a matter of some one part in NOT() or IN() or SELECT() - I haven't tested in more detail

By rewriting part of the expression, we managed to achieve a working version:

ISNOTBLANK(
	SELECT(PROJECT_STAFF_ROLE[staff_id],
		AND(
			[project_id] = [_THISROW].[project_id],
			IN([project_role_id], LIST(1, 4))
		)
	) - SELECT(RESULT_SALARY_ITEMS[staff_id_],[results_projects_id] = [_THISROW].[id])
)

Expressions are equivalent to each other

Please pay attention to this

P.S. Everything works great in the old interface

[lizlynch]

Hi,

The following issues were addressed in the March 27, 2023 release:

Item	Description
Bug	For desktop UI (preview), Enum and EnumList now have better support for overflowing values. Enum and EnumList now support values overflowing to two lines with tooltips showing on hover whenever the value is likely to overflow. For example: In table quick edit mode, values now show ellipses instead of being cut off, but remain capped at one line, with tooltips showing whenever the value is likely to overflow.
Bug	For desktop UI (preview), in detail views, update the header image with "fit" configuration to adjust to the height of the image.
Bug	For desktop UI (preview), a bug was fixed that occurred when enabling edit-in-place in a detail view that was present as a menu option would open a separate view in a split configuration.

[SkrOYC]

I suggest you to fix that when you are using the edit in place config in a detail view it allows you to move between records using the arrow keys

[lizlynch]

Hi,

The following issues were fixed in the March 30, 2023 release:

Item	Description
Bug	For the desktop UI (preview), fixed an issue where data change actions with interdependencies between the column values were not evaluated correctly. For example, if setting columns A and B, where B has a formula like [A], B would capture the original value of A rather than the new one.
Bug	For the desktop UI (preview), fixed a bug where all fields could suddenly become read-only while editing a detail view based on a slice if the edits cause the row to fall out of the slice filter.

[Axel_Pro]

Hi!

I found an error: when switching to the detailed view from the slice (From the dashboard), the link is generated with errors

• This causes errors when editing a record - when you click edit, the first record in the slice always opens
• The navigation bar also displays an incorrect name - the name of the slice (not the view)
• The card is displayed in one column (without multi columns)

How to reproduce the error:

1. Let's take the standard Kanban Board template
2. Creating a new slice
3. Creating a view by slice
4. Adding a view to the dashboard

At the same time, do not use the "Duplicate" function to create a slice or view

Features:

• when creating a new view on the old slice - everything works correctly

After analyzing the links to the detailed view, we see the following picture:

• Working option:     "https://www.appsheet.com/start/7cbd7c2b-c5f5-47ed-a1ae-c37ad044f789?platform=desktop#viewStack[0][id...Control&viewStack[1][identifier][Name]=Project%20Details%20-%20In%20Progress&viewStack[1][mutableState][RowKey]=77b8be4e&viewStack[1][mutableState][SortBy][0][Column]=Due&viewStack[1][mutableState][SortBy][0][Order]=Ascending&appName=KanbanBoard-3938339"

• Not working option: "https://www.appsheet.com/start/7cbd7c2b-c5f5-47ed-a1ae-c37ad044f789?platform=desktop#viewStack[0][id...View&viewStack[1][identifier][Action]=detail&viewStack[1][identifier][TableName]=In_Progress_2_test&viewStack[1][mutableState][TableName]=In_Progress_2_test&viewStack[1][mutableState][RowKey]=77b8be4e&viewStack[1][mutableState][SortBy][0][Column]=Due&viewStack[1][mutableState][SortBy][0][Order]=Ascending&appName=KanbanBoard-3938339"

The link of the "Working option" is taken from the standard configuration of the Kanban Board template, after enabling desktop mode.

Dashboard with a new view:

Detailed view of the old slice and view:

Detailed view of the new slice and view:

Settings of the old view:

Settings of the new view:

The settings are the same - the result is different

Please pay attention to this

[amyplin]

Hello,

I tried to repro this in my own app and it looks like the two views are opening different Detail View configurations. Can you double check if that's the case for your app in the Editor? 

If not, feel free to send me a direct message with your app details so I can take a look at your app in case my local repro is incorrect, thanks!

[Axel_Pro]

Hi!

@amyplin, @Peter-Google, @Adam-google , @Arthur_Rallu 

For a visual demonstration, a test application (access to support is open):

appName=KanbanBoard-3938339&appId=7cbd7c2b-c5f5-47ed-a1ae-c37ad044f789

Look at the different behavior of the detail views in these two views

1. The slices are based on the same data

2. The "In Progress" slice has a "detailed view" created specifically for it

3. The slice "In Progress_test" does NOT have a "detailed view" created for it (uses the Detail view system generated)

Parameter	Working version	Not a working option
Row filter condition
VIEWS list (card)
Detail view	Specially created Detail view	Detail (system generated)
URL Detail view	https://www.appsheet.com/start/7cbd7c2b-c5f5-47ed-a1ae-c37ad044f789?platform=desktop#viewStack[0][id...Control&viewStack[1][identifier][Name]=Project%20Details%20-%20In%20Progress&viewStack[1][mutableState][RowKey]=0.4074672808&viewStack[1][mutableState][SortBy][0][Column]=Due&viewStack[1][mutableState][SortBy][0][Order]=Ascending&appName=KanbanBoard-3938339	https://www.appsheet.com/start/7cbd7c2b-c5f5-47ed-a1ae-c37ad044f789?platform=desktop#viewStack[0][id...View&viewStack[1][identifier][Action]=detail&viewStack[1][identifier][TableName]=In%20Progress%20_test&viewStack[1][mutableState][TableName]=In%20Progress%20_test&viewStack[1][mutableState][RowKey]=0.4074672808&appName=KanbanBoard-3938339
Detail view
Edit Row		The first one opens in the slice
name Detail view	Label Column	slice Name

As a problem, we can formulate the following:

for slices using a "detailed view", the created "system generated" generates incorrect links, which causes problems in using the application.

Workaround for current users:

For problematic slices, create a separate detailed view for each slice

Works as it should)

[amyplin]

We essentially treat different slices as different tables, so even though your 2 slices have the same filter condition set, they will be viewed as different entities and have different views associated with them. This behavior that you're seeing is working as expected and is consistent across Mobile and Desktop UI. 

[Axel_Pro]

@amyplin, @Peter-Google , @Arthur_Rallu
I think we've lost the thread of the problem a bit.

Let's go back to the starting point and the problem:

- When editing any record, the first record in the slice always opens

He also wrote about this @Guillermo :
https://www.googlecloudcommunity.com/gc/Announcements/In-Preview-New-UI-design-for-desktop-users/m-p...

All the rest of the information is an attempt to figure out in which cases this problem occurs and give the App Sheet team a detailed analysis of the problem.

Apparently the additional information only confuses and leads away from the real problem.

[WillowMobileSys]

---

@Axel_Pro wrote:

- When editing any record, the first record in the slice always opens

---

Others have reported they can't reproduce your issue.  I just tried myself and couldn't either.   

There are some gaps in your description versus the images - e.g. image shows a Kanban Test Dashboard used but there isn't any mention of setting this up - may make a difference.

One important detail is that you mention...

---

@Axel_Pro wrote:

The slice "In Progress_test" does NOT have a "detailed view" created for it (uses the Detail view system generated)

---

In my test, a dedicated Detail view WAS generated for the Slice.  Even if I deleted it, it was re-generated.  

Regardless, the important question is... are you "controlling" navigation to the Detail View or relying on AppSheets default implementation?  If you are using a custom action on the Card view to explicitly navigate to the Detail view then please show us that. 

If you are relying on the default navigation logic then it might just be you have encountered a bug that was since fixed and that's why the rest of us can't reproduce it. The bug may have been of a nature that it doesn't get fixed with a simple update or refresh of the Editor/Emulator.

I would then recommend to redo your setup of the TEST slice and Detail View by deleting what you created previously, REFRESH the editor and then replicate your setup to see if you can still reproduce the same problem.  If you can then please carefully note the steps, again, and inform us.  I, at least - hopefully others, will try again re-create your problem.

This is the typical nature of things still under development.

[amyplin]

Ah yes it seems like the multiple problems got lost.

Do you mind confirming that you're still seeing this problem in your app and if so, sending me a private message with your app details? I want to make sure I'm getting the right repro case!

[Axel_Pro]

Good afternoon!

@amyplin 

The indicated problem with editing was solved in the release of April 24, I apologize.

There is a less significant problem with displaying a detailed view in one column (despite the active option "Desktop multicolumn layout")

This is not so critical (you can work), and is solved by creating a separate detailed view for a specific slice.

@WillowMobileSys Thank you for your attention to the issue and the time spent)

[Arthur_Rallu]

Hi @Axel_Pro 
A while back, Amy and team released a new setting that lets you control if a Detail View will show a single column or multiple ones. 
Can you check this setting (Desktop multicolumn layout - at the bottom of this screenshot) in your app?

[Peter-Google]

Hi @Axel_Pro thanks for replying recently to @Adam-google regarding the cyclic action freeze topic. If you could also reply to Amy's question below on this thread, that would be greatly appreciated, we want to ensure the right repro for this topic. Thanks.

[Guillermo]

On the new Desktop, when I try to Edit a row, it always takes me to edit the first row.

I have this view of a Slice

I click on the third row and shows the details correctly

I click on the edit button on the top right and suddenly I am editing the 3rd row

I tried to delete all the rows of this table but still happening the same thing

[WillowMobileSys]

First, note that the new Desktop Mode is PREVIEW only.  You should not be using it in LIVE apps just yet.  This feature has been a huge undertaking and will take some time resolve the bugs before it goes into ta Beta release.  There is no timeline for when that will be.

I would first determine if this is actually a bug.  Turn OFF the new Desktop Mode and try the same step in the current Desktop view.  If you are taken to the correct row to be edited, then this is a bug with the new Desktop.

If not, i.e. in the current Desktop you are STILL taken to the wrong row to be edited, then there is something wrong with your data.  This symptom frequently occurs when rows are assigned the SAME row key.  So, I would check what column (or columns)  you are using as the row key.  If the same value(s) are being reflected in multiple rows then you will need to figure out a new plan for row keys.

I hope this helps

[Axel_Pro]

I can say with confidence that this is a 100% error )

Yesterday I tested the conditions of its appearance for a couple of hours, and wrote my observations on this in the post below )

[WillowMobileSys]

My response was to  @Guillermo 's issue.

Maybe you are confirming his issue is 100% error.  Fine.  But where?  Is it an error only within the new Desktop Mode?  Or does it still occur when "Desktop Preview" is off?

[Axel_Pro]

@WillowMobileSys 

• I confirm the problem @Guillermo 
• only happens in desktop mode
• other side effects and causes in a previously published post:

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

[Arthur_Rallu]

Hi @Guillermo 
I can't repro your issue. In my (simple) app, clicking on Edit lets me edit the record I selected.

Is the Edit action button the system-generated one or did you create a new one on your own?

[Arthur_Rallu]

ok it seems I need to check the post by Alex_Pro as well, maybe that'll point us in the right direction. 

[Axel_Pro]

@Arthur_Rallu in my message it is about the same problem

The message contains a small instruction on how to reproduce the error

What to pay attention to:

• You need to create a new slice (it works correctly on previously created slices)
• A new view needs to be created (in some cases it works correctly on previously created views)
• Do not use the Duplicate function to create a slice and view

Presumably, when creating new slices and views, one kind of link to the detailed view is generated (marked as "not working option" in my message)

At the same time, previously created slices and views generate another type of link that works correctly (in my message it is marked as a "working option")

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

[Adam-google]

I looked into this a bit, but I think it's mostly working as intended. Here are some observations that can help explain it:

- The original In Progress slice in the sample app omits some columns, including Owner Photo.

- When you make a new slice, by default it includes all the columns.

- When you make a new slice, it also creates a new system-generated detail view for the slice which may contain different settings than the detail view of the original slice (in this case the original includes a sort condition that is not set by default in the new one).

- In the new detail view, it's the Owner Photo column that's showing up as the large header image. It doesn't show up in the original because it was omitted from the slice.

Keep in mind when editing a sample app that the original slices and views may have non-default configurations, so if you want to make new slices/views that behave identically it's best to use the copy option. Otherwise you'll be getting default settings which may need further adjustment.

The only bug I can see is the editor shows the new detail view's main header image as "Auto assign (None)" when actually the app is choosing Owner Photo. So there is some error in the predicted auto resolution (the server / editor is trying to anticipate what the app will do when the option is set to "auto assign"). I'll file a bug for this. If you do want to hide the image, the best way would be setting None explicitly since Auto assign relies on heuristics that are sometimes hard to predict. 

[Axel_Pro]

The error can be viewed in the test application (used only for experiments)

• KanbanBoard-3938339
• appId=7cbd7c2b-c5f5-47ed-a1ae-c37ad044f789

[Guillermo]

Hi Arthur, Yes, the post of @Axel_Pro is supercomplete about this problem. In my case it happens when I have a Slice. It is possible that is a duplicate slice.

[sathishk]

Hi guys

i have the following bug in the desktop preview, strangely only on one of the two apps. This was fine last week.

Dashboard view > Interactive mode turned on > click edit in the detail view > No Save button

is this a bug or i messed up some setting?

Thanks for your time

[lizlynch]

Hi,

The following fix was made in the April 4, 2023 release notes:

Item	Description
Bug	For Desktop UI, the search value will get cleared when a LINKTOVIEW() action navigates to a view with a different underlying table.

[1minManager]

Yay 😃

[Adam-google]

@Axel_Pro I think the cyclic action issue will be difficult to reproduce without knowing the full configuration. For example, which table is the action based on, to which table are the rows being added, how do they relate to PROJECT_STAFF_ROLE and RESULT_SALARY_ITEMS, etc. The best chance of understanding it would be if we can inspect the app itself or a copy of it with the action configured in the way that caused the loop.

Fixes have also gone out for this kind of symptom recently which resolved it for others, so I wonder if it still happens if you try it today? If so, and if you're OK with us inspecting the app, could you enable support access and message me the app name and repro steps to run the action?

[Axel_Pro]

@Adam-google  Let me prepare a test application on some standard template and tell you the ID

[lizlynch]

Hi,

The following issue was fixed in the April 6, 2023 release notes:

Item	Description
Bug	For desktop UI (preview), a bug was fixed for action buttons and tabs getting pushed off the screen when resizing the split configuration.

[marquis_robert]

Having this bug on desktop preview - please see post - any help would be amazing:

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/Save-Button-Missing-Details-Page-On-Dashboard/m...

[Joseph_Seddik]

Is this feature still not recommended for production apps?

[WillowMobileSys]

---

@Joseph_Seddik wrote:

Is this feature still not recommended for production apps?

---

Correct! 

But that doesn't mean you can't use it - just as long as you accept there could be bugs AND that a feature can become temporarily unstable as they are actively working on current issues and improvements.

[Joseph_Seddik]

@WillowMobileSys Thank you!

[Suvrutt_Gurjar]

Unnecessary Tool Tip in Detail View Actions in Prominent position on Hover

The actions in detail view show the action name on hover in new desktop detail view as well as legacy detail view when the actions are in prominent position.

This tooltip is unnecessary in prominent position because the name of the action is easily visible. This unnecessary duplicate display gives a lesser user experience. Previously there used to be just a darker circle around the action on hover. I believe that is a correct approach for prominent position actions. The tooltip is of course great for inline and primary position actions, where the action name is not separately displayed.

[WillowMobileSys]

Correct!  Currently as implemented, "tooltips" shouldn't be shown here.  It is simply an annoyance. 

There has been some previous discussion on this.  Technically these are not "tooltips" but just Labels being shown in another way and, as you point out, are really meant for areas in the app where the Label is not physically shown.

HOWEVER, if a dedicated "ToolTip" property was added that we could control if it shown or not, then we could use these Hover items in a more meaningful way - either a Label on Hover OR more like real ToolTips - as an enhancement to the Label.