Optimizing User Experience with UserCSS: Improving AppSheet's Latest Version Interface

[JOHNN]

Hello everyone, I'm Hòa. I wish you all a wonderful day. When using the latest version of AppSheet, one thing that really bothers me is the suboptimal layout while working with columns in the data section. You might have noticed that adjusting column names or other settings requires dragging from left to right, and everything doesn't fit in one screen. As I have some experience in web programming, not an expert but enough to tweak some display elements, I have written a CSS code snippet below to optimize the display for the new version. You can follow these steps:

Step 1: Install "Custom CSS by Denis" or "UserCSS" extension for your browser.

Step 2: After installing the extension, copy the CSS code snippet provided below into the custom code box.

.FormPageHeader.DesktopDetailView {
  margin: 0 0 12px;
  padding: 5px;
  font-size: 1.211rem;
  font-weight: 700;
  color: #3c4043;
  background-color: #eee9e9c4;
  border-radius: 3px;
}

.react-root .ExpressionControl .MuiOutlinedInput-root.MuiOutlinedInput-adornedEnd {
  padding-right: 1px;
}

.ReactVirtualized__Table__rowColumn,
.ReactVirtualized__Table__headerColumn {
  overflow: hidden;
  flex: 0 1 120px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ReactVirtualized__Table__headerColumn {
  font-size: 11px;
  font-weight: 700;
}

[aria-colindex="3"],
[aria-colindex="4"],
[aria-colindex="6"],
[aria-colindex="7"],
[aria-colindex="8"],
[aria-colindex="12"],
[aria-colindex="13"],
[aria-colindex="14"] {
  overflow: hidden !important;
  flex: 0 1 40px !important;
}

.ReactVirtualized__Table__headerColumn:nth-child(3),
.ReactVirtualized__Table__headerColumn:nth-child(4),
.ReactVirtualized__Table__headerColumn:nth-child(12),
.ReactVirtualized__Table__headerColumn:nth-child(13),
.ReactVirtualized__Table__headerColumn:nth-child(14) {
  overflow: hidden !important;
  flex: 0 1 65px !important;
}

.ReactVirtualized__Table__headerColumn:nth-child(6),
.ReactVirtualized__Table__headerColumn:nth-child(7),
.ReactVirtualized__Table__headerColumn:nth-child(8) {
  overflow: hidden !important;
  flex: 0 1 50px !important;
}

.ReactVirtualized__Table__headerColumn:nth-child(5) {
  overflow: hidden;
  flex: 0 1 120px !important;
}

.ReactVirtualized__Table__headerColumn:nth-child(1) {
  padding-left: 50px !important;
  flex: 0 1 200px !important;
}

[aria-colindex="1"] {
  overflow: hidden;
  flex: 0 1 200px !important;
}

.ReactVirtualized__Table__headerColumn:nth-child(2) {
  flex: 0 1 130px !important;
}

[aria-colindex="2"] {
  overflow: hidden;
  flex: 0 1 130px !important;
}

.ReactVirtualized__Table__headerColumn:nth-child(11) {
  flex: 0 1 100px !important;
}

[aria-colindex="11"] {
  overflow: hidden;
  flex: 0 1 100px !important;
}

.jss281,
.jss402 {
  padding: 0;
  overflow: auto;
}


[aria-colindex="6"],
[aria-colindex="7"],
[aria-colindex="8"],
.ReactVirtualized__Table__headerColumn:nth-child(6) ,
.ReactVirtualized__Table__headerColumn:nth-child(7) ,
.ReactVirtualized__Table__headerColumn:nth-child(8) 
{
  overflow: hidden !important;
  flex: 0 1 80px !important;
}

.SwitchToDynamic button {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}
.react-root .ExpressionSwitchControl {
    display: -ms-flexbox !important;
    display: flex !important;
    position: relative !important;
    width: 100%;
}
.WidgetHelperRoot > div > div >div {
  margin: 0px;
  padding: 0px;
}
.ExpectedTypes{
  display: none;
}

By doing this, you will be able to enhance your experience while working with settings related to the latest version.

I hope that AppSheet might consider implementing a similar feature in the future. I sincerely hope that this tip can be helpful for everyone working with AppSheet.

[jyothis_m]

Thanks for sharing @JOHNN 

[hien_nguyen]

Good Idea. I hope Appsheet update CSS for App editor appeance asap.

[Joseph_Seddik]

Thank you!

[SkrOYC]

Well, I guess @Jonathon is already working on an update for the new editor so that the "Improved column editor" option gets executed properly. Maybe your code could give him a bump

[Jonathon]

I have a version of the extension that makes adjustments similar to whats shown here. I don't plan on making anything public because I don't feel like playing whack-a-mole keeping up with AppSheets editor improvements.

I know that AppSheet is working on an overhaul of this editor element specifically, so @JOHNN's solution here is probably good in the interim!

[Fabian_Weller]

I once learned this from @Koichi_Tsuji :

You can perform any of the following actions to scroll horizontally with your mouse: Press and hold the Shift while scrolling up (scroll left) and down (scroll right) with the mouse scroll wheel.