![]() From there, a flipping clock animation counts down until your first break. You basically set the timer and click “start”. It’s built around the Pomodoro Technique and it runs natively right in your web browser. There aren’t enough adjectives in the world to describe the awesomeness of this timer app. See the Pen Pomodoro Timer by Yoong Ti Lee ( on CodePen. I can’t say that this flipping animation is perfect because I did spot a few laggy jumps.īut for a really simple plugin I’m definitely impressed. It’s also a really easy plugin to edit, tinker with and expand with your own features. This runs on vanilla JavaScript – so it has no dependencies. ![]() See the Pen FlipDown.js Example by Peter Butcher ( on CodePen.ĭeveloper Peter Butcher created this neat experiment using a simple custom plugin called FlipDown.js. Note that while the JS is a bit complex, I also think this would make a great learning project for someone who’s just starting to learn React. ![]() It works so smoothly and the design is exquisite. With it, you can build lighting-fast web applications and this clock design is just one example.ĭeveloper Libor Gabrhel created this as a small project for testing React. See the Pen React Flip Clock by Libor Gabrhel ( on CodePen.įrontend developers love React for its power and massive community. You’ll find some great snippets to reuse and this makes a nice base for experimenting in JavaScript. Even the HTML gets embedded through JavaScript.īut there’s also a lot to learn from this pen if you study the code carefully. There is a bit of CSS for styling but the entire animation setup and the structure all runs on JavaScript. So here’s a really interesting project that features a flipping countdown running in pure JS. See the Pen Flip Clock & Countdown by Shaw ( on CodePen. This method opens the ViewSettingsDialog.Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets This._openDialog("MainFilter", "group", this._presetSettingsItems) This._openDialog("MainFilter", "filter", this._presetSettingsItems) Opens View Settings Dialog on Filter page This._openDialog("MainFilter", "sort", this._presetSettingsItems) Every button has a handler method to be called when is pressed, and will open the corresponding section of the ViewSettingsDialog (Filter, Sort or Group).ĭefine the handlers: // Opens View Settings Dialog on Filter page If desired and for better clean code approach, the following code can also be inserted in a separated controller for the MainFilter fragment.Īs defined in the MainView, the buttons for Filtering, Sorting and Grouping are defined inside the table toolbar. ![]() This controller will manage the MainView view and also the MainFilter fragment. The dataset used for this example has the following structure: " textDirection="Inherit" visible="true" />Ĭreate a new fragment called ‘MainFilter’ to use it as a container to show the Sorting, Filtering and Grouping options to the user in a new Dialog. Git repository of this blog application can be downloaded here. ![]() So, we have to develop a dynamic way to define the columns and their values. In this case, the table can contain any type of values for a specific column, so the values cannot be defined statically. The columns and their values to be used to sort, filter and group can be defined statically in the XML view of the ViewSettingsDialog (see an SAP sample here). Today I’m going to explain how to Sort, Filter and Group data within a List (sap.m.List) or a table (sap.m.Table) with the ViewSettingsDialog element in a dynamic form. ![]()
0 Comments
Leave a Reply. |