Gallery of Browser-Based User Interface Designs for Business Applications


Alpha Anywhere comes with a variety of sample applications built-in. One of those applications provides working examples of many different user interface variations for displaying data from databases in a browser. The application also has buttons and links you can use to access additional tutorial material related to each example. The sample application itself can be examined to see how it implements each of the features.

The videos below guide you through this sample application, explaining each of the examples and showing you, for each example, how to find more information about how you can build something like it.

The name of this sample application is the "Application Server Demo". The name stems from the fact that it demonstrates parts of what Alpha Anywhere can do with a traditional browser connected to the Alpha Application Server (the web server built into Alpha Anywhere) as opposed to the older standalone, non-browser/server desktop use of earlier versions of Alpha Five (the predecessor to Alpha Anywhere) or the latest mobile client-side use.

The first video shows you how to make a copy of the sample application and then run it on your copy of Alpha Anywhere. The next video shows you around the app when it runs, and shows you how to find different examples by topic. The rest of the videos go through the examples, showing what happens when you run the sample application.

(Note that in the first video the narrator says that his version was already published and he already had a server running. That is probably not the case the first time you run the application and you'll need to click the Publish button and also start up the server when prompted.)

Table of Contents


Introduction

This video shows how to load the sample Web Componant Feature Overview application (labeled 'Application Server Demo' in the software) from the Alpha Anywhere Welcome screen that is displayed at startup. The application is run after it is loaded and the desktop forms are explored. These desktop forms are actually UX web components opening in xdialog windows. The options on the main page are explained and the publish process is opened by clicking on a link. Another link opens the published application in a browser. The first page that opens contains sample grid components in a tabbed UI component, and a second page which is also a tabbed UI construction contains sample UX components.

Watch Video


Main Pages

This video explains the common features of each of the primary pages in the Application Server Demo. Both pages are built using a tabbed UI component using a tree navigator control placed on the right column of the tabbed UI. The components in the navigator are organized in categories based on their primary features.

The home page in main body of the tabbed UI includes information about the page itself along with some video links to videos that show how many of the elements were constructed. The main index page allows for user login and information about the proper user name and password is shown on the page.

Both pages include some common support components including a component to edit the help that is available on every component and some special options to close open tabs or reload the page.

Each page has an option to find a feature. Most components have multiple design features. The “find a feature” grid component opens with a tree navigator to find various features that have been highlighted. When a component is selected for a particular feature, the detail view shows the help for that component as well as a graphic representation of how to find the component in the page navigator.

Watch Video


Grids - Basic Layouts

All of the common grid layouts are described in this video, including tabular, columnar and stacked columnar. Every component includes a help icon that gives information about the component and may include links to relevant videos. Various special features are described.

Tabular grids often include a detail view to show more information about a single record. The common methods to show a detail view such as in the grid rows, on the page outside the grid, and in modal and modeless windows are illustrated. The grids show various search methods, such as QBE (query by expression) and search sections with different formatting options such as using icons in place of buttons.

A special grid with multiple columns opens a modeless window the shows an image in the details that was “pre-fetched” or loaded when the grid was loaded. This method could be used to create a slideshow.

Watch Video


Grids - Scroll To Search

This video shows how grids can be built with scrollable regions to display a larger number of rows in a smaller view. One example shows how a detail can be shown in alternate locations such as to the right of the main grid. It includes a hidden search section with cascading dropdowns that can auto submit the search. A similar scrollable grid opens the detail in a modal window.

Grid can also group records based on a common value and add a header or footer to the grid when the value in the group changes. Two examples are shown with one showing how a header and footer can contain information about the group such as a summary of values. A second shows how the detail information can be hidden and just shown on request. Grids can be linked to other grids in multiple ways. One example showed linked grids below the parent grid in a tabbed construction and another shows the grids linked in a row expander where the child grids are shown under a row when the row is expanded.

Grid can summarize values and a sample shows how the summary section can have a customized layout. Various methods to search for specific records are shown in the video, including a tree navigator and a grid that combines multiple methods such as a popup search section with cascading dropdowns, a QBE search, and a quick search embedded in the grid to search multiple fields. The grid included an Excel export capability to export desired data.

Watch Video


Grids - Control Options

The video shows some special options such as how to close all open tabs in a tabbed object, or how to reload the whole page with a button. This video focuses on various options to show and work with controls in a grid. Alpha Anywhere has a feature to show different languages in text using special tags. An example grid shows how a page can be reloaded to show the text in various languages.

Various methods to lookup data to insert into a field are shown on a grid. These include various dropdown controls, using a grid for a lookup, the edit-combo control, and an auto-suggest list. The grid help identifies the methods used by each field.

Another grid shows how a check box column can be used to select records and then show these records in another grid using an Ajax callback method. An example showing how to show or hide a section of a grid based on a value on the grid is included on the demo.

A common requirement is the ability to upload images or files to a web server. A grid demonstrates how to upload files and images using a button on a detail view and also shows how to display the file contents or the image in a window after upload.

Watch Video


Grids - Maps, Security, Special

The Application Server Demo shows various methods to show Google maps in grid components. This video examines method such as opening a map in a window, an alternate view as an accordion view, and in a section under the main grid. The example show how additional information can be shown by placing the cursor on a map icon to show an info box. The example uses a link on the info box to open a detail view for the selected record.

The main index page allows for user login. After the user logs in, an additional option is shown on the tree navigator to show a grid that has invoice records filtered on the current logged in user. The help for the grid explains how the data is created to use in the filter and how the filter is applied.

Additional special grids are shown, including a grid that shows how to run YouTube videos. Another grid uses special server side SQL events to populate the data using a complex SQL expression to show data using a special filter.

Watch Video


UX - Maps, Charts

The second page of the Application Server demo covers UX components and a couple special components.

This video show various ways maps can be displayed in UX components. The first UX uses a list view to show a list of airports and their locations on a Google map. Selecting a marker icon shows the latitude and longitude of the airport.

The second video is built from a video that can be found from a link on the help for the map. It shows how multiple locations can be entered and then shown with markers for each address.

The third component shows how to enter a starting and ending address and plot a route with driving instructions.

Various charts are shown in components that are built from selected videos. They include different pie charts, line charts, and bar charts. Some components have notes on the page in addition to the normal help.

Watch Video


UX - Control Options

This video continues with some additional charts based on a data series. Other components demonstrate various UX control options such as how to build a simple animated slide show using a tabbed control that switches tabs on a timer.

One UX combines a variety of controls on the same UX, such as tabbed controls, frames, accordion controls, containers to format the layout of the controls, and dropdown controls. The component uses a list view control to select a single record to show in the main section of the UX.

Data entry often requires data validation. A UX component shows a variety of methods to validate data, including client side methods and server side actions. The component includes a notes section that shows which controls have validation and how to test each validation method. The notes section has special formatting and opens and closed with animation.

A UX component shows how validation errors can be shown on a component. Each error style is demonstrated by a component on a tab that automatically fills in a value. When the UX is submitted, the error is shown using the method listed on the tab control, such as icon, tip, block, global, and inline.

Watch Video


UX - Repeating List Control, Miscellaneous

This video shows how a UX component can save data in a parent table and multiple records in a child table using a repeating section in the UX. Options for the repeating section are included, such as adding or removing a row and using buttons to navigate from one row to another. Data for one field in the UX can be filled by an edit-combo control, and a date picker is used for a field in the parent section. The UX shows how calculated fields can be used to show some summary data from the data in the repeating section.

List view controls in a UX are very powerful and flexible. A list control on a UX is configured to show a display similar to many travel reservation sites where a list of hotels is shown and can be searched to find a desired hotel. The UX includes slider controls to filter the hotel list based on ratings and price. Another option allows sorting the list based on ratings, city, and price.

List view controls in a UX can be used as an alternative to a tabular grid component. A sample component demonstrates how a UX can be built that looks and behaves like a grid with a search section and a detail view that opens in a window. The component help explains how the various elements were built and styled.

A UX component is included in the Application Server Demo that shows how a UX component can replace a grid detail section.

The Application server includes some special components such as an image gallery. This is most commonly used in a mobile application but can also be very useful in a traditional browser based application.

Watch Video


UX - Reports, Security

The Application Server Demo includes multiple ways to show reports in UX components. A report built as a project report is shown as an embedded PDF report in a UX. Another UX opens the report as a HTML report which is much faster that generating a PDF report. The HTML report can then be saved in multiple formats including PDF. Another option shows how to create the report as PDF and show it directly in the tabbed UI control for the page.

The UX component builder includes templates to build special components to manage web security data. One UX used a list view control to show a list of users in the system which then opens a UX built from a template to create and modify security data for a user. If a user has logged in on the main page, and option shows another UX that allows a user to manage their security data.

Just as the grid page shows a method to filter data based on the logged in user, the UX page includes a UX component with a list view that is filtered to show invoices for the current user.

Watch Video