The UX guidelines for sap.suite.ui.commons.ProcessFlow mentions of a header toolbar, with the possibility of a 'Full screen' toggle for the entire ProcessFlow control, apart from 'Zoom In', 'Zoom Out' etc. (see top right in the image).
However, the API doesn't have any aggregations to add neither the toggle nor any toolbar.
Is it possible to add a Full screen toggle to ProcessFlow control?
Note that these controls(or toolbar) are not part of Process Flow UI5 Control.
These buttons are places in the header content of sap.m.Page.
Nevertheless, sap.suite.ui.commons.ProcessFlow provides zoomIn() and zoomOut() methods.
And coming to FullScreen thing, you can use sap.m.SplitApp with mode as HideMode.
You can try Combinations here
P.S: Don't always go with screenshots. They could be jazzy and for demo purpose only.
Disclaimer: All opinions are personal. I don't talk on behalf of any employer.
Related
If you open the instagram app on your mobile and go to the explorer page you can see couple of buttons on the top of the page like "IGTV", "Travel", ... The interesting part for me is that you can scroll these buttons to the left or right. My question is how do we implement this feature in swift? do we use standard buttons in a specific container or use totally different things. thanks
Is it possible in Electron to put custom components into the native application header?
For example, to achieve a design as such:
Currently my app just has the default one with just the title text
Is there a way to make it bigger and put content in there? Or do I have to somehow hide the native header and recreate the native buttons myself?
I suspect it's the latter, but in that case, how do I hide the native one and hook up ability to drag the window with it?
Or is this design entirely not possible in Electron?
The design you're looking for can be achieved, but only on macOS, by using the titleBarStyle property set to either hidden, hiddenInset, or even customButtonsOnHover, in the options passed to new BrowserWindow().
This is explained in more detail in Alternatives on macOS:
There's an alternative way to specify a chromeless window. Instead of
setting frame to false which disables both the titlebar and window
controls, you may want to have the title bar hidden and your content
extend to the full window size, yet still preserve the window controls
("traffic lights") for standard window actions.
There might still be a few issues, such as not being able to drag around the window from its title bar any more, but they are documented in the Frameless Window page; for instance, this specific problem can be solved by adding -webkit-app-region: drag; to the CSS relative to the region(s) you wish to make draggable.
I'm working on pretty simple web side that cointains login screen (almost same as in demo presentation, white page with login and password) and main screen with sidebar and navigation bar. How should it be done? My plan is to build main screen using navigation bar, sidebar (just few buttons in layout basicly) and few layouts with content of the webside. On each button click change layout used to create content to another one, for example for Schudele button I'm gonna load layout that contains some tables, for About button plain text. Is it good idea?
So finnaly is should look like this:
init() function decides if user is logged or not and display Login page or Main page, Main Page is builded from modules like navbar, sidebar and content, content depends on sidebar buttons click. I'm right?
Handling it on your own is legit way to start or learn Vaadin. If you have a first grasp of this works out, the most common way to handle such a scenario is the use of the Navigator See the book of Vaadin.
With the Navigator you define Views and give them a name, register them with the Navigator. Then you can navigate your application with the Navigator, it takes care to give you nice ...#!view... URLs so the Users can have bookmarks and navigate your app also e.g. with the back button in the browser.
The Navigator hooks into an event system, where listeners (ViewChangeListener) can react to "before enter" and "leave". The "before enter" can be used to realize auth needs, since they are allowed to object entering a view.
This is not a question about JQM panels scrolling independently of the page, though that is an issue I've had trouble with and almost overcome, this is about making the panel scroll smoothly and ignore the device browser's edge event (or whatever the correct term is, I'll explain below).
Basically, I'm trying to replicate the menu on Google's mobile site, which naturally isn't using JQM like us common folk. I've got it pretty close, but the scrolling animation is very rigid. I need it be momentum-based rather than fixed to your finger.
Also, when you reach the top or bottom of the menu, it's considered the extremes of the document so the browser moves the whole document up or down to indicate the edge of the page. Instead, the page should never move while the panel is open and the menu should take on this behaviour within the panel.
Since I've set the panel height to 100%, this forces the address bar on iOS Safari to come down when the menu is open. This seems to be exactly what happens on Google, but if there's a way around this I'd love to hear it.
Finally, one downside of the way I've emulated independent scrolling is to just set the content wrap as fixed when the panel is open. However, this means the page always scrolls to the top when the panel opens. Any alternatives for this would be appreciated. I suppose I could just set the page top as scrollTop or something.
To summarise:
Panel menu needs to scroll smoothly (momentum rather than direct touch)
Elastic edge on menu rather than window
iOS Safari address bar interfering with height
Page fixed at top when panel open
If any of my descriptions don't make sense, just visit google.com on your phone and check out their menu.
ScrollFix seems to have solved all my issues.
The goal is to 'soften' hyperlinks off to external content slightly by displaying an external link bar at the top of the window, that displays above the content on the external website - containing a line of text that reads something along the lines of "The content you are viewing is not owned by this site, close this browser window to return to site name".
I know there's a way to achieve this using frames, but as far as I understand it frames are bad news for accessibility. Furthermore, if the user then accesses a site which itself has a frame set, there can be all sorts of fun and games!
Would welcome any feedback. Could something like this be achievable with jQuery perhaps?
No, you need to use frames. You need to have some degree of control, and the only way you can do that with remote addresses, is by keeping the user on your server, and showing the remote pages in a frame.
That being said, if the remote sites have a partnership with you, you could discuss a javascript option which displays a bar on the top of their pages whenever a specific cookie is set indicating the traffic came from your site initially.