I want to display some magnolia responsive page in a mobile app through a webview.
In this case I want to hide some section (branding and footer). Is it possible to hide some of these section by passing some parameter to the http url?
To hide some sections, you can configure variation of the template rendering that section for mobile channel and have the template render nothing for mobile channel.
To force mobile channel on desktop you can append ?mgnlChannel=smartphone to the url.
Related
I am working on a react web app where our clients can customize their app icon which should also get displayed on their phone's home screen if they want to add the app to their home screen. Currently it always displays the apps default favicon icon even tho I am overwriting it when the client customizes it. I can also see in the browser tab that i successfully overwrote the favicon. Any ideas how to solve that? Thank you very much!
Sounds like you're talking about Progressive Web Apps with the add to home screen feature -- might be a duplicate of How can I update home screen icon of my Progressive Web App?
I have a use case where I would like to leverage some existing pages from a Shopify powered store inside an Ionic Framework v6 React iOS / Android App (on web we will simply redirect to the appropriate subdomain). Unfortunately, Shopify has their iFrame options set to Deny so using an iFrame is not an option.
Image of where the Shopify Store should show up in my app
I've looked at the various flavors of inAppBrowser, and while this allows me to show the page, its a pretty jarring non-native app experience. What I really want is an Ionic React Component for Native that will allow me place a webview under my control constrained to a certain viewport of the page.
Ionic Portals are targeted at Native developers with fully native code bases but actually show this use case on the home page:
Image of Ionic Portal webview inside Native Tab Bar Application
I know portals are pretty new and I haven't seen any documentation about this but is it possible to use them inside of an Ionic React App to accomplish the behavior I want (or something in inAppBrowser or another plugin that I've missed?)
I want to autofill textboxes on website when the iframe is loaded, it should fill in the input text forms.
(my app and the iframe are not in the same domain)
i want to know if there's a solution to make this feasible
If you have control over both origins, then you can use the window.postMessage API to communicate between the iframe and the parent page.
If you do not have control over both origins, I don't think you can do that because of the same-origin policy.
I use Ionic for my iOS hybrid application,
I want to create a custom header and use a background image for all pages.
I want to know is there any way to create a master page in Ionic + AngularJS for using in another pages?
The answer varies depending on how you've already setup your app. Probably the simplest approach is to use a background image with CSS on the body of the page. That is just one line of CSS, but you'll have to consider how that image works or displays on various device sizes or if your app is in portrait or landscape mode.
I am creating a responsive web app using Angular and ui-router. I need different states to be loaded depending on what size a user's browser window is via CSS media queries.
e.g. For the main page state, the nav bar will contain different elements depending on what media query is active:
Mobile browser (320px - 480px) the nav bar contains 2 buttons (search & icon logo)
Tablet browser (480px - 770px) the nav bar contains 4 buttons (search, full logo, user profile, settings/options link)
Desktop browser (770px and 1500px) the nav bar contains 6 buttons (full logo, search, upload, user profile, settings/options, log out/in)
So I know I can just load all 6 buttons and just hide certain ones for the mobile and tablet browsers via CSS styles but I am seeking a more elegant approach. I want to load in only what is needed for each window width (media query). Is there a way to do this with Angular and ui-router?
I was lucky enough that a friend showed me this article https://medium.com/opinionated-angularjs/adaptive-web-design-and-angularjs-78e0837fa92 which basically will allow me to do what I need but not by media queries but by feature detection via Modernizr.
Here is the Github project https://github.com/ghengeveld/angular-adaptive-templating