I want a dropdown having views options like mobile view, tablet view, desktop view.
Application Type
Reactive
Service Studio Version
11.14.0 (Build 54183)

I'm creating an application just a simple form, in that application, I need a dropdown that contains mobile, tablet and desktop views so that when I click on anything the preview will change according to it.

I've attached a screenshot of it.

mvp_badge
MVP
Solution

hi Abhay.
For the first solution I can't make a small application (but does not work in production). Just replace the blue text parts with your information.
for example:
yourname.outsystemscloud.com/PreviewInDevices/?DeviceName=Tablet&URL=/YourApplication
By doing so for development you have what you need, and you can reverse engineer what they did to make it fit your needs

for the second solution on your on the onChange of your dropdown you can add a javascript action pass the dropdown device label to the javascript and then have a function like this:

document.body.classList.remove('desktop','desktop-hd','phone','phone-hd','tablet', 'tablet-hd');
document.body.classList.add(($parameter.deviceLabel).toLowerCase()
,($parameter.deviceLabel+'-hd').toLowerCase()
);

kind regards,
Eric

mvp_badge
MVP

Hi Abhay,
If I understand correctly is that you are looking for is this functionality:
But then within your application, is that correct?
Easiest way is to just click one of these options and then click the blue "open in browser" button that will give you this
From the dropdown you can choose your device. If you want to share the screen in this mode just copy the url

If you want to mimic this yourself, you can have a look on how outsystems does it using iframes.

Or you can get close by changing the class selectors of the body text to the appropriate ones

Hi Eric, suppose you are on one basic form screen and I need one dropdown option that will show me the options for mobile, tablet etc views. So that I can see that form in different views.

mvp_badge
MVP

Hi Abhay,
You can try to use this url:
[your environment url]/PreviewInDevices/?DeviceName=Tablet&URL=/[your application name]

Alternatively you can have your dropdown selection change the class of the body element to
tablet, phone or desktop.
And change the body width accordingly, but this is a less elegant solution

I'm not getting you it would be better if you share a small application to explain with the dropdown option.

mvp_badge
MVP
Solution

hi Abhay.
For the first solution I can't make a small application (but does not work in production). Just replace the blue text parts with your information.
for example:
yourname.outsystemscloud.com/PreviewInDevices/?DeviceName=Tablet&URL=/YourApplication
By doing so for development you have what you need, and you can reverse engineer what they did to make it fit your needs

for the second solution on your on the onChange of your dropdown you can add a javascript action pass the dropdown device label to the javascript and then have a function like this:

document.body.classList.remove('desktop','desktop-hd','phone','phone-hd','tablet', 'tablet-hd');
document.body.classList.add(($parameter.deviceLabel).toLowerCase()
,($parameter.deviceLabel+'-hd').toLowerCase()
);

kind regards,
Eric

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.