Can we create a mobile app version exclusively, so that if someone attempts to access it on a computer or tablet, a message will be displayed indicating that the app can only be viewed on a phone?
On your main tab, you can make a visibility setting to display the components or collections only when device is detected as mobile and only show an error message if not.
And also add that same visibility to all Tabs except the main tab so all they see if the main tab + error message
1 Like
@Joe_Gabriele. Thank you for your comment. I tried that. If you hide the Tab, it hides it from both the Mobile and Desktop screen.
Thats why you have to leave 1 tab alone and only apply the visibility setting to the components
1 Like
@slscustom.ru, your solution helped me some. I will have to do it for every screen. I wish it was possible to do it once for all the screens and then display a message if someone is not using mobile. Thanks for your help.
@Joe_Gabriele, that is a good idea. However, it would take a lot to do that for all the tabs. Thanks.
How many tabs do you have though?
@ThinhDinh, I have 5 tabs.
Then I don’t think it’s that bad to have a tab-level visibility condition for those 5 tabs.
@ThinhDinh, I am thinking for future project that will be about 15 screens. Right now, this is doable by Tab-level visibility but not by components on each Tab. That would even be way too much work.
So you need component-level visibility as well? Wouldn’t the tab level enough, if you don’t want them to see anything on desktop?
@ThinhDinh, No, I do not need component-level. In fact, what I really need is App-Level visibility. Set it once for the app and be done with it. I am trying to make this visible to mobile phones only.
Yeah, so the recommendations above will work for you. You can not have an app-level visibility, but you can restrict non-mobile users to not see anything except a warning that this app should only be used on mobiles.
@ThinhDinh, Just to make sure. I had to set a ScreenWidth and test to see if it’s less or equal to 450px for the visibility. When I browse the app on a desktop though, it still shows the app title but nothing else. Is this best way to do this or is there a better way?
-
Use the Device Info integration to check the screen width of the signed-in user
-
Use a tab visibility condition of something like “Screen Width of signed-in user < 600” (just an arbitrary number).
-
Have a tab that shows for “Screen Width of signed-in user >= 600” and show the warning that this app should only be used on mobiles.
1 Like
@ThinhDinh, I got all of that with the exception of “show warning”. I do not see anyway to show the warning if it fails the test.
Have you created a specific tab for that warning?
@ThinhDinh, I am sorry but I do no think I understand your question. I am hiding the home tab with the tab-level visibility so that users don’t have access to the app.
Add one additional tab that is only visible when the resolution is larger than 600. Basically the opposite of the condition use to show the normal tabs. On that extra tab, add some text as a warning.
1 Like