Different screens for web and mobile and commentry

Hi Guys,

I’ve just discovered AppGyver, thank you for your generous free tier :slight_smile:

Before I proceed, can you please assist with the following questions:

  1. In my app idea, I have a mobile view (for Android and iOS) and a desktop view. They both run off the same database but the screens look different if you are logging in from computer vs the app on your phone. i.e. the desktop view has more/different elements because of the screen size. Is this possible to do in AppGyver?

  2. I see there is no chat component, is it possible to create a comment set-up where users only see messages they are “allowed” to see?

  3. Do you have a calendar view component?

Thanks x

4 Likes

Thanks for the feedback!

  1. Yes, you can for example create two Containers for your mobile/desktop views, and bind the mobile container’s Visible property (found under the Advanced properties accordion) to a formula systemVars.runtime === "native", and the desktop container’s Visible property to systemVars.runtime === "web". We have a more advanced visual navigation editor coming up too, which will allow you to e.g. show completely different pages on web vs. mobile (with many more configuration options available).
  2. You could make your backend just return data that the current user is allowed to see, or then make e.g. each message record contain a allowedUsers property that’s an array of user IDs, then use formula SELECT(pageVars.allMessages, IS_IN_ARRAY(item.allowedUsers, appVars.currentUser.id)) formula, which selects from the pageVars.allMessages array all items where the current user ID is in the item’s allowedUsers array.
  3. There’s a Pick date flow function to pick a date on mobile. We do have a calendar component in the works for web; it’s on my backlog to make public soon!
2 Likes

Thanks for such a speedy response. Most of it went over my head but looks like it can be done with some elbow grease :slight_smile:

I will get started in a day or so and would like to keep you updated :slight_smile:

RE: calendar component for web - when you say it’s on your backlog to make public, does that mean the “work” has already been done and you just have to push it out?

Dude, you are seriously good at customer service and feedback.

Cool, let me know how it goes, and be sure to watch the tutorial videos in the onboarding widget (at the bottom of the screen) and at the frontpage of https://docs.appgyver.com!

For the web calendar – yes, I just need to double-check a few things and make it available via the marketplace; I’ll ping you here!

@Tash took some time but the calendar component is now available as beta, paste iwOpKO-E_U0D6-PL1Tuklg into Marketplace search field to find it!

1 Like

Hi @Harri_Sarsa and @tash- I am also just starting out with AppGyver. I would like to build a simple landing page with some very basic functionalities (e.g. collect email addresses). I’ll demonstrate potential customers a landing page, either on my iphone or on the desktop view on their personal laptop. In what “view” format - Iphone vs. desktop web app - do you recommend to work/ develop the mvp in?

@Harri_Sarsa and @tash: where do you end up inserting the formula? What is the “visible” property - for the Container?

The Visible property is available in the Properties panel under the Advanced accordion:

As for what form factor to build it for first, I guess that depends on your preference – you can change the viewport width via the dropdown at the top left corner.

@Harri_Sarsa, I’m just now starting to look at making our app friendly for web and am feeling a bit daunted. This advanced visual navigation editor–any chance that’s a thing yet?

I just–for the first time ever–realized there was a device preview selector in the upper left-hand corner. What the what. No clue how I’ve missed that for the past 5 months. Posting here for other clueless no-coders :slight_smile:

1 Like

It was really timely for this to pop back up to the top today as I’m working on the same issue #1 :smiley:

For the record @Blake_Sieders , I couldn’t pull off a separate web vs mobile layout without turning the canvas into a nightmare (since it doesn’t display dimensions based on formulas, etc). So I compromised by limiting the content to 480px and putting a relevant lifestyle image as a background:

I’m having a hell of a time though trying to get the elements to be the viewport height so the scrolling all happens within the content container. Viewport doesn’t seem to work with web, and if you use screen height, it’s too much because of the browser’s navigation pushes the component off the page. I’m trying to find a figure that can compensate (ex: systemVars.dimensions.screen.height*95/100) but works on both desktop and mobile.

Please, please, please has anyone figured this out?!

Interesting, thanks for this @Erin_Wagner . I’m already having a fun time with my single-page app containers overflowing the canvas. I’ll be putting a lot of hours into this in the coming weeks, hopefully I can figure some of these things out.
Do you have a formula for the Left and Right margins to get “auto” centering for the web view?

For auto-centering on webview, I created a couple nested containers. The biggest one (Web Background Container) is set to cover the whole screen. The inner one that needs to be centered (Page Container) I used self-align:

Also, after some poking around in the forums, I was able to find a combination of settings that solved my component height issues!

  1. Started using systemVars.dimensions.window.height instead of screen or viewport height.
  2. Set largest container to Flex Grow to 1 and its max height to the window height.
  3. On the scroll container, set Flex Shrink to 1.

Thanks for this, I got it to work as well. But I think I’ll give up on the web app path for now, the page is difficult to work on in the composer with additional page-size containers, the app isn’t deploying, and there’s no custom domain anyway.

I’ll try to build the native app style now and see how that goes. I’ve never deployed a native app, so I guess I’ll have to get those accounts.

It took more than a month for Apple to accept my developer account, so make sure you move on that right away!

Also, in retrospect, I wish that I had originally built for mobile-friendly web (like I have now with a wide background and mobile-sized content page) and later taken on native development after the web version was dialed in. The web version bypasses the developer account costs on the Play Store and App Store and the days- or weeks-long wait to get app versions approve. It makes testing WAY easier, and doesn’t have any issues with edge cases that work in the preview app but have issues on the build file.

Sorry for taking a while to respond to this! We’ve been iterating the new navigation editor to make the advanced concepts there as clear as possible, but it’s still WIP. Good to see the discussion in this thread going strong though!

1 Like

Just curious, along these lines, what about mobile web view as opposed to just simply web view?