Gone are the days of so called “Static” or “Semi Static” webpages. With the World Wide Web growing past its silver jubilee, web technologies evolving and outperforming their old selves every single day, the requirements and expectations of end-users have also come a long way. So, if you have a web based product, you have to set your sails and keep moving in the direction of this evolution, to stay alive in the race of being the best in your class. And so did we.
As of recent times, the benchmark of a web application is how interactive it is with users, how simply and quickly a user can accomplish the intended purpose with minimum number of page redirection and how fast the server responds to user actions. The modern age web applications mark the minimization of total page count and maximization of single page functionality. To achieve this, from a developer’s point of view, it is important to make the system perform as many actions as possible on the client side, without having to send request to the server. This, in fact takes a lot of unnecessary pressure off the server as well, which in turn improves its response time. And in case server interaction is needed and its response has to be shown to the user, only the required part of the page can be updated, instead of reloading the entire page or redirecting to a new one. As a result, less data has to be downloaded every time which also makes the whole process faster. And this is exactly where client side scripting aides like JQuery and asynchronous server interaction techniques like Ajax, come to the party.
What is JQuery?
How we implemented JQuery in Fedena 3.0
Fedena has always been known for its simplicity and quality user experience. Moving along the path of evolution, Fedena has gone through a massive makeover in its version 3.0. While the designing team has to be given most of the credit, the contribution of JQuery has also been immense. Let us highlight the most important of those.
The Main Menu
The main menu slides down when the “Menu” icon on the top bar is clicked, and it slides up again if we click anywhere in the page except the menu itself. This has been implemented simply by using the .slideUp() and .slideDown() JQuery functions. The links are grouped under different tabs based on their categories. When we click on any tab, an AJAX request is sent through JQuery to fetch the links that come under that category and the lower
is updated with the new links. Once a tab is clicked for the first time, the links for that tab are cached, thereby saving time for result fetching in future. Now, if we hover on a link, and if the link has associated sub-links, the sub-menu comes out to the right of the link, and to the left if sufficient space is not available on the right side. To set the position of the sub-menu, first we keep it hidden, find out the “top” and “left” of the link using the .offset() function, find the heights and widths of the link, the sub-menu and the main menu div using .height() and .width(), do required calculations with them to find out an ideal position for the sub-menu, set its position using .position() and finally show it using .show(). Simple enough.
The Data Palettes
The “Data Palettes” page is the new generation substitute for the old Fedena Dashboard. It provides each user with an informative and customizable homepage instead of just a collection of links. On clicking on the “Manage Dashlets” link at the top, a dashlet selection menu slides down with all the available dashlets. The user has to select the ones he wants to see and hit “Save”. The selection menu slides up and the lower main div is updated with the latest selections. While this process is completed entirely using JQuery and AJAX, the lower main div is where we have used JQuery and AJAX at their best. In fact, everything we do here, is through JQuery and AJAX only. The entire div is divided into 3 columns and each dashlet is assigned a particular column number and sequence number when they are selected. The dashlets can be just dragged and dropped from one position to another, and after each such rearrangement, an AJAX request is sent through JQuery to update the column number and sequence number of each affected dashlet. So, the next time the user comes to this page, he will find it just as he left. Each dashlet gives a particular information for a particular date selected from the attached JQuery Date Selector or the forward and backward date navigators on its two sides. Of the 3 icons in the top-right corner, the first is “Refresh”. The entire content slides up and comes down with the updated set of data. The second one is a “Minimize / Maximize” toggle. Any action on this will update the state in the database as well through AJAX. So if you leave it minimized, you will find it the same the next time you come back. The last one is the “Remove” option which removes the dashlet from the user’s selections. We got the concept of dragging and dropping from the “JQuery Portlet” widget, customized that and included all these features on top of it to bring out our “Data Palettes”.
August 16 2014
Foradian Technologies is a Bangalore-based company that builds innovative web applications for education domain. Fedena, the flagship product of Foradian is multipurpose open source school management software used by educational institutions, students and teachers worldwide for all administration, management and learning related activities. Globally, Fedena is partnering with thousands of educational institutions across developing nations of South America, Africa and Asia and their products and services are used by more than 40,000 schools and colleges in 100+ countries around the world.