Universal Design System released, any issues?

We understand the frustration – it’s a huge change and some relearning how to use styles and layouting. For existing apps, there may be things we were not able to foresee, but please keep reporting issues so that we can answer and look into these things and get them sorted out as soon as possible.

@JOHN_WORSHAM The recommended way to use colors is to go under Theme > Colors and change the relevant colors to your own in each setting. So you have defined what the background, level 1 background, etc colors are in your own app.

If you only use a color once, I recommend not naming the color palette but just keeping it as a “local palette”. You can delete unused palettes from the theme editor (Theme > Colors).

@Tijs_Van_Woensel Yep, background color for paragraph was removed as redundant. If you need a background for a paragraph, use a container to set the background instead. If you need to remove the background color, delete the paragraph and drag a new one to the canvas.

@vereggen I’ve successfully used formulas like this: IF(DATETIME_IS_SAME(internalProps.value, repeated.current.date, "day"), theme.$smartColorPalette_primary.background, theme.$smartColorPalette_level2.background) so it is possible. Not sure what exactly is going wrong in your case. The existing functionality should not have been broken by this update though :confused: if you can, paste me the url to the page where this is broken and how to get there in the UI (DM me if login information is needed to access the app) and we’ll have a closer look.

1 Like

@JOHN_WORSHAM Yes, no way to set margins anymore. We changed over to a system of gaps instead, but existing layout should not break but keep styles that had been set – check if you can do a rollback from history, hard refresh with shift+cmd+r and use 3.1.8 preview and see if that fixes any issues with the margins etc? Nothing should have broken, at least without installing updates and not even with them, but you can rollback to before the updates in case something went wrong.

@Jose_Adolfo_Villalob try rollbacking until before component installations, hard refresh with shift+cmd+r and see if that works. If not, please provide your app id and a list of issues and places where they occur so we can check what’s going on. Composites can still be edited, open isolation mode (template editor) by selecting composite, under properties, the second icon.
Screenshot 2021-11-16 at 11.17.29

@Kieran_Doyle @Dan_Moser if you need to create a new 100% height component, make sure the page is migrated (check under Layout > Width & Height), then use a formula to set the component to systemVars.dimensions.viewport.height. I just noticed a bug with this if you’re not using a navigation header, but I’ll report that one. Old pages with components that are full height should be unchanged, even after updating components (checked just now with an older app of mine that this was the case, so if it isn’t try the rollback method above and let me know your app id if it doesn’t work).

2 Likes

@awesomeosep answered with query for more details :slight_smile:

@Roberto_Calcagno please try the rollback and refresh if you installed updates and something is not working after those – if not, please let me know your app id and a detailed list of issues encountered (pick the first page that has issues that reoccur) so we can have a look and get those sorted out :slight_smile:

AppGyver Head of Product here – deeply sorry for the issues everyone has been facing; we’re working hard to get to the root of everything reported here and provide fixes, so please keep describing the problems you’re having.

We have identified at least a few bugs with the % height and full-viewport layouts, and are working on hotfixes to these issues as we speak.

3 Likes

As soon as I press the “Migrate” button that it warns me in red to do for any component, it loses whatever margins I had set, noticeably Left or Right margins. Also, nothing stretches to the width of the containers anymore so I have go through and manually and set each thing to “Grow to Width” now, which is annoying. It should default to that like before.

Concerning Palettes and colors, what does “local palette” mean, and how do i access that?

And I must also ask - is there any updated documentation on how to use this new interface? This really should already be available to help us avoid most of this confusion.

Also, noticed the value of systemVar.Dimensions.Viewport.Height changed for some reason. For me this value decreased by approximately 12 pixels, which I used in formulas to calculate certain container heights, so what this did is create 12 pixel tall gaps on everything based off that.

So you understand what I am confronted with now, all of my screens/pages look like this now in Composer, so this makes me believe I need to go through every container, migrate, and set “Grow to Width”, fix Position or Gaps… and Ive got about 50 of these screens of varying complexity to do this with:
Capture

1 Like

Hi @Mevi … I think I’m putting the formula in the wrong place. I think it needs to go in Background Color. But it only allows me to select from the palette. There is no option for a formula?

Hi @Mevi … just to add a bit more detail … I have many pages/fields with formulas that toggle the colors (background and contents) and I can no longer access the formulas in the new interface. Is there a way to get these back or expose them? Note: I haven’t applied the changes in my main app but the Composer interface has changed. Can’t even see the old formulas to migrate :frowning:

image

@JOHN_WORSHAM yes, the migration to the new styles needs to do separately for each component, which I know and agree is very bothersome. The styles will not break before these migrations though, so if you have pages you don’t need to change in any major way anymore, there should not be a need to migrate them. But if you do want to work on the layout on those pages a lot, you unfortunately do have to do a lot of the styling over again, as it was not possible for us to predict and migrate styles over correctly to the new systems :confused:

(Some) documentation came out and is available here.

As for the local palette, please see the video I’m posting below.

@vereggen There is, although it’s a little hidden:

2 Likes

Found it and got it working! Tx :sunglasses:

1 Like

That’s weird, can you rollback? All the formulas I had for setting backgrounds were correctly migrated into local palettes, so something must have gone wrong with yours if they didn’t :grimacing:

So this area what basically “margins” are now?
Capture

Im wondering because when I had set a Left Margin on paragraphs or containers, after I pressed “Migrate” those Left margins did not translate into the new “Left spacing” as I would have expected. Is that a bug?

@Mevi … found the formulas in both apps … all good.

1 Like

@JOHN_WORSHAM I asked and the decision was made that if the component(s) are updated to use gaps instead of margins, the margins are reset and have to be set again manually. But migrate should only happen on command, when you choose to do it, so previous styles remain unless you go and change them. I would still recommend not migrating the component(s) unless you want to make big changes to them, to avoid the hassle of setting everything up again.

Is the migration over to the release mandatory or can we continue building under the pervious version? To be safe, can you please clone my 2 Apps please - 303336 & 278988. I have managed to rollback prior to the updates, which were catastrophic to my page layouts…

Hi! There should be no issues in building 3.X builds without migration, if you run into any please let us know. I can do the cloning, but I need the following:

  • Create two (empty) apps under your user and provide me their id’s
  • Give me your user id (from AppGyver - Composer Pro)

Hi Mavi, thanks getting back to me so promptly. I’ve created 2 ‘empty’ Apps 305789 & 305791 and my user ID is 626197.

Thanks, I rolled back and everything seems to be fine. The problem is that if I add a new page obviously the components follow the rules of the new design system.
For example, in my apps I use a container as a header positioned at the top, a container as a footer positioned absolutely at the bottom, a scollview of which I specify the height as a percentage, with the “Stretch to the viewport” option enabled.
Now with the new system I tried to specify absolute position and pixels from the bottom, but it is ignored. Furthermore, the height of the scrollview cannot be put as a percentage (ok the solution was found using a formula, but it is not the best).
I’ve a request:

  • please copy the content of the app 215397 into the new empty 305821, my ID is 555471
  • when will you implement the ability to duplicate an app and a page?

Best Regards

Roberto

I’m still trying to comprehend the new styling system. I’m trying to create a simple page to show 100% of an image. I have an icon for the user to click to Navigate Back. I can’t figure out how to space it down a bit:

Ideally, I would show it overtop of the image, but I also can’t figure out how to set the style for a background image.

Hello Mevi,

I am happy to see updates to the application like this and that I picked this product.

However…I have had to pretty much redo my app that I have spent a month or so tweaking to get things looking right.

Why did the updates not take into account previous settings?

I have to complaints:
1 - imho - the documentation should have been prepared and available with the update
2 - after doing the updates my app is noticeably slower

I will publish my latest version to my beta track on the play store and test more.

Question, will these updates increase or decrease the size of mobile apps?

Thanks,
TT

Hi,
I updated the new version this morning and have spend all day trying to figure the new system.
Unfortunately, this is not as straight forward as the old system and any component I have made changes to have crashed and unable to be opened in preview.

A list of problem:

  • The new universal theme is very confusing, there is no way to set margin in components, and align does not work.
  • so far, ‘set page variable’ does not work for me on preview at all

For example, I add a page variable called “color”, this is so I can change color of text upon pressing a button

I then bind the page variable to the color of the text #

Then set the button flow function to “Set page variable” → “color” → “hex#1c1212”

This before would change the text colour to hex#1c1212

But when preview this completely crash on phone and mobile preview for me and show “unexpected error”
Screenshot 2021-11-16 174622

I have attached the screenshot for you to trouble shoot. This is only the test app but my real app is showing the same problem.

Appgyver has been amazing for me before and I really hope this is resolve soon since its a major problem for my app.