Parent | Child | Previous | Next
 

Alpha Five Version 11 Videos


The videos below were published as part of the Alpha Five Version 11 release. Some of these videos may not apply to Alpha Anywhere.

Miscellaneous Grid, Tabbed UI and PageLayout Component Features

Number Category Description
M1 Client-side Show/Hide Expressions can use Animation The Grid and UX Component both allow you to define client-side show/hide expressions to dynamically hide and show controls on a component. Now, you can associate an animation effect with each show/hide expression you define. This video shows how you can do this.
M2 Group Headings in Grid When a Grid is rendered it can be useful to break the Grid up into logical sections by inserting Group Breaks into the Grid. These videos show how this can be done for both tabular and snaking columnar Grids.
M3 Summary Values in Group Headers and Footers You can include summary values in Group Headers and Footers.

(Contrary to what the video says, this feature is supported on both SQL and .dbf tables).
M4 Collapsing and showing rows in each Group When you turn on Grouping in a Grid, it can be useful to collapse and show the rows in each Group. This video shows how this is easily done.
M5 Scrollable Grids and Fixed Column Widths If a Grid is set to display a large number of records, it can take up a large amount of vertical space on your page. You might prefer to specify a fixed amount of vertical space and then have the Grid scroll within the specified window size, keeping column titles and summary values fixed in place when the Grid is scrolled.

This video shows how this is easily done:
M6 Setting Multiple Properties at Once Using Xbasic This video shows how you can use an Xbasic function when you are setting properties in multiple controls at once. For example, assume that you have built a component with many controls and you would like to wrap all of the control labels in language tags (<a5:r> and </a5:r>), so that you can internationalize your component.

Note: This feature applies to both the Grid and the UX Component. The video shows the feature in the UX Component, but the feature operates in exactly the same way in the Grid.
M7 Project Styles - Set the style of every component in one place to make it easy to change the style of every component at once. This video shows how instead of hard coding the style used by each component in your project at Design Time, you can now set the style to <ProjectStyle>. The actual style to use is set in the Web's Project Properties dialog.
M8 Default Value for New Records when doing data entry in the Grid Part. The Grid allows you to enter new records directly in the Grid part, or in the Detail View part. The Grid builder allows you to specify default values for fields in new records. This can be done by either specifying the field's 'Initial Value' property, or by specifying code in the 'onInitialValueCalculate' event.

In the case where data entry is done in the Grid Part (as opposed to the Detail View), the issue with the 'onInitialValueCalculate' event (which is a server-side event), is that it is only called once, when the Grid is initially rendered. So, if you enter a new record and then save that record, the event is not called before the next new record is displayed. This video shows how you can save the value of a field that was just entered inside the Grid's 'stateInfo' object, and then use the 'afterRowPopulate' event to retrieve that value and use it as a default in the next new record.

Note: The .setValue() method is not used to set the value of the field in the new record row because this would cause the new record row to go 'dirty'. Instead we get a pointer to the element and then simply set its value property.
M9 Tabbed UI - Tree Control The Tabbed UI displays a series of buttons on the left hand button panel. These buttons open the various pages in your application and shown them in tabs in the Tabbed UI. Now, you can organize these buttons in a tree control layout.
M10 Auto-suggest Control - New 'Contains' option The auto-suggest feature in the Grid and UX Component displays a list of matches as the user types into a field. Previously, the control displayed matches that start with the characters that the user typed. Now, you can configure the control to display matches that contain the characters that the user has typed. F
M11 Global Update Operation to Update a Field in Multiple Rows in a Grid When doing data entry into a Grid there may be times when the user wants to copy a value from one row to multiple rows in the Grid. Using Action Javascript is is easy to make a button that does a 'global update' operation on all visible rows in the Grid.

It is important to recognize that the action shown in this video is a 'client-side' action. No data is actually written to the database until the user clicks the 'Submit' button.
M12 Global Search and Replace Operation in a Grid When doing data entry into a Grid there may be times when the user wants to perform a search and replace operation on the data the currently visible rows in the Grid. Using Action Javascript, it is easy to make a button does a 'global search and replace' on all visible rows in the Grid.

It is important to recognize that the action shown in this video is a 'client-side' action. No data is actually written to the database until the user clicks the 'Submit' button.
M13 Date picker, Date/Time picker and Time Picker The Date picker in V11 has been substantially improved over the V10 date picker. It can be be configured as a date picker, date/time picker or time picker. It has a full Javascript event model. Many of the properties (such as the low and high date can be set dynamically using Javascript functions).

These videos give a tour of the new features.
M14 Auto-suggest and Edit-combo Controls allow you to select multiple values Both the auto-suggest and edit-combo controls allow you to enter multiple values in the field you are editing. For example, say you have a field called 'Send to' and you want to support a comma delimited list, such as 'Smith,Jones,King,Cohen' and you want the user to be able to select each entry in the list from the pick list.

This video shows how either the edit-combo, or auto-suggest control can be used for this.
M15 Using Action Javascript to toggle the show/hide state of any arbitrary DIV or 'container' using animation Animation is built into many of the objects in V11, but there may be times when you want to animate some arbitrary DIV or container. This is now very easy using Action Javascript. You can define complex animations without having to write any code.
M16 Changing the number of New Record rows shown in a Grid at run-time In an updateable Grid, the number of new record rows shown is a property that is set at Design time.

In some applications you might want to expose a property to the user to set this value at Run time.

These videos show how you can do this.
M17 Action Javascript - Open A Grid Component - How to Invoke a Server-side action when a Grid is Opened When you have a client-side event handler (such as a button's onClick event), that opens a Grid (in a pop-up Ajax window, a div, a tabbed UI pane, etc), you might want to execute some Xbasic on the server before the Grid is executed on the server. This topic discusses how you can do this.
M18 Grid and UX Component - Client-side Mask - Dynamically Setting the Mask at Run-time You can now specify a Javascript function to dynamically compute the mask for a control. The Javascript function gets called every time the control gets focus. When the Javascript function gets called, it can read data in the current Grid row, (or Dialog) and compute the mask to use based on this data. For example, say you have a mask for a telephone number field. In the US, UK and Europe, different formats are used for telephone numbers. The Javascript function can decide what format string to return based on the current value of the 'COUNTRY' field.
M19 Using jQuery Controls in a Dialog or Grid Component V11 tightly integrates the jQuery Javascript Library. This video shows how you can use a jQuery UI control in a component. In the video we show a jQuery date picker, but the principle applies to other jQuery controls as well.
M20 Grid Component - Setting Default Initial Properties - International Developers The Options, Set Default Properties command in the Grid Builder has always allowed you to set default properties for the Grid when you create a new Grid. However, if you created a new Grid from a Template, the default properties that you set were not honored. They were only honored if you created a blank new grid. Now, the default properties are used even if you use a template. This makes it much easier to customize the Grid builder for developers whose native language is not English.
M21 Grid Component - Search Part - Save and Load Search Criteria You can now use the new Repository feature in V11 to save search criteria to the repository and load searches from the repository.
M22 Repository Table - Managing Records in the Repository This video is aimed at advanced used who use the Repository feature in V11.

The video shows how you can create a Grid to manage the records in the Repository that 'belong' to the current component.

For example, when you save search criteria from the Search Part of a Grid to the Repository, the search is saved with the GUID of the current component. This is important because when you load a saved search, you only want the user to see the saved searches that 'belong' to the current component. If you want to manage the records in the Repository, (by creating a Grid that is based on the Repository table), you might want to filter the records in the Repository based on the Guid of a particular component.

Say you have a Grid called 'Customers' and you want to put a button on this Grid to show the Repository entries that belong to this Grid. You can do this by setting the filter on the target Grid to

componentGuid = ComponentGuid()
M23 Grid Component - Summary Fields - Styling Summary Values You can now define inline styles for summary values. You can also use the new BeforeSummarySectionRender event to make the inline style conditional based on the value of the summary field.
M24 Detail View - Animation Regardless of where the Detail View is shown, it can be animated. This includes the 'OnPage' and 'InGrid' options.
M25 Tabbed UI - Animating the Menu Panel You can now animate the showing and hiding of the menu panel on the Tabbed UI Component. To enable animation, check the 'Animation' property in the 'Tabbed UI Properties' pane.
M26 Ajax Windows - Animation Animation effects have been added for pop-up Ajax windows.

Important Note: Ajax windows that contain IFrames, which in turn contain display PDF files cannot be animated. As a result, the Animation property has not been made available for Ajax windows that host .a5w pages (since .a5w pages are hosted in an IFrame).

There are several animation methods that have been exposed. The 'slide' and 'fade' methods are based on methods in the jQuery core library. All of the other methods are based on method in the jQueryUI library. By default, both of these libraries are loaded. The Web Project Properties dialog contains settings which control if these libraries are loaded, and from where they should be loaded.

You can control the animation effect for the window display and the window close. You can also control the animation speed. Certain animation styles will mess up the positioning of windows. If you find this to be the case, you should stick with the 'Fade' style for the 'show' animation.
M27 Grid Component - Tab and Accordion Controls - Animation You can now animate the tab and accordion controls in the Grid component.

You can control the animation method to hide and show panes. The animation methods are 'slide' and 'fade'. You can use one method to show the pane, and another method to hide the pane. For example, you might choose to 'slide' the pane into view, but 'fade' it out of view.
M28 Tabbed UI/Page Layout Components - Animation You can now animate the tab and accordion controls in the Button Pane of the Tabbed UI and Page Layout components.

You can control the animation method to hide and show panes. The animation methods are 'slide' and 'fade'. You can use one method to show the pane, and another method to hide the pane. For example, you might choose to 'slide' the pane into view, but 'fade' it out of view.
M29 Grid Component - Row Expander - Animation You can now set animation options for when a row expander in the Grid is opened or closed. To turn animation on, check the 'Animate' property in the Row Expander section of the Grid Builder.
M30 Automatic Backup of All Component Files Whenever you edit a component, it is automatically backed up.

By default, the backups are stored in the _backup.backup folder in your Web Project folder. You can specify where backups are stored by going to the Web Project Properties dialog.

For example, you might want to store your backups on a different machine, or in a folder that is linked to your 'DropBox' account. If you store your backups in a DropBox folder, for example, then all of your backups will be automatically backed up into the 'cloud'.
M31 Action Javascript - Open .a5w Page - New Options for the Target Window This action now has additional options for the target. Previously, the target could be a pop-up Ajax window, a DIV or a Tabbed UI Page. Now you can also specify 'Browser window'  to open the target page in a new browser window.

When you select the 'Browser window' option, you can specify several different options to control different aspects of the browser window.
M32 Grid Component - Making a Grid Behave Like a Data Driven Accordion Component
Using the new 'Row expand method' property, you can make a Grid component behave like a data driven Accordion Control.
M33 Grid Component - Search Highlighting The search highlighting feature highlights the strings in the Grid that match your search criteria. This makes it easy to see why a particular record in a Grid was selected when you executed a search.
M34 Action Javascript - Opening PDF Files - New Options PDF Documents - Tabbed UI, Page Layout, Grid and UX Components - All of these component allow you to create Javascript actions that open static PDF files, or dynamically generated PDF files (from Alpha Five reports). Now you can control several aspects of how the PDF in initially rendered. For example, you can set the zoom level to 50% and navigate to page 2 of the document.
M35 Abstract CSS Class Names  

V11 Introduces the concept of 'Abstract CSS Class Names'. When you design a Component, all of the HTML is now marked up using abstract CSS class names (e.g. [class.gridPartSelect]). A class map defines how the abstract CSS class name maps to the physical class names in your CSS stylesheets.

This is a very powerful concept because it gives you very granular control over the styling of different elements in your components. These videos explain the concept in more detail.
M36 Action Javascript - Binding an Argument Value to Result of a Javascript Function (This video is aimed at advanced developers). When you use Action Javascript to open a Grid, Report, Dialog, Custom Component, etc. you often need to bind the value of an argument to a value from the parent Component. For example, you might bind the value of 'arg1' to the value of the Lastname field in the current Grid row.

Now, instead of binding an argument to the value of a field in the Grid, you can specify an arbitrary Javascript function to execute. The argument is bound to the value that this Javascript function returns.

(Requires build 3816 or above)
M37 Advanced Client-Side Show/Hide Expressions - Calling a User Defined Javascript Function when a Show/Hide Event Fires (This video is aimed at advanced developers). When a client-side show/hide event fires, you can now define your own Javascript function that will get called.

This video shows an interesting use of this functionality. In the video, we show a Grid with a Detail View. In the Detail View, a large number of fields are hidden by show/hide client-side events. The space taken up by the hidden controls is not completely eliminated because the controls are contained in rows (<tr> tags) that are not hidden. We use the Javascript function to hide the empty <tr> tags.


(Requires build 3816 or above)
M38 Tabbed UI on Mobile Device A very common pattern when building Web Applications in Alpha Five is to use the Tabbed UI component as the 'home page' for the app. All of the pages and components in the app are accessed from the Tabbed UI. However, when running on a mobile device (tablet or phone), the Tabbed UI consumes too much real estate.

This video shows how you can set a property in the Tabbed UI to change the way in which the Tabbed UI component renders so that it is more appropriate for a mobile device.


(Requires build 3822 or above)
M39 Edit-Combo - AfterSelect Event - AjaxCallback This video discusses firing an AjaxCallback in the AfterSelect event in an edit-combo control.

This video applies to both a Grid and UX Component. (This is the same as video D31)
M40 Getting the User's Current Location and Tracking Location Changes using Action Javascript Shows how you can use Action Javascript to get the location of the user and store that information in the Grid or Dialog object. Also shows how you can fire events when the users location changes. This is particular useful in the case of a mobile device.
M41 Setting Session Variables when a Child Component is Opened using Action Javascript When you define an button using Action Javascript to open a child Grid, Dialog or Custom Component, you can also set session variables at the same time that the Ajax callback is made to open the child component. The session variables can be set to constant values, or to values returned by Javascript functions that you define. For example,  you might read the value in a field in the parent Grid and then use that value to set a session variable.


(Requires build 3851 or above)
M42 Displaying the Value of an Argument that Was Passed into a Grid In many cases, a Grid is filtered based on the value of one or more Arguments whose value is set at run-time. This video shows how you can display the value in these arguments a free-form edit-region on the Grid. For example, the Grid might be filtered on an argument called 'WhatState' and you want to show this text in a free-form edit region:

Showing records in: ( value of :whatstate argument)

(Required build 3852 or above)
M43 Understanding Global Javascript Variables and the 'Window' Namespace

Storing data in global Javascript variables is often the easiest way to pass information from one component to another. Global Javascript variables are stored in Javascript's 'window' namespace. These videos give a quick introduction to global Javascript variables, and the Javascript 'window' namespace.

(Note: The concepts discussed here are used in video D37)

M44 Filtering a Grid Based on the Current Logged in User

Data in a Grid can be filtered based on the current logged in user. This video shows how to set a filter in a Grid so that only data for the current logged in user is shown.

The Grid filter uses an argument whose value is set to a session variable. This session variable is populated when the page that contains the Login Component runs when the user logs in initially.

M45 Communicating Between Components - Sending Commands from one Component to Another asdf Often, when your application is displaying multiple components on the screen at the same time you will want to send a command from one component to another component. For example, when a child Grid is opened in a Row Expander, you might want to set the default value of a field in the child Grid to a value from the parent Grid, or vice versa.

These videos build on concepts discussed in video M43
M46 Using Xbasic to Generate HTML by Merging Data into Templates - Understanding the a5_mergeDataIntoTemplate() Function. asdf This video is aimed at advanced developers who are generating HTML in hand coded Xbasic scripts. The video demonstrates how the a5_mergeDataIntoTemplate() function can be used to easily create HTML content by merging data from a query into an HTML template.

M47

Dynamically Change the Choices for a Checkbox, Radio Button, or Dropdownbox Control in a Grid.

When you place a checkbox, radiobutton or dropdown box in an editable Grid, the choices shown in the control are the same for each row in the Grid. This video shows how you can make the choices for each row in the Grid dependent on some other field in the the current Grid row. NOTE: You might also find video number D41 relevent.
M48 Using the Checkbox Column in a Grid to Select Rows and then Opening another Grid Showing the Selected Rows. In this video we show how you can select multiple rows in a Grid and then click a button to perform an Ajax callback and open another Grid showing just the records that were checked in the first Grid.
See video 87 and 88 for additional information.


Download Components Used in Video
M49 Displaying the Search Part in a Pop-up Window. This video shows how the Search Part of the Grid can be shown in a pop-up window, rather than on the page, as it is by default.

Watch Video
In this next video we show how this technique is refined by automatically closing the pop-up window when the user submits the search.
Watch Video
M50 Action Javascript - Message Box Action - Advanced Options This video shows how you can use the advanced options feature in the Message Box Action in Action Javascript to create message boxes that are much richer than the built-in Javascript alert() and confirm() functions allows.

This feature is a Subscriber Benefit.
M51 Displaying a Fade Out Message on a Grid when a Record is Saved A common pattern in web applications is to display a transient message (a 'fade out' message) to confirm that an action has taken place. This video shows how you can easily create fade out messages in your applications, and in particular how easy it is to add a 'fade out' confirmation message when a record is saved.

This feature is a Subscriber Benefit.


Note: For an example of a fade out message on a Dialog, see video number D49.
M52 Opening a UX Component in a Grid Row Expander to Edit a the Current Grid Row See video D58.
M53 Opening a Grid Component from a Button and Passing Arbitrary Data to the Child Grid Component This video shows how you can define an Action Javascript event handler to open a child Grid component and pass arbitrary information to the child Grid. In the video we show how the child Grid then consumes the data that is passed in to it when it makes an Ajax callback.

Watch Video

M54 Using a Grid Component in a Desktop Application - Automatically Closing the Host Xdialog Window when Data in the Grid is Saved It is easy to use Grid and UX Components in Desktop applications. For example, you might have a button on a form (with code generated by Action Scripting genie) that opens a Grid or Dialog in a window. In this video we show how the pop-up window, in which the Grid is hosted can be automatically closed when the user makes an edit to data in the Grid and then submits the Grid.

The techniques shown in the video apply equally to a UX Component.


M55 Using a Grid Component in a Desktop Application - Calling Xbasic from Events on the Grid. In this video we show how easy it is for Desktop application developers who use Grids and Dialogs in their applications to call Xbasic when a button on the component is clicked.
The techniques shown in the video apply equally to a UX Component.
Watch Video

M56 Setting the Text in a Label or Button Automatically when a Client-side Expression is True - Conditional Text and Events See video D63

M57 Debugging Server-side Xbasic in Web Applications - Live Preview Prior to build 2921 you could not use the Xbasic debugger to debug server-side Xbasic in a running Web Application. While you have always been able to use 'Working Preview' to debug server-side Xbasic, this approach has limitations (for example, session variables and the Security Framework are not enabled in 'Working Preview').

Now, as long as you are running in Live Preview mode, you can debug any server-side Xbasic by simply inserting 'debug(1)' into your Xbasic. This includes Xbasic inside .a5w pages and Xbasic in your server-side event handlers in Components.

Watch Video
M58 Storing State Information in the Grid or Dialog Object This video is for advanced developers. It shows how 'state' information can be stored in the 'state' object in the Grid or Dialog object. The data in the 'state' object can be read in both client side and server side events. It can also be set in either client side or server side events.

In many cases, storing state information in the Grid or Dialog object's 'state' object is preferable to using session variables.


M59 Marking Records as 'Deleted' without Physically Deleting Them In some applications you might want to allow users to mark a record as 'deleted' without physically deleting the record from the table that the Grid is based on. This is easily accomplished by adding a logical 'isDeleted' flag to the table and adding a button to the Grid that sets the value in this field. You might also want to allow the user to easily filter out the records that are marked as 'deleted'.

This video shows how this is done.
Watch Video
M60 Three-state Logical Checkboxes In some applications you might have a logical field in a Grid that is displayed using a checkbox. If the Grid is based on a SQL table that allows for NULL values, there are really 3 different states that the field value can have: true, false and NULL. HTML checkbox controls only have two states - checked, or unchecked, so by default the checkbox will appear unchecked for both the false and NULL state.

Using Javascript, it is possible to set a checkbox state to 'indeterminate'.


In this video we show how you can set a checkbox control in a Grid to the 'indeterminate' state if the data in the field is NULL.

Watch Video

Mapping and Geography Features - Using Maps in the Alternate View and the Search Part

These videos all use the sample Microsoft SQL Server SQL Airports Database. You can download this database.

Number Category Description
GM1 Google Maps/Alternate Views-Introduction  

Grids have a property called 'Alternate Views'. An Alternate View is simply another way of displaying the data in the Grid. You can define custom Alternate View (using Xbasic), or you can use one of the built-in Alternate Views. The most commonly used built-in Alternate View is a Google Map. This is used to plot the data displayed in the Grid as markers on a Google Map. The following videos show how you can use the Google Map Alternate View in a Grid.

This video show:

1) Defining an Alternate View with a Google Map and showing a marker on the map for each record in the Grid.
 

2) Defining the bubble help for each marker on the Grid so that it shows data from the corresponding record in the Grid.
GM2 Google Maps/Alternate View-Customizing the Marker Title and Info Box This video continues from video GM1. The video shows how you can customize the 'info box' for each marker on the map. The 'info box' is a small window that pops up when the user clicks on a marker.

The video shows how you can put any HTML that you want in the info box and how the html can include placeholders to include data from the corresponding row in the Grid. The HTML can also include Javascript commands. In the video we show how you can insert the Javascript to open the corresponding Detail View part for the current record.
GM3 Google Maps/Alternate View-Dynamic Marker Icons-Alternate View Layout Options This video continues from GM2. The video shows how the icon for each marker that is placed on the map can be dynamically specified. So, for example, if record 1 in the Grid was for a customer with a low credit rating, the corresponding icon on the map might be red. If record 2 was for a customer with a high credit rating, the corresponding icon on the map might be green.

In the video we have a Grid based on our sample Airports table and we show how a different map icon is used depending on the elevation of each airport shown in the Grid.

The video also discusses the different ways in which the Alternate Views can be shown on the Grid. Alternate Views can be shown in Tabs, or they can be shown on the main page, alongside the main Grid.
GM4 Google Maps/Alternate View-More Alternate View Layout Options This video continues from GM3. The video shows more options for how the Alternate Views and the main Grid can be displayed on the page. It shows how you can display the Alternate Views in accordions, tabs or on the main page.

The video shows how you can even suppress the display of the main Grid part and only show the Alternate view.

In the video, we show the map, with a marker for each row in the Grid. The Grid itself is hidden. However, when the user clicks on a marker, the Detail View for the current row in the (hidden) Grid is shown.
GM5 Google Maps/Alternate Views-Dynamic Marker Circles When you place a marker on a map you have control over the marker icon, bubble help and info box text. You can also draw a circle around the marker and you can control the color of the circle and the shading of the interior of the circle. The circle and its color can be used to convey information about the corresponding record in the Grid.

The ability to draw a circle around the marker could be used to indicate the service area of a branch location. Or it might be used to represent the relative price of a house in a real estate application. For example,for more expensive houses you might draw a larger circle around the marker on the map.

In this video, which shows a Grid based on the sample Airports database, we draw a circle around each marker on the map. The radius of the circle is proportional to the airport's elevation.
GM6 Google Maps/Alternate Views-Dynamic Images and Image Sequences When you place a marker on a Google Map, you have full control over the icon that is used. You can specify an expression that evaluates to the icon name to use for the marker. Or, you can specify an Xbasic function that will get called for each row in the Grid. The function can compute the marker icon based on the data in the current Grid row.

You can also use built in image sequences. An image sequence is a set of numbered icons.

In this video we show how you can use an image sequence in the map and also use the same sequence in the Grid itself. This makes it very easy for the user to see a record in the Grid and immediately locate the corresponding marker on the map.
GM7 Google Maps - Layers When you place a marker on a Google Map you can assign the marker a logical 'layer' name. For example the layer name for a marker could be 'High Risk', or 'Medium Risk', etc. Then using the automation features on the map that Alpha exposes, you can hide and show different layers on the map. For example, you might put a checkbox control on your Grid with these entries: High risk, Medium risk and Low risk. Then when the user checked or unchecked an entry, your Javascript automation code could hide or show the markers in the corresponding map layer.

In this video we show how we have defined a map with 3 logical layers - 'layer1', 'layer2' and 'layer3'. When each marker is placed on the map is is assigned to one of these layers.  In the example, the rule for assigning a marker to a particular layer is contrived - if the marker is for a record in the first 3 rows of the Grid, it is in 'level1', and so on. Obviously, in a real application you would have more realistic rules for assigning markers to different map layers. Then, we put a checkbox control in a free-form region of the grid to control which layers as shown. We also show how the markers in a particular layer can be animated to draw attention to them.
GM8 Google Maps - Animating Markers When markers are placed on a Google Map, you can specify that the markers should be animated as they are placed on the map. Two animation modes are supported: Drop and Bounce. The video shows how to use the animation effects.

You can also use the Action Javascript to animate a marker after it has been placed on a map to draw attention to it. For example, you could click on a Grid row and cause the corresponding marker on the map to bounce.
GM9 Google Maps/Alternate Views-Treating the Map as a Blank Canvas so that the Markers on the Map can be Added Programmatically In the previous videos, the markers on the map have been added automatically. For each record in the Grid, a corresponding marker has been placed on the Map. However, you can specify that there should be no markers on the map initially. You would do this if you want to add the marker to the map with your own code.

This video shows how you can turn off the automatic placement of markers on the map and then use Action Javascript to add markers to the map programmatically.

 

The video shows a Grid with a list of states. Each row in the Grid has a button to populate the map with the 10 airports in the state with the highest elevation. When you click a button in the Grid row, an Ajax callback is made to place the markers on the map.

 
GM10 Search Part - Geography Searches - Google Maps Certain SQL databases (such as SQL Server, Oracle, DB2, MySQL, Postgres) support a special data type called 'Location'. If a table has a location field (which contains information about a record's position - latitude and longitude), then you can perform 'geography' searches. For example, you can find all records that are within x miles of a certain location, or all records that fall within an area marked by the latitude and longitude of 3 or more points.

You can put a Google Map in the Search part of the Grid to make specifying geography searches easy.

This video shows how you can put a Google Map into the Search Part and how Alpha Five automatically generates the Portable SQL to query the database. The video demonstrates both 'location' and 'radius' searches.
GM11 Search Part - Geography Searches - Google Maps - Show Search Results on Screen This video continues from GM10. When you have a Google Map in the Search Part of a Grid you can use the Map to mark a search polygon or radius, as shown in the previous video. However, you can also display markers on the map to show the location of the records found by the search.

In this video we show how the search results can be plotted on the map. A marker is placed on the map for each record found by the search.

The video shows how you can customize the bubble help, title and info box for each marker that is placed on the map.

The video also shows how the click action for each marker can be customized - you can use a built-in action, such as 'open Detail View', or you can define your own Javascript.
GM12 Search Part - Radius Search - Sorting result by distance from the map center point. When you do a radius search (i.e. find all records with a certain distance of a map center point), it can be useful to order the records by distance from the map center point. This video shows how this is easily done.


For more information on how the Grid in the video was configured, click here
GM13 How to use a Grid to implement a typical 'Store Finder' application. A typical pattern often seen in web applications is a 'store finder' The user enters his location and clicks a button and a list of store branches that are closest to his location is retrieved.  In this video we show how this type of application is easily built using a Grid component with a Search Part.

(Note: To get a complete summary of how the Grid was configured for this example, scroll to the bottom of this page).




Contrast this video with video FP11_PROXSRCH which shows how the same problem can be solved in a different way using a Proximity Search control in the Search Part.
GM14 Shows how to Update the Latitude and Longitude in the current Grid row when a Marker in the Map is dragged to a new Location. In this video we show how the latitude and longitude value in the current Grid row can be updated when the user drags the marker to a new position on the map.
GM15 Updating a Geography data type field automatically when a Longitude or Latitude Field is Changed In order to perform a Geography search on a table, the table must have a special 'Geography' field (supported in certain SQL databases, such as SQL Server, MySQL, Oracle, Postgress, DB2, etc.). The Geography field is a special type of field that contains binary data, so you can't update its value as easily in your SQL INSERT or UPDATE statement as you can for regular fields. However, it is highly desirable to automatically update the value in the Geography fields in a record whenever a longitude or latitude value is changed.

This video shows how this is easily accomplished in a Grid component. Alpha Five automatically generates the appropriate Portable SQL statement to update the Geography field whenever there are changes to the longitude or latitude field on which the Geography field is based.
GM16 Shows how a New Marker Can be Added to a Map When Entering New Records to a Grid When you add a new record to a Grid, instead of asking the user to manually enter a value into the latitude and longitude fields in the new record, it might be desirable to allow the user to right click on the map at a specific location and then automatically set the value of the longitude and latitude field in the row with the position of the marker that was added to the map.

Also, once the marker has been added, the user can drag the marker to a new location and the latitude and longitude fields in the new record will be updated.


(Requires build 3838 or above)
GM17 Scaling a Map in an Alternate View after the User Executes a Query After the user does a query in a Grid that has a Google Map in an Alternate View, the map might be zoomed in to tightly to be useful. This video shows how you can easily control the map scaling in the afterSearchSubmit event handler in the Grid.

UX Component

Number Category Description
D1 UX Component - Overview Overview of the UX Component - This video gives an overview of the UX Component and contrasts it with the Grid Component
D2 UX Component - Creating Creating a new Dialog - This video shows how to create a new UX Component. You can create controls one by one, or use one of several shortcut methods. You can also insert controls from a 'Control Library', and you can add your own controls to the Control Library.
D3 UX Component - Editing in Tree and Wyswyig Mode - Setting Properties in Multiple Controls at Once This video shows how you can edit the UX Component properties in either Tree View or Wyswyig Mode. You can change multiple properties at once by pasting a property value from one control to multiple controls and you can also edit in the Xbasic view.
D4 UX Component - Complex Layout Using Frames, Containers, Tabs and Accordions This video shows how you use different types of containers - simple containers, frames, tabs and accordions to control the layout of a Dialog. By wrapping controls in containers and then turning on/off the breaks between containers, you can achieve complex Dialog layouts.
D5 UX Component - Copying Controls from one Component to Another This video shows how you can copy controls from one UX Component to another.
D6 UX Component - Repeating Sections The UX Component can be used for 'Master-Detail' style forms. This is done by putting a 'Repeating Section' on the Dialog. Any controls that are inside the 'Repeating Section' will repeat as many times as you specify. At runtime, when the user is filling in the form, they can click a button to add a new row to the Repeating Section if they need more rows.

This video shows how you can create a simple invoice form with a Repeating Section. The video then shows how you can define client-side calculated fields to show the extended total (Price * Quantity) for each row as data is entered and also client-side summary fields that sum the extended total for all of the rows in the Repeating Section.
D7 UX Component - Submitting Data This video shows how you can put a button on the Dialog to submit the data in the UX Component to the server and then how the AfterDialogValidate event is fired where your Xbasic code can handle the event.

Typically, your Xbasic event handler would save the submitted data to a table. You are free to write your own code to perform this task, or you can use Server-Side Action Scripting to write the code for you (as shown in a subsequent video)
D8 UX Component - Validating Data The UX Component has an extremely rich set of features for validating data in the dialog. Validation rules can be defined declaratively, or using code (either Javascript for client-side, or Xbasic for server-side). Validation rules are evaluated on the client where possible (thus eliminating the need for an Ajax callback). Validation rules can be set to fire when the dialog is submitted, or immediately, when the user tabs out of a field.

These videos discuss the various validation options in the UX Component.


Validating data in a Repeating Section
In this video we show how the visual effects used in the sample dialogs shown in the above videos were created.
D9 UX Component - Genie Style When building Dialogs that have a large number of fields, it is common to present the controls to the user in 'genie' or 'wizard' style. In this style 'page 1' of the Dialog is shown, with a next button at the bottom of the Dialog. When the user has entered data into the controls on page 1, pressing Next moves to page 2, and so on.

Typically, the user cannot move to the next page until the data on the current page has been validated.

This video shows how easy it is to create 'Genie' style UX Components.
D10 UX Component - Data Binding - Creating Tables to Match the Dialog Layout When you create a UX Component, you will often want to store the data the the user submits in a table. In some cases, when you design the Dialog, you will already have an existing table. However, there may be cases where you design the Dialog first, and only then create the table into which the data will be stored.

These videos show how you can design a UX Component, and then automatically create one or more tables to match the structure of your UX Component.


Entering data into the newly created table
D11 UX Component - Data Binding - Binding to Existing Tables After you create a UX Component, you may want to 'bind' the controls in the Dialog to one or more existing tables so that you can use Server-side Action Scripting to automatically enter data into tables.

(You can't use Server-side Action Scripting until you have first 'bound' the Dialog to tables).

In this video we show how you can bind the controls in a Dialog to a table.

Once the controls have been bound, we then show how you can use Server-side Action Scripting to enter or edit records in the table.
D12 UX Component - Creating Multiple Tables to match the Structure of a UX Component that has one or more Repeating Section

 

These next set of videos show how, if the Dialog has Repeating Sections, when you can create both the Master and Detail tables automatically. Alpha Five analyzes the structure of your Dialog and lets you create multiple tables, linked in either one-to-one, or one-to-many relationships.


 

Next, the videos also show how Server Side action scripting can be used to insert, update and delete records in the tables. In the case where the Dialog is bound to a SQL database, all of the SQL statements can be wrapped in a single transaction.
D13 UX Component - Repeating Sections - Scrollable Containers If you have a Repeating Section in a Dialog, you can put buttons below the Repeating Section to add or remove rows from the Repeating Section. When you add or remove rows, all of the controls on the Dialog that are below the Repeating Section will move up and down as the size of the Repeating Section changes. You might prefer to put the Repeating Section in a fixed size, scrollable container. When you scroll this container however, you want the titles for each column in the Repeating Section to remain fixed.

This video shows how this is easily done.
D14 UX Component - Eye candy - Adding free-form text to the Dialog In this video we show how some nice visual effects can be added to a UX Component.
D15 UX Component - Grid Component - Calling a UX Component from a Grid and then Passing Information from the Dialog to the Grid A common design pattern is to open a UX Component from a button on a Grid and then pass information from the Dialog back to the parent Grid. This video shows how this can be done.
D16 UX Component - Setting Multiple Properties at Once Using Xbasic This video shows how you can use an Xbasic function when you are setting properties in multiple controls at once. For example, assume that you have built a component with many controls and you would like to wrap all of the control labels in language tags (<a5:r> and </a5:r>), so that you can internationalize your component.

In the video we show how this is easily done. Note: The feature shown here in the Dialog also applies to the Grid component.
D17 Adding a Row Number to Each Row in a Repeating Section This video shows how you can add a row number to each row in a Dialog Repeating Section.
D18 Button Styling Options This video shows you how you can make the buttons on the dialog look more interesting by including images on the buttons. (Requires build 3811 or above)
D19 Field Level Validation in the DialogValidate Event By default, when you execute validation code in the DialogValidate event and you want to display a validation error to the user, the error text is displayed in a message area above the Dialog. This is different than Field Level validation errors, which are displayed next to the field in error. Field Level validation rules are defined at the Control level in the Dialog Builder.

Howerver, in some cases it is more convenient to put all of your validation logic in the Dialog Validate event, but still be able to show errors next to the fields in error, rather than in the message area at the top of the dialog.

This video shows how you can defined field level validation in the DialogValidate event.
D20 Populating a Dialog with Data from one or more Tables When a UX Component is first opened, you might want to automatically populate the dialog with data from one or more tables. This video shows how you can use Server Side Action Scripting to automatically populate a Dialog with a Repeating Section with data.

(Requires build 3818 or above)

D21 Creating a Button to Make a Callback to the Server and Populate the Dialog with Data for a Specified Record After a UX Component has been opened, you might want to have a button that does an Ajax callback to populate the dialog with data for a specific record. This video shows how you can use Action Javascript to define the code for a button that will populate the Dialog. The primary key of the record you want to retrieve is read from a control on the Dialog.

( Requires build 3818 or above.)
D22 Sending E-mail From a UX Component A very common pattern in Web Applications is to display a form to capture some information (for example, name and address information), and then when the user clicks on the Submit button, store the submitted data in a table and then send an e-mail confirmation to the the user.

This can be easily done with the UX Component. Using Server-side Action Scripting, the entire process can be handled without having to write any code. The Alpha Five Genies will write all of the code for you.

The videos show how the email message can be sent immediately, or queued in a 'WorkQueue' table.
D23 Understanding the 'Prevent Container Float' Property on a Container Control

How to Eliminate Unwanted Vertical Space when a Client-side Show/Hide Expression Hides a Control. 		(This dialog is aimed at advanced developers). When you use a client-side show/hide expression to show or hide a container, not all of the vertical space that is consumed by the container is removed when the container is hidden. This dialog explains how the Container's 'Prevent container float' property can be used to solve this problem.

(Requires build 3818 or above)
D24 Using a UX Component to Edit a Record in a Grid Component, or Enter a new Record into a Grid Component This video shows how you can use a UX Component in conjunction with a Grid component. The UX Component can be used to edit existing records in the Grid, and to enter new records. No programming is required. All code is automatically generated using Action Javascript and Server-side Action Scripting.

(Contrast this action with the action shown in D28 in which the Dialog is merely an alternate view of the record you are editing).


(Requires build 3822 or above.)
D25 Placing Grid Lines on the Dialog Background in Preview Mode to Help Set Control Sizes When you layout out a UX Component, getting the right edge to controls that are on different lines to be right aligned can involve quite a bit of trial and error. This video shows how you can make the process easier by displaying grid lines as a background to the Dialog when you are in Working or Live Preview.


(Required build 3829 or above)
D26 Using Action Javascript to Open a Dialog and Populate it with Data from a Table In Video D20 we show how you can populate a Dialog with data from one or more tables when it is first opened. In this video we show how you can create an event handler (for a Dialog or Grid) to open a UX Component and populate the Dialog with data from a table. The primary key of the record to load can be read from controls in the current Component (a Grid or Dialog), or specified by a session variables.


(Requires build 3833 or above)
D27 Using Action Javascript to Lock the Page, or a Portion of the Page During an Ajax Callback

(Video is shown for a Dialog, but technique applies to a Grid as well). 		A common requirement in Ajax applications is to 'lock' the screen, or a portion of the screen, for the duration of the callback. This prevents the user from performing some action that is not appropriate during a callback. A transparent overlay is displayed over the screen or element to 'lock' it.

In this video we show how you can use Action Javascript to lock either the entire screen, or a portion of the screen.

Note: The video shows how this is done in a UX Component, but the technique applies equally well to a Grid component.
D28 Using a UX Component as an Alternate Editing View of a Record in a Grid If you have a lot of columns in an updateable Grid, it can be cumbersome to scroll horizontally when editing data in the Grid. In this video we show how a UX Component can be used to edit the data in the Grid row. A button can be inserted into the Grid row. When the button is clicked, the UX Component is opened and the current data in the Grid row is filled into the Dialog. The user can then continue editing in the Dialog, and then click an Update button, which closes the Dialog and fills in the controls in the row in the Grid that is being edited.

You can toggle instantly between the Grid view and the Dialog view of the data.

(Contrast the behavior in this video with that of video D24. In D24, the Dialog is more than just an alternate editing view - it is responsible for saving the edits to the database. In this video, the Dialog is not responsible for saving data to the database - it is merely an alternate view of the data you are editing).


(Requires build 3834 or above)
D29 Creating a New Dialog From a Template Video shows how you can use a template to get a quick start when creating a new Dialog. You can easily create your own templates as well.
D30 Understanding How Data From Repeating Sections is Submitted This video is aimed at advanced developers who are writing their own event handlers for the DialogValidate or AfterDialogValidate events. It explains how the data from the RepeatingSections is represented in the e.datasubmitted object that is passed to the event handlers.
D31 Edit-Combo - AfterSelect Event - AjaxCallback This video discusses firing an AjaxCallback in the AfterSelect event in an edit-combo control.

This video applies to both a Grid and UX Component. (This is the same as video M39)
D32 Embedding a Grid Component inside a UX Component and Executing Methods on the Grid from the Dialog In this video we show how a UX Component can 'host' a Grid component (i.e. a Grid can be embedded inside a Dialog) and how the Dialog can call methods of the embedded Grid component.

(Requires build 3846 or above)
D33 Duplicate and Copy Rows in a Repeating Section This video shows how methods of UX Component can be used to duplicate a row in a Repeating Section or to copy a row in a Repeating Section.

(Requires build 3846 or above)
D34 Extended Dialog Demo Showing How Tables Can be Created from the Dialog Definition, and Data Can Be Entered into Repeating Sections A comprehensive demo showing how a Dialog with a Repeating Section can be used to create database tables and then enter data into the database.
D35 Moving Rows in a Repeating Section Up or Down and Swapping Rows in a Repeating Section This video shows how you can add buttons to a UX Component to move rows in a Repeating Section up or down, or swap rows in a Repeating Section. In the video we show how to use the methods that the UX Component exposes for changing the order of rows in a Repeating Section.
D36 Sorting Data in a Repeating Section This video shows how you can add buttons or event handlers to a UX Component to sort the data in a Repeating Section. You can sort by any column in the Repeating Section, and you can specify an ascending or descending sort.


(Requires build 3854 or above)
D37 Opening a Component and then Executing Javascript Code in the Target Component - Circumventing the Asynchronous Nature of Ajax Callbacks.

Often, when using Action Javascript, you might define an action to open a component (say a Grid, or a Dialog) and then you might define a subsequent action to perform some command on the component you just opened. This does not work because the second action executes before the first action has completed - since the first action is an Ajax callback, and it is therefore asynchronous.
These videos show a technique that you can use to work around the asynchronous nature of Ajax callbacks.

(Note: Watching video M43 first might be helpful.)

D38 Using Hidden Fields in a Repeating Section When you want to hide a fields in a Repeating Section, it is not as simple as hiding a field that is in the main section of the Dialog. This video shows the extra steps that you must follow in order to hide a fields in a Repeating Section.

Watch Video
D39 Understanding what's in the e.dataSubmitted and e.oldDataSubmitted Objects when the Dialog is Submitted. When a Dialog is submitted, the data in the Dialog are submitted in the e.dataSubmitted object. In addition, the original data that was in the Dialog when the Dialog was originally opened are in the e.oldDataSubmitted objected. In some cases the developer will allow the Dialog to be submitted multiple times and might want to re-initialize the Dialog so that each time the Dialog is submitted, the data in the e.oldDataSubmitted object are the data that was in the Dialog the previous time it was submitted, and not when the Dialog was initially displayed.

Watch Video
D40 Processing JSON Data to Display Feeds from Twitter in Alpha Five. These videos provide a detailed overview of consuming and processing the JSON results from the Twitter Search API. A client side example using JavaScript and jQuery is included as well as a server side example using Xbasic. The data from Twitter are displayed in UX Components.



To download the components used in these videos click here.
D41

Dynamically Re-populate a DropdownBox Control in a Dialog or Grid Component.

This video shows how you can make an Ajax callback to get a new set of choices to display in a Dropdownbox in either a Grid or UX Component and then send back the necessary Javascript code to repopulate the choices that are shown in the Dropdownbox control.
D42

Evaluating Javascript contained in <script> tags in an Ajax response. Applies to both Dialog and Grid.

When you make an Ajax callback to populate an element on a page with some content, any Javascript that is contained in <script> tags in the content you are populating the element with is not executed. Here is how you can find any code within <script> tags and execute it. Note: The technique shown here applies to both the Dialog and the Grid components.
D43 Hiding Controls on a Dialog and then Showing Them in a Pop-up Window. This video shows how you can take certain cotrols on a Dialog that would normally be visible when the Dialog was run and hide them. When the user clicks a button to show the controls, the hidden controls are shown in a pop-up window.
As shown in the video, all of the controls in a specified Container control are automatically hidden and only shown in the pop-up window on demand.
D44 Working with an IFrame on a Dialog This video shows how you use Javascript to set the properties of an IFrame control in a UX Component.
D45 Add a File Download Feature to a UX Component This video shows how you can add a file download feature to a UX Component.
D46 Geocoding Data when Records are Saved This video shows how you can automatically geocode data when saving a record in a UX Component.

This feature is a Subscriber Benefit.

D47 Server Side Events For CRUD Operations When using Server-side Action Scripting to save data to SQL tables, you can insert event handlers for these actions:
  • Before/After Insert
  • Before/After Update
  • Before/After Delete
  • OnRowRefresh


This feature is a Subscriber Benefit.
D48 Using the 'Prevent Container Float' Property on a Free-form Container To Center or Right Justify Text By default, all controls in a UX Component are wrapped in a div which has the A5Container class. This class floats all elements to the left. In some cases, this will prevent you from achieving a layout that you want. For example, say you have a container, and you would like the controls in the container to be center or right justified. This video explains how you can place the controls in a free-form container and then turn off the float property of the container.
Requires build number 2591-3907 or above
D49 Displaying a Fade Out Message to Confirm that Record was Saved A common pattern in web applications is to display a transient message (a 'fade out' message) to confirm that an action has taken place. This video shows how you can easily create fade out messages in your applications, and in particular how easy it is to add a 'fade out' confirmation message when a record is saved.

This feature is a Subscriber Benefit.


Note: For an example of a fade out message on a Grid, see video number M51.
D50 Adding a Row to a Repeating Section Programmatically By First Prompting for Data in a Pop-up Window A common pattern when adding a new row to a Repeating Section in a Dialog is to first display a dialog where you can collect information from the user. Once the user has filled in all of the information, the new row is in the Repeating Section is created and the data that was collected in the pop-up window is used to populate the new Repeating Section row.
D51 Prompting for Confirmation Before Submitting a Dialog A common requirement in a UX Component that submits data to the server is to prompt the user for confirmation before actually submitting the Data.
These videos show two different ways in which this can be done.

The technique shown in this video are available as part of the Subscriber Benefits.


The technique shown in this video do not require any Subscriber Benefits.
D52 Dynamically Re-populating Choices in a Radiobutton or Checkbox Control. In some applications it might be necessary to repopulate the choices shown in a radiobutton or checkbox controls with a new set of choices after the Dialog has initially been rendered. An ajax callback it made, where the new choices are computed on the server and then a javascript response is sent to the browser to update the choices for the control.
These videos show how this can be done.
Note: The video shows an example for a checkbox, but the same principle applies to radio buttons. The only difference is that the a5w_radiobuttons() function would be used on the server to compute the HTML for a radiobutton control.



In this next video the checkbox is populated with a much larger set of choices and a snaking layout (left-to-right, top-to-bottom) for the checkboxes is specified.

Watch Video
Download component used in video
D53 Dynamically Re-populating Choices in a Dropdownbox Control. In some applications it might be necessary to repopulate the choices shown in a dropdownbox control with a new set of choices after the Dialog has initially been rendered. An ajax callback it made, where the new choices are computed on the server and then a javascript response is sent to the browser to update the choices for the control.
These videos show how this can be done.


See also Video D59 and D60
Watch Video


In this next video the dropdownbox is populated with different stored and displayed values. Watch Video

In this next video the dropdownbox is populated with choices that are obtained by querying a SQL table.


Download component used in video

In this video we show how dropdownboxes in a Repeating Section can be dynamically populated by querying a SQL table.

Watch Video

Download component used in video
D54 Preventing an Event From Firing Twice when a User Double-clicks on a Hyperlink or Button. Sometime users double-click on a button or hyperlink instead of single clicking it. This can cause problems because the event will fire twice, instead of the intended once. This is especially problematical if the event is an Ajax callback. This video shows a simple technique to prevent the problem and cause the event to only fire once, regardless of whether the button or hyperlink was double or single clicked.
Note: This same technique can also be used in a Grid component.

D55 Using jQuery to Make a Div Draggable The jQuery Javascript library is, by default, automatically available to you in all of your components. This video show how you can easily translate an example on using jQuery that you might have found on the internet into something you can use on a UX Component.
Note: This same technique can also be used in a Grid component.

D56 Defining Javascript Action - Using Action Javascript Genies to Define Global Javascript Code Javascript Actions are an alternative to defining global Javascript Functions in your UX Components. When you define a Javascrpt function, you have to hand-code the Javascript. However, when you define a Javascript Action you can use the Action Javascript genies to write the code for you.
D57 Populating Controls in a Dialog - Tutorial This video is aimed at advanced developers who are writing their own Xbasic handlers to populate complex Dialogs with one or more Repeating Sections. Normally, the code to populate a Dialog with data from a database is auto-generated by the Dialog. However, in some cases, developers might want to write custom code. These videos describe how this can be done using two special 'helper' Xbasic functions (a5DialogHelper_JS_PopulateDialog() and a5DialogHelper_GetDataToPopulateDialog()) to generate some of the code for you.

(Requires build 2743-3945 or above)

Background information


Generating the Javascript to populate the Dialog


Querying the Database to get the data
D58 Opening a UX Component in a Grid Row Expander to Edit a the Current Grid Row This video shows how a UX Component can be displayed in a Grid Row Expander. The Dialog is automatically populated with data from the current row in the Grid and when the record in the Dialog is saved, the Grid row is refreshed.

(Requires build 2747-3953 or above)

D59 Refresh the Choices in a Dropdownbox and Dynamically Filter the Choices in a Dropdownbox Shows how you can do an Ajax callback to refresh the choices in a Dropdownbox. The query that was uses to populate the Dropdownbox initially is re-executed and the refreshed list of choices is used to re-populate the Dropdownbox.

When you call the method to refresh the choices, you can also specify an optional filter to dynamically filter the choices in the Dropdownbox.

The UX Component method that is used to refresh the choices in the Dropdownbox is: {dialog.Object}.refreshDropdownBoxChoices()
See also Video D53

(Requires build 2766_3968 or above)



Download component used in video
D60 Prompt For a New Choice to Add to a Dropdownbox and Dynamically Add the Choice to the Dropdownbox Shows how the user can select an 'Add new choice' selection in a Dropdownbox which then opens a dialog where the user can specify the new value to add to the Dropdownbox. The choices is added to the table on which the Dropdownbox is based and is then added to the list of choices show in the Dropdownbox.
See also Video D53

(Requires build 2766_3968 or above)



Download component used in video
D61 Using Action Javascript when Writing Javascript Code When you write Javascript to handle events in a Dialog, you can either use Action Javascript, or Text mode. In some cases, the only option is Text mode. This video shows how, even when you are using Text mode, you can still take advantage of Action Javascript and have the built-in Genies write a lot of complex code for you.
(Requires build 2807_3978 or above)
D62 Understanding Difference Between 'Control Width' and 'Container Width' Layout Mode The UX Component has two different layout modes - 'Control Width' and 'Container Width'. This video explains the differences between these two modes.
(Requires build 2879-3990 or above)
D63 Setting the Text in a Label or Button Automatically when a Client-side Expression is True - Conditional Text and Events The Dialog and Grid components have allways allowed you to defined client-side conditional style definitions that automatically change the style and/or class of a control when a particular expression is true. (For example, set the font of the amount due field to red if the balance is above $200). Now, the conditional style functionality has been extended to allow you to dynamically set the text in controls (such as buttons, hyperlinks and static text objects) and to dynamically invoke arbitrary Javascript functions when an expression is true.

This video is based on a UX Component, but the exact same functionality is also now available in the Grid component.
(Requires build 2887-3990 or above.)

This feature is a Subscriber Benefit.
D64 Server-side Action Scripting - Send E-mail - Get E-mail Settings at Run-time This video shows how email account settings for the 'Send e-mail' action can by dynamically set a run-time by reading the values from the Repository.

The video also shows how a UX Component can be configured to edit the e-mail settings in the Repository.

(Requires build 2921-3999 or above.)
D65 Printing Reports - Using the 'BeforePrintJavascript' and 'AfterPrintJavascript' Events To Display a Wait Message When you print a Report in a web application, depending on the complexity of a report, there can be a relatively long delay before the report is rendered. Using the 'BeforePrintJavascript' and 'AfterPrintJavascript' events, you can easily put up a 'wait' message while the report is rendering.

In this video, we show how this feature is used in for a Report that is embedded into a UX Component, but these events are available in all Action Javascript actions that print Reports.


(Requires build 2921-3999 or above.)

This feature is a Subscriber Benefit.
D66 Storing State Information in the Grid or Dialog Object This video is for advanced developers. It shows how 'state' information can be stored in the 'state' object in the Grid or Dialog object. The data in the 'state' object can be read in both client side and server side events. It can also be set in either client side or server side events.

In many cases, storing state information in the Grid or Dialog object's 'state' object is preferable to using session variables.

D67 Using the 'Lookup and Fill In' Action in a Repeating Section The 'Lookup and Fill In' action takes a key value that was entered into a control, does an Ajax callback to lookup some addtional data for the key value, and then fills in other fields on the page. If some cases, when you use the action in a Repeating Section, the wrong row of in the Repeating Section can be filled in, because focus has moved to another Repeating Section row before the callback has completed.
In this video we explain a technique to make sure the event fills in the correct row of the Repeating Section by explicitly telling the callback what the active row in the Repeating Section is.
Watch Video
D68 Understanding the synchronizeDialog (client-side) and onSynchronize (server-side) Events. When a UX Component is opened in a pop-up window, it can be set to use a 'cached' version of the Dialog the second and subsequent time it is opened. In the case of small Dialogs, there is not much benefit is using a cached version. But for large Dialogs, if you use a cached version, the second and subsequent opens will be much faster.

When a cached Dialog is opened the onDialogInitialize event does not fire. Instead, there is a client-side and server-side event that fires.

This video discusses these two synchronize events.
(Requires build 3019-4033)
D69 Dynamically computing default values for fields when adding a new row to a Repeating Section. When the user clicks the plus key to add a new row to a Repeating Section, the new row is populated with any default values that were defined for each field. If any default value was specified using an expression, the expression is evaluated when the component is initially rendered (not when each new row is added). This means that every new row that is added by the user will have the same default values.

You might want each new row to have a dynamically computed default value. This video discusses how to make an Ajax callback each time the user adds a new row to compute default values for fields in the Repeating Section.


Watch Video

UX Component - Managing Data in the Security Framework

Number Category Description
D_SF_1 UX Component - Security Framework - Create an Account for a New User

Managing data in the Web Security Framework tables at run-time is a common requirement. These videos show how this is easily done using UX Components.

This video shows how a UX Component can be used to create an account for a new user. The UX Component prompts for account information (such as username and password), and enters the data in the tables used by the Web Security Framework.


(Requires build 3829 or above).
D_SF_2 UX Component - Security Framework - Create an Account for a New User and also Store Personal Information in a Related Table This video builds on the concepts of video D_SF_1. It shows how you can also add data to a related table at the same time that you create a new user account. The account credentials are stored in the Web Security Framework tables, and the additional information (which could include any data that you choose to collect) are stored in a related table.

All of the coding in the UX Component is automated through the use of Server-side Action scripting.


(Requires build 3829 or above).
D_SF_3 UX Component - Security Framework - Modifying the Account of an Existing User This video builds on the concepts of video D_SF_2. It shows how you can use the UX Component to retrieve the account information for an existing user into the UX Component, and then edit that data. For example, you might want to change the Group (i.e. role) to which the user is assigned.


(Requires build 3829 or above).
D_SF_4 Modifying the Security Account of an Existing User and Update Personal Information in a Related Table using a Grid. This video builds on the concepts shown in video D_SF_2. It shows how you can use a Grid based on a table related to the Web Security settings to find and edit a record in the related table using a Grid, and then open a Dialog to edit the security information. The Dialog is opened in a dropdown window from the Grid.

All of the coding in the UX Component is automated through the use of Server-side Action scripting.

Watch Video
D_SF_5 Setting Security on Pages and Components - Using the Page Permissions Genie When you turn the Security Framework on, you can then set permissions on individual pages (.a5w pages) and Components in your project. This video gives a quick overview of the Page Permissions Genie.

Calendar Component

Number Category Description
Cal1 Overview of the Calendar  Component The Calendar component allows you to display 'events' or 'appointments' in a Calendar view. This video gives a quick overview of the features of the Calendar component. In a subsequent video we show how to set up the Calendar component.
Cal2 Setting up the Calendar Component This video shows the steps to get started to set up and use a Calendar component in your application.
Cal3 Dynamically Creating New Records in the Calendars Table When the Calendar Component is opened, it can be configured to only display the events for a particular calendar.

For example, you might have an 'Employees' table and you might have a Grid which shows the records in the Employees table.

A button in each row of the Grid opens the Calendar Component showing the appointments for that particular Employee. However, if there is no matching record in the Calendar table for the Employee, it would be convenient to automatically create a new record in the Calendars table before opening the Calendar.

This video shows how this is easily done.
Cal4 Opening the Calendar Component and Showing a Selected List of Calendars When the Calendar Component is opened from a button in a Grid or UX Component, you can specify which calendars (i.e. the calendar for Dr. Jones, Dr. Smith, etc.) should be shown on the Calendar.

This video shows how you can read the list of calendars to show from a column in the Grid.

(Requires build 3823 or above)
Cal5 Opening the Calendar Component and Showing a List of Related Calendars Assume that you have a Grid that contains a list of people for which calendars have been defined. When you click a button to open the Calendar Component for a particular person, you would like to see the calendars for 'related' people as well. In addition, you would like the 'related' calendars to be read-only, while the main calendar is updateable.

This video shows how you can define a 'link table' that indicates what the 'related' calendars are for each calendar. For example, whenever the calendar for Dr. Smith (id = 3) is shown, you also want to see the calendars for Dr. Jones (id = 27) and Dr. King (id = 33).

This video shows how this can be done by putting a Linked Content Section in the main Grid. The Linked Content Section shows the Grid based on the 'link table'.

(Requires build 3823 or above)
Cal6 Adding Custom Fields to the Events Tables

The information for each event shown on the calendar is stored in an Events table. You are free to add any fields of your own to this table. When you edit an event, the UX Component that is shown will allow you to display and edit the additional fields you define in the Events table.


The videos discuss the difference between adding the new fields BEFORE you auto-generate the UX Component that is used to edit the events, and AFTER you have auto-generated the UX Component.


Obviously, if you have auto-generated the Dialog that will be used to edit events, and have made extensive customization to it, you would not want to re-generate it. This video discusses how this is easily done.

Custom Component

Number Category Description
CC1 Custom Component The Custom Component is for developers who want to generate the component using their own Xbasic code. These videos give a basic overview of the Custom Component. They explain what a custom component is, and show how the component can define arguments whose value can be passed in from the calling page or component.

The videos shows how a custom component can be called from a Grid component and how the values of the arguments defined in the custom component can be passed in from data in the current Grid row.

Next the videos demonstrate a more realistic example where the Custom Component is used to define a pie chart displaying the breakdown of items on an order.

Image Gallery Component

Number Category Description
IG1 Quick Start The Image Gallery is a powerful component for displaying images in a Web or Mobile application.

This video shows how easy it is to get started with the Image Gallery Component.
IG2 Overview of Image Gallery Overview of the Image Gallery Component
IG3 Using the Image Gallery in a Tabbed UI Component
IG4 Calling the Image Gallery from a button in a Grid
IG5 Filtering the Images Shown in an Image Gallery By default, when you open an Image Gallery, all of the images in the specified folder as shown. However, the Image Gallery supports a filter property that allows you to apply a filter to the list of files in the folder. For example, if you specify a filter of image_bathroom_*,image_kitchen_*, then only images that start with 'image_bathroom' or 'image_kitchen' will be shown in the Image Gallery.

This ability to filter the list of images shown in the Image Gallery dynamically greatly enhances the flexibility of the Image Gallery.

(Requires build 3815 or above)

Video Player Component

Number Category Description
VP1 Video Player The Video Player Component allows you to easily display video content in a Web Application.

These videos shows how easy it is to get started with the Video Player Component.

Reporting

Number Category Description
R1 Reports - Embedded Charts This video shows how charts can be embedded into an Alpha Five report.
R2 Reports - Adding a Chart to the Sample Invoice Report In Video R1 we showed how you can add a chart to a report. In that video, the data source for the chart was set to 'Table'. In this video we show how a chart can be added to the sample 'Invoice' report in the sample 'AlphaSports' application that ships with Alpha Five.

In this video, the data source for the chart is set to 'Report', which means that the data used in the report is used for the chart, rather than a separate query. By setting the data source to 'Report' the chart can use all of the calculated fields and summary fields that the report calculates.
R3 Reports -Printing the Same Report in Multiple Languages A common requirement in Web applications is to allow the user to select a language (e.g., French, German, English). For Grid and UX Components, the technique used is to wrap strings in language tags (e.g. <a5:r> and </a5:r>). However, for reports, a different technique must be used.

This video shows how this can be done.



Using a free-form report

Using a Layout Table report
R4 Reports - Putting Boxes and Lines Around Report Sections A common requirement when designing reports is to put report content in sections with boxes around the sections and to draw lines in the report to separate report columns. The Layout Table Report Editor makes this very easy to do. The 'Box' object in the Layout Table Report editor can be used to draw boxes and lines on the report.
In this video we explain how the 'Box' object works. We show how a box can be placed around multiple sections of the report - the Group Header, Detail and Group Footer sections.



R5 Reports - More About Boxes When you put a box around a section, if the box touches a box in another section, it is automatically joined with the adjacent box. In some cases, this is desirable, and in others it will not give the desired effect.
In this video we explain the issue in more detail.


R6 Reports - Suppressing Blank Lines in a Static HTML Control When using a Layout Table report, the technique used to display blocks of text, such as an address block, is to put the fields in a static HTML field. In this video we show how blank lines in the 'address block' can be suppressed.


R7 Reports - Duplicating the Functionality of the Free-form Report 'Conditional Object' in a Layout Table Report - Showing Conditional Content in a Cell When designing Free-form reports, developers often use the 'Conditional Object' control to display conditional content. For example, you might want to show one set of field values under one condition, another set under another condition, and so on.

When designing Layout Table reports, you can implement the functionality of the 'Conditional Object' (and much more!) by placing a 'Static HTML' control into a report cell.

In this video we show how this is done.



Web Component Style Builder

Number Category Description
SB1 Introduction to the Style Builder The Style Builder, which is used to edit the appearance of Components in a Web Application, has been completely re-written in V11. It is now no longer just a Grid style editor. It is used to edit the style of all Components - Grid, Dialog, Tabbed UI, etc.

This video gives an overview of the new Style Builder.
SB2 Creating a New Style from a Template When you create your own custom Styles for use in a Web Application you can either start by editing one of the built-in Styles (such as GrBlue - the 'Gr' prefix indicates that the style is a 'Gradient' style), or you can create your new style from one of the built-in Templates.

A 'Template' is a style that has no colorization. Everything (all CSS colors, all Icons etc.) are just shades of grey. When you create a new style from a Template, you use hue, luminance and saturation sliders to adjust the color of your new style. This video shows how this is done.
SB3 Adjusting the Colors in an Existing Style After you have created a style you might want to make adjustments to the overall color of the style. Visiting each selector in the CSS stylesheet to make an adjustment would be tedious. You can make adjustments to all of the colors used throughout the style at once, as shown in this video.

The color adjustments that you make here are all 'relative'. I.e. you add more saturation, or luminance to every color used in the style.
SB4 Understanding the 'Part' Tab in the 'Manager' Panel in the Style Builder. This video explains the purpose of the 'Part' tab in the 'Manager' panel of the Style Builder. It allows you to quickly see and edit the selectors used in a style.
SB5 Understanding the 'Selectors' Tab in the 'Manager' Panel in the Style Builder. This video explains the purpose of the 'Selectors' tab in the 'Manager' panel of the Style Builder. It give you direct access to the selectors used in the CSS style.
SB6 Understanding the 'Icons' Tab in the 'Manager' Panel in the Style Builder. This video explains the purpose of the 'Icons' tab in the 'Manager' panel of the Style Builder. It gives you full control over the icons that are used in your style.
SB7 Understanding the 'Settings' Tab in the 'Manager' Panel in the Style Builder.  

This video explains the purpose of the 'Settings' tab in the 'Manager' panel of the Style Builder. This tab gives you access to certain style settings that are not part of the CSS file.
SB8 Understanding the 'Edit' Panel in the Style Builder The 'Edit' panel in the Style Builder is where you can edit the actual CSS in the style. This video shows how to use the 'Edit' panel.
SB9  

Understanding the 'Background' Genie in the 'Edit' Panel - Generating Interesting Backgrounds for Elements in a Component 		When editing the CSS background of an element in a Component, you are not limited to boring solid backgrounds. There is a powerful genie in the Style Builder for generating complex gradient and patterned backgrounds.

This video explains how to use the 'Background' genie.
SB10 Understanding the 'Help' Panel in the Style Builder The Style Builder integrates a help system that explains the purpose of the various selectors in the style.
SB11 Understanding the 'Assets' Panel in the Style Builder The 'Assets' panel shows you all of the colors and icons used in a style. The 'Assets' panel exposes powerful editing features for making changes to the colors and icons used in the style.
SB12 Introduction to 'Design Mode' in the Style Builder. This video introduces you to the 'Design Mode' in the Style Builder. It shows how you can interact with the preview of the style elements to select and edit style settings.
SB13 Using the 'Appearance' Tool in the 'Design Mode' of the Style Builder This video discusses the 'Design Mode' of the Style Builder in more detail. It shows you you can use the 'Appearance' tool to copy/cut/paste appearance from one element to another. It also shows how you can clear the appearance settings of an element.
SB14 Using the 'Asset' Tool in the 'Design Mode' of the Style Builder This video discusses the 'Design Mode' of the Style Builder in more detail. It shows you you can use the 'Asset' tool in 'Design Mode'.
SB15 Searching in a Style The Style Builder has powerful search features, including search and replace features. This video explains how you can use the search features of the Style Builder.
SB16 Scaling Fonts in a Style Sometimes you want to make all of the fonts in a style bigger or smaller. This video shows how this is easily done in a single global operation. You don't have to edit each font size CSS selector individually.
SB17 Converting a Legacy Style to a new Style The CSS for styles in V11 is quite different from that used in previous versions. The Style Builder allows you to convert a legacy style to a V11 style. This video explains how to go about converting a legacy style.

Desktop Applications

Number Category Description
DT1 Layout Editors - Control Libraries When you are editing a Layout (e.g. Form, Report, etc.), you can select one or more controls and then place them in a 'Control Library' on the Toolbox. Controls in the Control Library can be placed on any Layout.

This video shows how you can add controls to the Control Library, and then use controls that you previously added to the Control Library.
DT2 Layout Editors - Embedded Charts Alpha Five V11 introduces a powerful charting engine. Charts can be used in Form, Reports, Labels, Letters, Xdialogs, and Web Components.

This video shows how a chart can be embedded into a form.
DT3 Charts - Xdialog Examples The charting features in V11 can be used in Xdialogs. The following video show how you can embed custom charts in your own Xdialogs.


The Xdialogs shown in the above video are all in the sample 'Learning Xdialog' database that ships with V11. Since there are many example scripts in 'Learning Xdialog' that would be useful to have quick access to, regardless of which database you are working in, we show in this video how you can easily create a Code Library from the examples in 'Learning Xdialog'.
DT4 Forms - Embedded Charts - Charting Summary Data The charts that you embed on a Form or Report can plot summary data. The charts can either be defined declaratively, or you can use custom Xbasic.

These videos show how a chart that summarizes attendees at a seminar by state can be defined using the built-in Chart Genie, or using Xbasic.

The sample database used in the videos can be be downloaded here.

DT5 Using a Grid Component in a Desktop Application - Automatically Closing the Host Xdialog Window when Data in the Grid is Saved It is easy to use Grid and UX Components in Desktop applications. For example, you might have a button on a form (with code generated by Action Scripting genie) that opens a Grid or Dialog in a window. In this video we show how the pop-up window, in which the Grid is hosted can be automatically closed when the user makes an edit to data in the Grid and then submits the Grid.

The techniques shown in the video apply equally to a UX Component.


DT6 Using a Grid Component in a Desktop Application - Calling Xbasic from Events on the Grid. In this video we show how easy it is for Desktop application developers who use Grids and Dialogs in their applications to call Xbasic when a button on the component is clicked.
The techniques shown in the video apply equally to a UX Component.
Watch Video

Optional V10 Feature Packs - Now Included as Part of V11

Number Category Description
V10FP2 Tree-control Navigator

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
The Tree-control Navigator displays a tree-control on the page. When the user makes a selection in the tree-control you can optionally filter the associated Grid component. In other words, the tree-control is used to navigate in the Grid. Hence the name 'tree-control navigator'.

The following videos demonstrate the Tree-control navigator in more detail.
V10FP3 Using Grid Components on the Desktop

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
The Grid Component in Desktop Applications Feature Pack allows you to use a Grid Component in a Desktop application in two different ways:
  1. Embed a Grid Component into a Form
  2. Use Action Scripting to open a window that contains a Grid Component.

V10FP4 Database Upsize Genie

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
The Database Upside Genie is for developers who have developed a Desktop Application in Alpha Five that uses Alpha Five's native .dbf tables for data storage.

The Genie allows you to 'upsize' your application to use a SQL database for data storage.

There are many benefits to using a SQL database for the data storage in your application. These benefits include:
  • More robust data storage
  • Much more scalable - you can have many more simultaneous users of your application. (The gating factor is no longer Alpha Five, but the scalability of your SQL database!)
  • Better multi-user performance
  • True client/server architecture
  • Multi-user applications that work over IP networks (i.e. the Internet)

V10FP5 Flying Start Genie

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
The Flying Start Genie allows you to get a quick start on a new Web Application by automatically creating a Grid component for every table and view in your Database. The Genie also creates a Tabbed UI component which serves as your 'home page' for your auto-generated application.

The Flying Start Genie can be used against both SQL databases and native Alpha Five databases (.dbf tables).

Once the Flying Start Genie has created the Grid components, you can edit any of the components in the Grid

Component editor and customize any of their properties.

By default, the Grids that are automatically created for you have a Search Part and a Detail View Part. The Grids are editable and the edits are made in the Detail View part which is set to display in a pop-up, modal window.

You can easily change these defaults for all of the Grids that are created, or for individual Grids.
V10FP6 Export to Excel/Ascii From Grid Component

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
The 'Export to Excel, Ascii or Custom Format'  Feature Pack allows you to export data from a Grid component to a file that can then be downloaded from the server to the user's machine where the file can be saved to user's machine.

The Feature Pack allows you to:
  • Export all of the data in the Grid
  • Export data for only the records in the current Grid query
  • Export data from all of the fields in the Grid
  • Export data from selected fields in the Grid
  • Export data from some other table (other than the table(s) on which the Grid is based)
  • Export data in Excel, comma delimited Ascii, or tab delimited Ascii format.
  • Export data in any user defined format.
  • Call server side and client side events to completely customize how the Feature Pack works.
  • Limit the number of records that are included in the exported file (to prevent users from downloading files with massive numbers of records).
  • Put an 'Export to Excel' button in the Grid toolbar.


Once the Feature Pack is installed, its functionality is exposed in two ways:
  1. A new action is available in Action Javascript
  2. A new property is available in the Record Navigator/Grid Toolbar section.

V10FP7 Image Upload

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
The Image Upload Feature Pack allows you to  upload images from the user's machine to the server.

Here are some of the things you can do with the Image Upload Feature Pack:
  • Define a button that will upload an image to the server and store the filename of the uploaded image in a field in the current Grid record (this is a 'linked image')
  • Define a button that will upload an image to the server and store the binary contents of the file in a BLOB field in the current Grid record (this is an 'embedded image')
  • Scale the uploaded images before that are saved. You can scale the image by specifying a percentage of the source image, or you can specify absolute dimensions (in either inches or pixels).
  • Optionally preview how the image looks in the Grid after is has been uploaded, and then undo the action.
  • Turn on the 'Insert image' button in the HTML editor (used for editing memo fields in the current Grid record) so that you can  upload images to the server and then put the image in the HTML memo that you are editing.
  •  Note: If you have the optional File Upload Feature Pack, then there is also an 'Insert linked file'' button that you can display on the HTML Editor toolbar. This allows you to upload files to the server and insert hyperlinks to these files in the HTML memo that you are editing.
V10FP8 File Upload

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
The File Upload Feature Pack allows you to  upload files from the user's machine to the server.

Here are some of the things you can do with the File Upload Feature Pack:
  • Define a button that will upload a file to the server and store the filename of the uploaded file in a field in the current Grid record (this is a 'linked file')
  • Define a button that will upload a file to the server and store the binary contents of the file in a BLOB field in the current Grid record (this is an 'embedded file')
  • Turn on the 'Insert file' button in the HTML editor (used for editing memo fields in the current Grid record) so that you can  upload files to the server and then put a hyperlink to that file in the HTML memo that you are editing.
  •  Note: If you have the optional Image Upload Feature Pack, then there is also an 'Insert image' button that you can display on the HTML Editor toolbar. This allows you to insert images in the HTML memo that you are editing.








Notice: At the time these videos were recorded, the builder for the 'File Upload - User Defined' action showed an 'Upload Folder' property. This property is no longer in the builder because it is not needed. The Xbasic event that fires after the files are uploaded is responsible for processing the uploaded files and this event can save the file in any location that you want.
V10FP9 File/Image Download

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
 

The File Download Feature Pack allows you to define an action for an event in your Grid (such as when a user clicks a button) that downloads a file from the server to the user's machine.

Using the Feature Pack, you can:
  • download can be any allowed file type from any location on the server (it does not have to be in the webroot), or from any other machine that the server can see.
  • download an embedded object in the table that the Grid is based on. For example, your Grid might be based on a table with a BLOB field in which you have stored embedded PDF, or Excel files.
  • download images that are stored in image fields (either linked or embedded images) in the table the Grid is based on.

V10FP10 Reports - Table of Contents, Bookmarks and Index

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
This feature pack allows you to add the following features to Reports that you create in Alpha Five:
  • Table of Contents
  • Bookmarks
  • Index


You can completely customize the entries that are made in the Table of Contents, Bookmark section and Index. In addition, you can completely customize the layout of the Table of Contents section and Index section.

The entries that appear in the Table of Contents, Bookmark section and Index are 'live' - if you click on an entry, you will be navigate to the appropriate page in the report. In addition, when you print the report to a PDF file, the Table of Contents, Bookmarks and Index are live.
V10FP11 Action Buttons in Grid Components

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
The Action Buttons Feature pack allows you to add buttons to the following parts of a Grid component:
  • Grid toolbar
  • Detail View toolbar
  • any of the free-form areas that surround the Grid, Detail View or Search part
  • the Master Template
  • inside the Detail View layout
V10FP12 Grid Component - Import Excel or Ascii Files

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
 

The File Import Feature Pack allows you to add a button to a Grid component that will upload a file from the user's machine to the server and then import the data in the uploaded file.

The following types of files can be uploaded:
  • All Excel file types (.xls, .xlsx) up to and including Excel 2010 
  • Comma delimited ascii files


The data in the uploaded file can be imported into:
  •  the table that the Grid is based
  • an external table, unrelated to the table that the Grid is based on.

V10FP13 Grid Component - Generic User-Defined Pop-up Window

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
The 'Generic User-Defined Pop-up Window' Feature Pack allows you to open pop-up windows on your Grid component. This is extremely useful in creating highly customized user interfaces in your Grid.

There are four different ways to populate the contents of the window. These are:
  • Make an Ajax callback to the server where an Xbasic function that you specify will compute the HTML to display in the window
  • Call a Javascript function that will compute the HTML to display in the window
  • Define the HTML to display in the window at the same time you define the action.
  • Display the contents of a hidden DIV in the window.


The pop-up window you create be:
  • modal
  • modeless
  • dropdown windows
V10FP14 Grid Component - Custom Help Windows

(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
 

The Custom Help Windows Feature Pack allows you to create help windows for the Grid components in your Application.

Here are some of the things you can do with the Custom Help Windows Feature Pack:
  • Define a button that appears in the Grid Part toolbar. When the user clicks on the button, a pop-up window appears showing help.
  • Define a button that appears in the Search Part toolbar. When the user clicks the button, a pop-up window appears showing help.
  • Define a button that appears in the Detail View toolbar.  When the user clicks the button, a pop-up window appears showing help.
  • Define help for individual fields in the Grid Part or Detail View part.
  • Field level help is displayed when the user presses the F1 key when the field has focus.
  • You can optionally display a 'help icon' next to a field to indicate that there is help available for that field. The help icon can be displayed to the left or right of the field.
  • You can configure the help icon to show the help when the user clicks on the icon, or simply holds the mouse over the icon.
  • If you configure a field help icon to show the help when the user holds the mouse over the icon, the help is displayed after a 500 ms delay, and is automatically dismissed when the user moves the mouse away from the icon.
  • You can control whether field level help is displayed in a modal, modeless or dropdown window.
  • You can use a new action in Action Javascript to open a help window in response to any Javascript event.

V11 Feature Packs - Calendar Control in a UX Component

Number Category Description
FP11_CAL1 Introduction to the Calendar Control for the UX Component. This video introduces you to the Calendar control in the UX Component.
Note: The control will only be available to you if you have the Feature Pack installed.

The video shows how the calendar can be embedded into the Dialog and it shows several different use cases for the control.
FP11_CAL2 Using the Calendar Control in a Dialog for Setting a 'start' and 'end' Date. This video shows how two Calendar controls can be placed in a UX Component to prompt the user for a start and end date. The video shows how you can use client-side programming against the calendar control objects to automatically set the date in the calendar for the 'end' date when the user changes the start date, and how you can automatically set the disabled dates in the calendar for the 'end' date when the user changes the start date.
Note: The control will only be available to you if you have the Feature Pack installed.
FP11_CAL3 Displaying Events on the Calendar Control in a UX Component. When the Calendar control is rendered, you can completely customize the HTML that is shown for each date in the Calendar by writing your own event handler for the Calendar's onItemDraw event. In this video we show how we use this event to display the orders that were received on each day of the month.

The video shows how we make an Ajax callback to a SQL database to get the orders for each month as the user navigates from month to month. The orders are then shown in the appropriate cell on the Calendar.
Note: The control will only be available to you if you have the Feature Pack installed.


These next set of videos are an in-depth look at the Javascript and Xbasic code that draws the orders on each day of the calendar.




In this next video we show how you can open another Dialog showing details of the Order that was clicked on in the Calendar.
Watch Video
FP11_CAL4 Understanding How to Display Custom Information on the Calendar In video FP11_CAL3 we show how you can display orders for a particular date on the Calendar control in a UX Component. In these videos we go into much more depth on how to actually use the Calendar control's onItemDraw and onMonthNavigate events and how to make the Ajax callbacks to get the data from the database in the required JSON format.
Note: The control will only be available to you if you have the Feature Pack installed.

Section 1 - Understanding the OnItemDraw event


Section 2 - Understanding the Xbasic to get the orders for a given month in the required JSON format
Watch Video

Section 3 - Making Ajax callbacks to populate the Calendar
Shows how an Ajax callback is made in the onMonthNavigate event to populate the Calendar when the user navigates from month to month. The same Ajax callback is also made in the onRenderComplete client-side event to populate the Calendar when it is initially rendered.

V11 Feature Packs - Slider Control in a UX Component

Number Category Description
FP11_SLIDER1 Introduction to the Slider Control for the UX Component. This video introduces you to the Slider control in the UX Component.
Note: The control will only be available to you if you have the Feature Pack installed.

The video shows how the calendar can be embedded into the Dialog and it shows several different use cases for the control.
The Slider control can also be rendered in a larger format on a mobile device.
FP11_SLIDER2 Using the Slider to set a 'Rating' Image Showing Number of Stars A common metaphor in Web applications is to indicate a 'rating' by showing an image with stars. This video shows how the slider control can be used to set the rating and show the appropriate 'stars' image.
Note: The slider control will only be available to you if you have the Feature Pack installed.



These videos show how the UX Components were set up.


Download Components Used in Video

V11 Feature Packs - UX Component - Power Search for Grid using a UX Component

Number Category Description
FP11_POWERSEARCH1 Introduction to the 'Power Search' Feature Pack for the UX Component - Allows you to build a Powerful Search Part to Search a Grid that has been Embedded into a Dialog. While it is easy to add a Search Part to a Grid, there may be situations where you want to create a much more sophisticated Search Part for the Grid than the built-in Search Part allows.

(See http://smartphones.findthebest.com/ for an example of a very sophisticated 'Search Part').

For example, you might want your 'search part' to be organized into collapsible 'accordion' panes and you might want users to be able to use sliders and calendar controls to enter their search criteria.

Using the layout power that the Dialog offers, it is very easy to create extremely sophisticated layouts to prompt for search criteria. This video shows how you can use new actions in Action Javascript to submit the Dialog, compute a search expression from the submitted data, and then apply the search to a Grid that has been embedded into the Dialog. The net result being the ability to create an extremely powerful and flexible 'power search' part for your Grids.

Note: The features shown here will only be available to you if you have the Feature Pack installed.

This video shows an example of how a Dialog has been used to create a 'power search' part for an embedded Grid.


The next set of videos show how the Power Search part was created.

Download Components Used in Video
FP11_POWERSEARCH2 Linking a Grid that is Embedded in a Dialog In the previous videos we show how a Grid that is embedded into a Dialog can be searched. In this video, instead of searching the embedded Grid we 'link' it. Linking is like searching, in that it causes the records in the target Grid to be filtered, but has a very important difference - the link fields in the target Grid are automatically set to their corresponding value in the parent component. So, for example, if the embedded Grid is linked on (say) the 'invoice_number' field, all new records that are added to the embedded Grid will automatically have their 'invoice_number' field set to the linking value.

See also video FP11_LIVELINK1 for information on how to create 'live links'.
Note: The features shown here will only be available to you if you have the Feature Pack installed.

Watch Video

V11 Feature Packs - UX Component - Record Navigation and Dialog Search

Number Category Description
FP11_DLGNAV1 Introduction to the Record Navigation and Dialog Search Feature Pack for the UX Component. This video introduces you to the Record Navigation and Dialog Search Feature Pack for the UX Component.

Using this Feature Pack you can easily add functionality to let you navigate from record to record in a UX Component that has been bound to a database. The videos show how you can implement First/Next/Previous/Last buttons to move from record to record, how you can add a slider control to navigate from record to record, or how you can add a List View control to the Dialog to show you a list of key values that you can click on to navigate to a particular record in your Database.

You can also add a highly customized search part that allows you to enter search criteria so that when you navigate from record to record, you are only seeing records that meet your search criteria.

Note: The control will only be available to you if you have the Feature Pack installed.

Watch Video

More complex example using a Dialog with Repeating Sections


Sorting the List View after editing a record in the Dialog (requires build 3915 or above)

FP11_DLGNAV2 In Depth Demonstration on How The Record Navigation and Search Features in Video FP11_DLGNAV1 were implemented. In these videos we go into detail on how to implement the Dialog Navigation and Search Feature pack as shown in video FP11_DLGNAV1.





The following additional functionality has been added to this feature (requires build 3915 or above)

V11 Feature Packs - UX Component - Live Linked Embedded Grids

Number Category Description
FP11_LIVELINK1 'Live' Linking a Grid that is Embedded in a Dialog In video FP11_POWERSEARCH2 we show how you an apply a 'link' to a Grid component that is embedded into a Dialog. In this video we show how to define a 'live link'. When you use the 'live link' feature, the embedded Grid is automatically refreshed any time a linking value in the parent Dialog is changed.
Note: The features shown here will only be available to you if you have the Feature Pack installed.

Watch Video

V11 Feature Packs - UX Component - Advanced Tab Control

Number Category Description
FP11_DLG_ADVTAB1 Advanced Tab Control in the UX Component

The standard Tab control object in the Dialog allows you to group Dialog controls into a series of 'panes'. When the Dialog is run, the user clicks on a tab button to show the corresponding tab pane. However, clicking on a tab button is not the only way in which you might want to change the active pane. With this Feature Pack other methods for selecting the active pane are exposed.



The various ways in which the active tab pane can be selected are:
  • User clicks a tab button
  • Programmatic - some Javascript code is executed
  • Automatic - a client-side 'watch' expression determines which tab pane is active
  • Timer - a timer automatically cycles between the tab panes

Note: The features shown here will only be available to you if you have the Feature Pack installed.


In this video we give an overview of the Advanced Tab Control


FP11_DLG_ADVTAB2 In depth demonstration of how the timer features in the tab control in video FP11_DLG_ADVTAB1 was implmented.

This video shows how the timer feature that automatically cycles between a seriew of images was implmented


Note: The features shown here will only be available to you if you have the Feature Pack installed.




V11 Feature Packs - UX Component - Power Search for Embedded Report

Number Category Description
FP11_DLG_POWERSEARCHRPT Power Search for Reports Embedded in UX Components

The UX Component can be used to create a 'Search Part' for a Report so that the end-user can enter search ctieria to define exactly which records to display in the report.


Note: The features shown here will only be available to you if you have the Feature Pack installed.



V11 Feature Packs - Grid Component - Proximity Search Control

Number Category Description
FP11_PROXSRCH Using a Proximity Search Control to Search for Records within a Specified Radius of an Address, or Partial Address.

A common type of application allows a user to find all store locations, doctors, etc. within a specified radius of a location. The location can be entered in full, or as a partial address (e.g. city, or zip code).


Contrast this video with video GM13 which shows how the same problem can be solved in a different way using a map control in the Search Part.


Requires Feature Pack and build 3568-3905 or above.

Download Components Used in Video


To use this component, you will need to install the sample SQL Server Airports database.

V11 Feature Packs - UX Component - Map Control

Number Category Description
FP11_DLGMAP1 Placing a Map Control on a UX Component Shows how you can place a map control on a Dialog and set basic poperties of the map object.
FP11_DLGMAP2 Displaying Driving Directions on a Map Control for a Starting and Ending Address and Adding a Marker to the Map. When you place a map control on a Dialog you can call any of the various methods that the map object exposes. There are quite a few different methods exposed by the map object. In this video we show how the .plotRoute() method can be used to display a route and driving directions for a starting and ending address.

Watch Video


In this next video we show how the .addMarker() method can be used to add a marker to the map.
Watch Video



Important: In the video we show that the map object's .viewMarkers() method is called after the .addMarker() method is called. Actually, the .viewMarkers() method should be called in the 'onAddComplete' callback event. This ensures that no attempt is made to show the marker before it has actually been placed on the map. The 'onAddComplete' event in the settings object should be defined as follows:


onAddComplete: function(markerSettings,markerObject){
     this.viewMarkers('m1');
}

Note also, in the onAddComplete event function we can use 'this' to reference the map object.
FP11_DLGMAP3 Tour of Methods Exposed by Map Control in UX Component In the previous video we looked at the .plotRoute() and .addMarker() methods of the map object. In this video we take a quick tour of other methods exposed by the map object.


Download component used in video
FP11_DLGMAP4 Adding Multiple Markers to a Map In this video we show how the map control's .addMarker() method can be called to add markers to the map. The example is based on the sample airports database that contains a record for every airport in the United States. When the user selects a state from a dropdown box, an Ajax callback it made and a query is performed to find all of the airports in the selected state. A javascript response is then computed on the server. This response calls the .addMarker() method once for each airport in the state. When the response is received by the browser, a marker is added to the map for each airport in the selected state.







In this next video we show how the .addMarker() method can be used to add multiple markers to the map. (Requires addins build 4099 or above).



Watch Video
FP11_DLGMAP5 Adding Multiple Markers to a Map - Advanced Example. This example extends the example shown in the previous video. When the user clicks on a marker we show how another Ajax callback can be made to populate fields in the Dialog with information about the selected airport.

The video shows how the markers are defined with the appropriate onClick behavior. In addition, when a particular marker is clicked, the markers for all of the airports in the state are removed and a single marker for the selected airport is shown. This marker is draggable, so if you move the marker, the latitude and longitude field for the airport are updated in the corresponding controls on the Dialog.



FP11_DLGMAP6 Geocoding Addresses and Showing Them on a Map This video shows an example of automatically geocoding an address when a record is edited and then plotting the address on a map. The example also shows how a route that consists of multiple addresses ('waypoints') can be plotted.

The example is based on a Dialog with a Repeating Section. The Dialog is bound to two tables: Driver and DeliveryAddresses. Each driver record is linked to multiple delivery addresses, which are shown in the Repeating Section.


FP11_DLGMAP7 Calling Methods of the Google Map Object Directly The methods of the map control that the previous videos have shown are wrappers around the underlying Google Maps api. Advanced programmers might want to work directly with the Google Maps api. This video shows how you can do this. We show an example of how a marker can be placed on a map using a method of the map control and then using direct calls to the Google Maps api.

V11 Feature Packs - UX Component - Chart Control

Number Category Description
FP11_DLGCHART1 Placing Charts on a UX Component - Overview This video gives an overview of the Chart control on a Dialog. The video gives a quick tour of some of the different types of charts that can be created.
FP11_DLGCHART2 How to add a Chart to a UX Component This video gives a basic tutorial on adding a chart to a dialog. It demonstrates a very simple pie chart based on a static series. You can add multiple charts to a dialog to create 'dashboards'. The video shows how a second chart is easily added to the Dialog. In the third video we show you you can apply some basic styling to the chart, such as changing the legend placement and the pie slice colors. Of course, this is only the tip of the iceberg in terms of the styling options that are available.
FP11_DLGCHART3 How to base a chart on a Custom Series

In FP11_DLGCHART1 we demonstrated a chart that displayed summary data from the sample Northwind database. In this video we explore this UX Component in detail.


First, we describe the concept behind the 'custom' series type.



In the next series of videos we go into an in-depth explanation of the code that makes the chart work. We discuss the custom SQL query that is used to get the data that the 'custom' series type will return. We show how the data that are submitted from the dropdown controls are used in the SQL query and we discuss how changing a value in either of the dropdown controls on the Dialog triggers an Ajax callback to refresh the chart.

FP11_DLGCHART4 Chart with Events

When you interact with a chart, you can fire server-side and client-side events. In this example we demonstrate how a pie slice can be 'exploded' by double clicking on it. This involves both client-side event handling (in this case a double-click on a pie slice) and server side-event handling (in this case, refreshing the chart).
FP11_DLGCHART5 More on Chart Events

In this video we show how chart events can be used to dynamically display additional information based on where the user has moved the mouse on the chart. In the example, we show a pie chart and we have a popup window that moves with the mouse when the mouse is over any pie slice.

FP11_DLGCHART6 Calling a Simple Web Service to Get Chart Data - Stock Price Example

In this video we plot stock prices using the 'stock price' chart style. The data is obtained by making a call to a RESTful Yahoo web service.
FP11_DLGCHART7 Customizing the Chart Background and Labels This video shows how you can customize the chart background color, set format for data labels and control other aspects of the chart appearance.

FP11_DLGCHART8 Plotting Multiple Data Series on a Single Chart This video shows how you can plot multiple data series on a single chart. The series can all be plotted using the same series style (i.e. as bar charts or line charts, etc.) or you can mix chart types. For example series1 might be a line, while series2 might be a bar, etc.

FP11_DLGCHART9 Ajax Callback to Refresh a Series

There are different types of 'series' on which a chart can be based. A data series can be 'refreshed'. When a data series is refreshed, all of the charts that are bound to that data series are also automatically refreshed.

In this video we show a Dialog with 3 charts. Each chart is bound to the same series (a custom series). The dialog has a button to refresh the series. When the button is clicked, an Ajax callback is made to refresh the series and then all three of the charts is automatically rereshed.

FP11_DLGCHART10 Understanding the Javascript Series Type This video shows how the data that is plotted on a chart can be computed by a Javascript function. This is done by specifying that the data series on which the chart is based is a 'Javascript' data series. Because the chart data is computed by a Javascript function, the chart is only rendered after an ajax callback is made to refresh the chart.
FP11_DLGCHART11 Understanding the SQL/DBF 'Cross-section' Series Type In most cases when you plot data from a SQL or DBF table your tables are structures so that your query will return a series of values from multiple records, with each value representing a point in a data series. However, in some cases the data in your tables is structured in a 'cross-sectional' manner. In other words, the data that represents points in the data series that you want to plot comes from multiple fields in a single record, rather than from a single field in multiple records.

In order to create charts based on 'cross-sectional' data, you define your Data Series using either the SQL or DBF 'Cross-section' data series type.

This video shows how the data series for this type of chart is defined.
FP11_DLGCHART12 Plotting Time Series Values - Dates and Times In some cases the data points that you want to plot on a chart are associated with specific date or date/time values. This video shows how XY type charts can be used to plot this type of data.

FP11_DLGCHART13 Exporting Charts to PDF or RTF Files This video shows how the charts on a UX Component can be exported to a PDF or RTF file.
(Requires build 2818- 3980 or above)
FP11_DLGCHART14 Splitting a Single Physical Series into Multiple Logical Series to Plot a Dynamic Number of Series on a Chart This video shows you you can plot a dynamic number of series on a chart by splitting a single physical series into multiple logical data series.
(Requires build 2887- 3993 or above)
FP11_DLGCHART15 Defining Labels for each Bar in a Bar Chart. By default, the label for each bar in a bar chart is the data value for the bar. In this video we show how each bar can have a descriptive label.

Xbasic

Number Category Description
X1 Defining Xbasic Classes that Inherit from a Parent Class When you define Xbasic classes, you can define classes that inherit from a parent class. You can also put classes in their own namespaces.

This video shows how you can define a class that inherits from a parent. It also shows how methods in a child class can call methods in the parent class from which it inherited.

(Requires build 3158-4061 or above.)
Watch Video

Application Templates

Number Category Description
APP1 Contact Manager Template At the Web Control Panel, when you click the 'New Project' button, a dialog appears asking if you want to create an empty project, or if you want to start with a template. Currenly only one template is available, but over time we expect to add additional templates.

These videos explain how to install and publish the template and give a tour of the template features.

Watch Video - Tour of the Contact Manager Template Application
Watch Video - Creating an Application from a Template

Version 10 Videos

These videos were all originally recorded for Alpha Five Version 10. In most cases, they still apply to Alpha Anywhere, although in the current version there may be new, or easier ways of performing the task that is being demonstrated.

Number Category Description
1 General This video shows a basic Ajax component. It shows how easy it is to create an Ajax Grid using the Grid builder. The video demonstrates basic interaction with the Grid such as sorting, page navigation and changing the number of record per page.
2 Searching In these videos we will show the various types of search features you can add to the Grid:

- Search Part
-Quick Search
     - Searching on current sort column
- Query by Example
     - Incremental searching, QBE syntax
- Alphabet button bar
 

The videos starts with the Customer grid created in example 1.

 
3 Editing In this video we show an editable grid. There are many different ways an editable grid can be configured We show:
- Submitting all rows at once
- Saving individual rows
- Edit on demand
- Turning off option to save individual rows
- Moving the new record rows to the top of the grid
- Keyboard support (F9 to save data, Up and Down to change row with focus, etc.)
- Trapping actions that would loose uncommitted data.
4 Rich Text The grid contains a built-in HTML editor for editing rich Memo fields. This video demonstrates how rich Memos can be edited in the Grid part and the Detail View part.
- In the Grid part, the HTML editor is configured as a popup editor - it is opened when you click on the field
- In the Detail View, the HTML editor can be configured to edit 'in-place'.
5 Multi-user editing The grid uses 'optimistic record locking' to trap multi-user edit conflicts. This video demonstrates:
- Automatic refresh of data as soon as the user starts to edit (which minimizes chances of a write conflict)
- Trapping write conflicts.
6 Data Validation The grid has exceptionally strong data validation features. This video demonstrates:
- Data validation rules
- Data validation custom Xbasic at the field level
- Data validation events
- For DBF tables, automatic honoring of Field Rules
7 Error Reporting Styles The grid offers several styles for reporting errors. This video demonstrates the various error reporting styles.
8 Lookups The lookup feature in the Grid is exceptional. This feature demonstrates:
- Opening the lookup in a window on the page
- Dynamic lookup filtering
9 Detail View This video shows the various options for the grid 'Detail View'. This video demonstrates:
- Various options for where the Detail View is opened:
          - on the page underneath the Grid part
          - in a modal, popup window
          - in a modeless, popup window
          - in the Grid part, directly under the row.
- Using the 'pre-fetch' option for greater responsiveness
10 Row Expander The 'row expander' turns on a small icon next to each row in the Grid. When you click this icon, the row expands to show additional information related to the current row. This video demonstrates:
- Row expander showing a single grid
- Row expander showing multiple grids in a Tab control
- Row expander showing multiple grids in an Accordion control
- Setting the row expander to only allow one row to be expanded at a time
- Defining a custom row expander event to show any arbitrary content generated by the server
11 Conditional Formatting The conditional formatting option allows you to format data conditionally, depending on its value. For example, you might set the color of the quantity field to be red if it is above average. This video demonstrates:
- conditional formatting at the cell and control level
- conditional formatting at the row level.
12 Conditional Images The conditional image feature allows you to display different icons in the grid depending on the data in each row. This video demonstrates how above average quantities have a green icon and below average have a red icon. There is no limit to the number of conditions you can test for.
13 Master Templates The Grid component comprises three sub-parts - Search Part, Grid Part and Detail View Part. In previous versions of Alpha Five you laid out these three parts on the .a5w page that contained the Grid component. With Master Templates, you can lay out these parts in the Grid definition itself. You can also enclose the parts in a Tab or Accordion object.
14 Collapse Bar The collapse bar allows you to wrap the entire Grid component in a frame. When you collapse the frame (by clicking on the frame title bar), the Grid is hidden. This is useful if you have a page with multiple Grid components on it.
15 Form Layout The records in a Grid component can be displayed in either a tabular view or a form view. When you use the form view, the Grid offers many different layout options that allow you to create highly customized form layouts. This vide demonstrates:
- Tab controls
- Accordion controls
- Container controls
- Frame controls
16 "Liquid" Forms Smart phones are an increasingly popular platform for running web applications. On a smart phone, the screen real estate is severely limited. This video shows how the Grid makes it easy to design 'liquid' forms - forms that automatically reconfigure themselves based on the screen size.
17 Ajax Windows When you click on a hyperlink in a Grid you can display related information. This video shows how this related information can be shown in Windows on the current page. There are several different types of window styles:
- Modal popup window
- Modeless popup window
- Dropdown windows

In addition, you can also display the related information in any user defined DIV on the page.
18 Cascading Dropdown Boxes in Search Part The Search Part of the Grid can display dropdown boxes for search fields. Say you have a dropdown box for the Country, City and Company fields. You can configure dropdown boxes so that until the user has made a selection from the Country field, the City and Company dropdown boxes are disabled. When the user selects a Country, the City dropdown box is populated with cities in the selected country, and so on.
 

This video shows how to define cascading dropdown boxes:



This video shows how you can control the layout of the Search Part:
19 Action Javascript - Print Report as PDF This video shows how you can print PDF reports and display them in popup windows (modal, modeless or dropdown), or in an arbitrary DIV on the  page.
20 Watermark Fields Watermark fields allow you to put the field label inside the field itself. If you are designing forms where screen real-estate is limited, watermark fields are a great way to save space.
21 Auto-suggest Fields Auto-suggest fields work similarly to the now familiar Google Search Toolbar. As you start typing into a textbox, a list of suggestions is supplied. In the case of the Grid component, the suggestions can come from a static list of values, or more commonly, from a table. The list of choices can be filtered based on other fields previously filled in. For example, say that you have defined the 'City' field to be an auto-suggest field. If you previously entered 'CA' into the 'State' field, then when you start typing into the 'City' fields, the list of suggestions will only show cities in California.
22 Edit-combo box fields. Standard HTML does not support an edit-combo box control. This video shows how you can include edit-combo boxes in your Grid components. You can use edit-combo boxes in the Search, Grid and Detail View parts.
23 Supercontrols This video shows how you can define a window to show Google Maps for the address in the current record.
24 Action Javascript - Open a Grid This video shows how you can open a Grid in a popup window (modal, modeless or dropdown), or in an arbitrary DIV on the page. The Action Javascript genie writes all of the Javascript code.
25 Tabbed UI Builder The Tabbed UI builder allows you to take all of the pieces of your applications (Grids, Reports, A5W pages, etc.) and build a tabbed user interface, much like a modern desktop application would employ.
26 Page Layout Builder The Page Layout builder allows you to create a complex page layout that contains multiple components. Components can be laid out in tabs, and accordions and can be displayed in on-page windows, or in pop-up windows (either modal, or modeless).
27 Window Options The Action Javascript builders make it very easy to create buttons that open other Grids, Reports, Pages, etc. in pop-up windows. You can also open up the target Grids, Reports, etc. in new 'Panes' in the Tabbed UI builder. These videos show some of the Window options such as:
 

Multiple modeless window

Re-using the same modeless window

Setting the window title

Opening a new pane in the Tabbed UI Object.
28 Constrained Keyword Search The Grid component has always allowed you to create Keyword searches - a search that searches in multiple fields. But now, you can create 'constrained' keyword searches. This allows you to perform a keyword search subject to some other constraint e.g. (Department = "Books").
29 Tabbed Linked Grids You can create very powerful 'master-detail' Grids by placing 'Linked Content Sections' on the Grid. If a 'Linked Content Section' contains more than one Grid, the content is displayed in a Tab or Accordion object. For example, you might have a Customer Grid that display the Orders for the customer record that has focus. The Orders grid, in turn, might display the Order Details for the order that has focus. There is no limit to the level of nesting of linked content.

This show how easy it is to create a Linked Content Section.
30 Client-side Formatting, Calculated Fields and Show/Hide Fields The Grid component supports several powerful 'client-side' features such as calculated fields, dynamic formatting, dynamic show/hide of Grid elements and dynamic enable/disable of Grid elements.

The first video shows how you can define a calculated field. The calculation is performed using Javascript as soon as the value in one of the input fields changes.


The second video shows how you can dynamically style controls in the Grid. It shows how the Quantity field can be displayed in a different font and background color depending on what range of values it is in.


The third video shows how parts of a Grid form can be hidden under certain conditions. The Grid shown has a section for the billing address and shipping address. If the 'Shipping address is same as billing address' field is checked, the entire 'Shipping Address' part of the Grid form is hidden.
31 Client-side Show/Hide and Enable/Disable of Tab and Accordion Panes The panes in a Tab and Accordion control can be dynamically hidden/shown, or enabled/disabled based on an expression that is evaluated in the Browser.

This video shows a Grid with  a Tab object with two panes (Billing Address and Shipping Address). If the 'Shipping address is same as billing address' checkbox is checked, the 'Shipping Address' pane is hidden and then disabled.
32 Multiple Language Support If you are developing applications for multiple languages, you might want to change labels and prompts based on the current language. You can tag any text in the Grid definition as 'replaceable' and then you can define multiple language definitions in which you define the value for all of the tagged strings in your definition.

This feature is extremely powerful because the replacement strings that you define in your language definitions can be expressions or static text.

This video shows how you can use this feature.
33 Grid Templates Whenever you create a new Grid Component, the Grid Templates Genie pops up, allowing you to select one of several pre-defined templates, or a template from your own library of templates. Templates can be a great time saver because they can pre-set a multitude of properties when you create a new component.

This video shows how you can use Templates, and how you can define your own templates.
34 Edit-Combo Boxes - Dynamic Filtering An earlier video (number 22) showed how you can create edit-combo box controls in your Grid component. In this video we show how you add dynamic filtering to your edit-combo boxes. With dynamic filtering, the list of choices that are shown in the edit-combo box is filtered on the value in some other control that you have filled in. For example, you might have filled in MA into the State field. When you open the Edit-combo, only cities in MA will be shown.

The dynamic filtering can be client-side, or server-side. If you choose the client-side option, then the edit-combo box is populated at render time with a complete set of data and then when you open the edit combo, Javascript is used to filter the data that is already in memory.

If you choose the server-side option, then when you open the edit-combo, an Ajax callback is made to populate the edit-combo box.

The edit-combo can be used in all parts of the Grid - i.e. Search, Grid and DetailView.
35 Grid with an Embedded Grid in a Cell Grids are completely recursive. That means that Grids can be placed inside other Grids, up to any depth that you want. In this example, we have a simple Grid showing customers. One of the columns in the Grid contains an embedded Grid showing the Invoices for that customer. This embedded Grid, in turn, has a row expander. When you open the row expander, it shows all of the invoice items for the selected invoice.

Normally, each cell in a tabular grid contains a single field. But in this example, instead of placing a single field in a column cell, we have placed an entire Grid.
36 Action Javascript - Lookup and Fill-in Action The 'Lookup and Fill-in' action allows you to define a Javascript event that will automatically lookup data in a lookup table and then fill-in certain fields in the record you are editing.

This video shows how you can define a 'Lookup and Fill-in' action using Action Javascript.
37 Client-side System Events The Grid Component has a rich client-side event model. This video shows how you can use client-side events to put up a simple 'Sorting....' message while the Ajax callback is taking place after the user has clicked on a column heading to sort the Grid.
38 Using Arguments in the PageLayout and TabbedUI Components to Filter Records You can define arguments in the PageLayout and TabbedUI builder. Arguments allow you to filter the Grid and Reports shown in the PageLayout or TabbedUI based on some external data (such as a session variable, or page variable).

This video shows how you can put a button in a Grid to open a pop-up window. The pop-up window shows a PageLayout component that is filtered based on data in the current Grid row. A second button opens a pop-up window showing a TabbedUI component that is also filtered based on data in the current Grid row.
39 Using a Grid Component instead of a UX Component If you have used the UX Component in your V9 web application, you might want to consider using the Grid component as a replacement for the Dialog. The reason is that the Grid component in V10 has many more features than the Dialog component (which has not been updated for V10) and can be configured to behave in a manner that is very similar to the way in which a Dialog behaves.

The key to making a Grid behave like a Dialog is to create a dummy table on which the Grid will be based, and then to configure the Grid to use a 'Form' layout.

The video shows how to create a simple dialog to collect name and address information.
40 Using AEX Files To Reference Global Functions When you define server-side event handlers in a Grid you can reference functions that you define in the Grid itself, or Global Functions that you define in the Code tab of the Control Panel. If you reference a Global Function, you have to compile the Global Functions into an .AEX file, insert a reference to the .aex file in your Grid Component, and then publish this .AEX file along with the other files in your project.

This video shows how you can use .AEX files in a Grid Component, and it shows how the Publishing process can automatically compile the .AEX file and publish it.
41 Using 3rd Party Editors (such as Dreamweaver) with Alpha Five Many designers are very familiar with a particular HTML editor (such as Dreamweaver, or Fontpage) and would prefer to user their favorite editor while editing .a5w pages in an Alpha Five web project. Version 10 makes it easy to use 3rd party HTML editors.
42 Custom Search Bar Buttons By default, when you create an 'Alphabet Button' search bar, Alpha Five creates buttons for each letter of the alphabet. However, you can also create custom search bars in which you specify what the button labels are, and what the corresponding search expression is for each button. This feature has many uses. For example, a list of houses for sale could have buttons for several different pre-defined searches: 'Less than $500K', 'Between $500K and $750K', '$750K to $1M' and 'Above $1M'.
43 HTML Form Import Genie In some cases a developer using Alpha Five will already have a form that was designed in some external HTML editor, such as Dreamweaver or Frontpage. They would like to 'import' that form into an Alpha Five web project and 'connect' the form to a database.

This video shows how the Form Import Genie can be used to connect a form in an HTML page to a database.
44 Tree Control Genie For users who are hand-coding .a5w pages, the Tree Control Genie shows you how to create the Javascript and Xbasic to display an Ajax enabled tree control.
45 Advanced use of Custom Controls in a Grid  

One of the control types available in the Grid is the Custom Control. This allows you to define an arbitrary Xbasic function to compute the HTML and Javascript for the control. This example shows a Grid showing Invoices. One of the cells in the Grid shows the line items for the Invoice. This could have been done using an Embedded Grid Component, but the Custom Control solution is a lighter weight, and faster solution.
46 Advanced use of ShowRowExpanderIcon event When you use the Row Expander feature in a Grid, by default, the expand icon is shown next to each row in the Grid, regardless of whether that row actually has any child records or not. In some cases, you might want to suppress the row expander icon from showing if there if there are no child records. You can do this using the ShowRowExpanderIcon event.
47 Displaying Chinese Data Improved support for UTF-8 data makes it possible to display Chinese data in a Grid.
48 User Defined Watch Events A user defined watch event allows you to define Javascript code that will get executed whenever the value in a 'watched' field in your Grid changes. In this video, we show how the label on the 'state' field can be changed to 'State' if the country is 'USA' and to 'Province' for all other countries.
49 Printing the Currently Selected Records, or Opening a Grid showing Currently Selected Records. Putting a button on a Grid to open another Grid or a Report is easily accomplished using Action Javascript. This video shows how you can use the special Alpha Five functions, CurrentGridFilter() and CurrentGridOrder() to print the records that are currently selected in the Grid. You can also use these functions to open another Grid showing the same selection of records in the current Grid.
50 The 'Working Preview' pane in the Grid Builder The 'Working Preview' pane in the Grid Builder allows you to run the Grid (just as the Live Preview pane does). But 'Working Preview' does not use the Application Server - instead, it uses a special protocol (not 'http') to talk to Alpha Five directly. Debugging your Xbasic event handlers is very easy when you use Working Preview.
51 Show/hide expressions in the Page Layout and TabbedUI component You can use show/hide expression in the Page Layout component to show or hide the objects that you place in the component. The expressions can refer to session variables and arguments defined in the component. Using show hide expressions, it is easy to show one user a page with one particular set of components, and another user a completely different set of components. In the case of the Tabbed UI component, the show/hide expressions can control which buttons are visible in the button pane.
52 Using Server Side Javascript Grid Events to show a button in only the first row of a Grid Sometimes you might want to show a control, such as a Button or Hyperlink, in only the first row of a Grid. This video shows how this is easily done using the System Javascript Events in the grid.
53 Dynamic DetailView window title The DetailView can be shown in a popup Ajax window. You might want the window title to be dynamically constructed using data from the current Grid row. This video shows how you can do this using system Javascript events.
54 Automatically Close Modal Pop-up Ajax Window when Grid Data are Saved It is easy, using Action Javascript, to open a Grid in a pop-up modal Ajax window. This video shows how you can cause the modal pop-up window to automatically close when the data in the Grid shown in the pop-up window are saved.
55 TabbedUI Component with buttons on Home Page (instead of on button bar on left) The Tabbed UI component is an easy way to create a 'launch pad' for all of the  pages, Grids and Reports in your application. The standard Tabbed UI component has a series of buttons in a 'button pane' on the left or right hand side. Each of the buttons opens a new pane in the Tabbed UI.

Instead of putting the buttons that open new Tabbed UI panes in the 'button pane', you might want to put the buttons directly on the Home Page that is displayed when the Tabbed UI component is first opened.

This video shows how this is easily accomplished by using a Page Layout component for the Home Page of the Tabbed UI component. (Requires System Addins build 3516 or greater).
56 Action Javascript - User Defined Ajax Callback - Setting Grid Properties on a Callback Whenever you perform an operation (e.g. Sorting, Page Navigation, Saving data, etc.) Ajax callbacks are made to the server. These callbacks are system callbacks (i.e. the user does not have to do any programming- Alpha Five generates the callbacks automatically).

There may be situations in which you want to program your own user-defined Ajax callback (for example, to compute shipping charges and taxes on an order). Defining a user-defined Ajax callback can be done easily using Action Javascript. When the callback is made, a user specified Xbasic function is called to handle the callback. This function will typically compute some Javascript commands to send back to the Browser.

This series of videos show how you can use the special e._set object in your callback event handler to set properties in the Grid. In your callback handling event, instead of writing Javascript to send back to the client, you simply set properties of the e._set object and Alpha Five automatically generates the appropriate Javascript response.

Requires build 3517 or above.
57 Tabbed UI - Reports - Prompting for Arguments at Runtime This video shows enhancements that have been made to the Tabbed UI Component. When you print a report in the Tabbed UI, you can specify that certain parameter values should be prompted for at run-time.

Previously, the dialog that prompted for these values could only display simple input control.

Now, you can specify a calendar control for Date and Date/Time fields, a Listbox or Combo box (which dynamically populated choices), a Checkbox for logical values, or a Radio Button control.

Required build 3517 or above.
58 Grid, TabbedUI and PageLayout Builder Using these builders is now easier because you can quickly search for a property in the property grid when you want to edit a property value.
59 Alphabet Button Search - Dynamically hiding/showing the search bar based on number of records in a Grid. The Alphabet Buttons search bar allows you to quickly search for records in a Grid that start with a certain letter. In the case of a Grid with just a few records, you might want to hide the search bar. This video shows how you can use Javascript System events to dynamically show/hide the search bar.
60 Showing row-level errors in a pop-up window By default, when you submit a Grid and the server determines that there are errors in the data, the errors are either shown next to the field(s) that have errors, or in the case of 'row-level' errors, the errors are shown by turning on an error icon in the row selector, which the user can then hover over with the mouse to see the actual error text.

This works well if the Grid has a tabular display. But in the case where the Grid is formatted as a Form, if the form has a large number of fields, the error icon can be too subtle and is easily overlooked. A new option allows you to display 'row-level' errors in a pop-up window.
61 Multiple Language Support in the TabbedUI and PageLayout Components Multiple Language support was originally introduced in the Grid component (see Video 32). Now, it has been extended to the Tabbed UI and Page Layout components.


(Requires build 3525 or above)
62 Getting a pointer to a Grid's parent Grid Object Note: This video is aimed at advanced users who are writing their own Javascript event handlers.

The Grid object exposes many methods that you can call from Javascript event handlers in your Grid components. Typically, your Javascript looks like this:

{grid.object}.methodName();

'{grid.object}' is a placeholder that gets replaced with the Grid object alias at run-time.

There are situations where a Grid is opened as a child of a parent Grid and you want to execute a method on the the Grid's parent Grid. In this case, you can't use the {Grid.object} placeholder. This video explains how you can get a pointer to a Grid's parent Grid.


(Requires build 3525 or above)

(See also video 92)
63 Customize Language in Date Picker The strings for month and day names in the Date Picker can now be customized. This feature also works with the <a5:r> language translation tags, making it easy for your application to automatically use the appropriate language strings for different  users.


 

(Requires build 3530 or above)
64 TabbedUI Component - Refreshing Parent Grid when child Grid tab pane is closed. When you use Action Javascript to open a child Grid in a pop-up Ajax window, you have always had the option in the Action Javascript builder of specifying that the parent Grid should be refreshed when the pop-window is closed. Now, if the parent Grid is running in the Tabbed UI and your button opens the child Grid in a new tab pane in the Tabbed UI component, you can specify that when the tab pane for the child Grid is closed that the parent Grid should be refreshed.


(Required build 3535 or above)
65 Linked Content Enhancements - Placing Linked Content into the Master Template Linked Content Sections allow you to display a child Grid that is linked to a record in a parent Grid (for example, showing invoice line-items for a given invoice record). Previously, you could only place the Linked Content sections in one of the Grid's Free-form Edit regions. Now, you also have the option of placing the Linked Content in the Grid's Master Template. This video explains the benefits of using this new option.


(Requires build 3535 or above)
66 User-defined Ajax Callbacks - Understanding what Information is Available to you when you write your Xbasic Callback Handler Action Javascript allows you to define a user-defined Ajax callback. Typically, you define an Xbasic function to handle the callback. This video explains how you can use the Xbasic Debugger to explore what information is available to you when you write the Xbasic Callback Handler. It also explains how you can use Javascript to 'harvest' any data on the page and pass that information back to the server as part of your Ajax callback.
67 Tutorial on Path Aliases In web applications, filename references are typically aliased (e.g [PathAlias.ADB_Path]\Customer.dbf). The aliases are resolved using data that is published in the a5_application.a5i file in the webroot. These videos present a short tutorial on understanding aliases.
68 Reports - Using session variables in Reports Session variables are used throughout web applications. You can reference session variables in reports. This video show how you can place a calculated field on a report to print out the value in a session variable.

(Requires build 2830-3540 or above)
69 How to Pass Variables from a Parent Grid to a Child Grid This video presents a short tutorial on how you can pass arbitrary data from one Grid to another Grid.
70 Controlling the Position of Pop-up Ajax Windows When you use Action Javascript to open a Grid, web page, or Report, you are using a pop-up Ajax window to display the target object. Previously you did not have control over where the pop-up window was displayed. It was always centered when initially displayed, and then its position was remembered for subsequent displays.

Now, there are several new options for controlling the position of these pop-up windows.


(Required build 2842-3541 or above)
71 Customizing the Write Conflict Error Message The Grid component uses 'Optimistic record locking' to prevent one user from overwriting another user's edits when two users edit the same record at the same time. The OnWriteConflict event handler allows you to customize the Write Conflict error message.


(Requires build 2862-3542 or above)
72 Duplicating an Existing Record Sometimes when you are entering a new record into a database, it would be great to be able to use the data from an existing record as a starting point for the new record. This video shows how you can create a button in your Grid that fills in the data in the new record row with data from the current record.
73 Client-side Xbasic Typically the HTML events in a Grid (e.g. onClick, onChange, onBlur, etc.) are handled using Javascript. But in the case where the Grid is running on the Desktop in a Desktop application (which includes 'Working Preview' mode), you can actually use Xbasic functions to handle these HTML events.

This is an extremely powerful feature for users who incorporate the Grid component into their Desktop applications.


(Requires build 2877 - 3543 or above)
74 Printing Reports from a Grid in Working Preview mode

Previously, if you added a button to a Grid component to print a Report, the report would only render if the Grid
was running in the Browser or in Live Preview. It did not render if the Grid was running on the Desktop, or in Working Preview. Now, using the new 'client-side xbasic' feature, the report will also render when the Grid is running on the Desktop.


(Requires build 2877 - 3543 or above)
75 Using an Auto-suggest instead of a Dropdown Control - 'Coded Lookups' A very popular feature of a Dropdown control is that it allows you to store an 'id' value, but display a text value. For example, in an Order Items table, you might store the 'product id' value, but display the corresponding 'product name' field. When the user is editing data they can select from a list of product names, which is obviously much easier than having to enter a product id.

A significant drawback, however, of using dropdown controls is that the list of choices for the control has to be loaded when the Grid is loaded. If the list is small, then this does not represent a problem. However, what if the list is extremely large? This would cause a significant slowdown in loading the Grid. If the Grid displayed multiple rows, then the problem is even worse because the list will be downloaded for each row in the Grid!

These videos show a technique where the auto-suggest control is used rather than the dropdown control. The user still enters a product name and the corresponding product id gets stored in the table.
 

Because the list of choices does not have to be loaded up front, the Grid will load much more quickly, and then when a list of choices is presented to the user, it is pre-filtered based on the characters the user has already typed into the field.


 
76 Currency Symbols from any Country in the World This video shows how you can easily format currency data in a web application to use the currency symbol from any country in the world.

The video demonstrates both server side and client side formatting of the data. The second video demonstrates how you can print reports with international currency symbols.



 
77 Customize SQL Error Messages In a Grid component against a SQL database, when you do an Insert, Update, or Delete, the SQL Database might send back an error. Typically the error message is not very friendly. The new onSQLExecuteError event allows you to intercept the error and show a friendlier error to the user.


 

(Requires Version 10.5)
78 Customizing SQL Insert, Update and Delete  Statements - Using Stored Procedures to Update your Database In a Grid component that is based on a SQL database, the Insert, Update and Delete SQL statements that are executed when a user inserts, updates or deletes a record are automatically computed by Alpha Five.

In some cases, a user might want more control over how these SQL statements are executed, or might want to use stored procedures to insert, update or delete records.

The onBeforerSQLCommandExecute and onAfterSQLCommandExecute server side events allow you fully customize the SQL statements that the Grid executes in order to insert, update or delete records.

In addition, another common use for these events is to update some other table at the same time as the update is being performed in the tables the Grid is based on. For example, you might want to add a record to a log table.
 

When you perform updates against some other table as part of our update, insert or delete, you might want to wrap the entire operation into a single transaction. This is easily done by starting a transaction in the onBeforeSQLCommandExecute event and then either committing or rolling back the transaction in the onAfterSQLCommandExecute event.

These videos discuss these new events.


 

(Requires Version 10.5)
79 Setting Default Values in the Search Part and Automatically Searching the Grid In the case where you have a Grid with a Search Part, you might want the Grid to open with the Search Part already filled in with default search values. And furthermore you might want to actually submit the Search Part so that the user's initial view of the Grid is a filtered view based on the Search Part's default values.
80 Customizing the Layout of the Detail View Toolbar - Adding and Removing Buttons You have always been able to customize the icons and bubble help that are displayed in the Detail View toolbar. Now you can completely customize the layout of the toolbar. You can eliminate any of the standard buttons if you want, or add your own buttons to the toolbar.
81 Using GUIDs (Unique Identifiers) as a Table's Primary Key. A GUID (Globally Unique Identifier) is an ideal choices for the Primary Key of a record. This video shows how you can easily build a Grid component on a table that  has a GUID as its primary key. The video demonstrates how you can assign the GUID value to the primary key field in the new records that you create in the Grid component. The video shows how a SQL table is used, but the technique applies equally well to native Alpha Five .dbf tables.
82 Power Searches in the Search Part of the Grid Component The Search Part of the Grid component supports a special syntax that allows you to do powerful searches for ranges of records, to search for multiple different values in a field, and to use the special .. operator.

This video demonstrates how you can use the Search Part to perform powerful searches.
83 Search Part - Multi-Value Fields - Checkboxes and Multi-line Dropdownboxes The checkbox control and the dropdown box control (when configured appropriately) allow multiple values to be selected. When you use a multi-value control in the Search Part of a Grid component, you can now specify if multiple selected values should be combined with an AND or and OR clause.

The video demonstrates the significance of this new option.
84 Using Custom Javascript Functions in Client-Side Expressions. This video shows how you can use custom Javascript functions in client-side calculations. Client side calculations include calculated fields, show/hide expressions, enable expressions, conditional image and conditional style calculations. When you write these expressions you can use any custom Javascript functions that you create. This is an extremely powerful feature because it allows you to create very complex client-side calculations, using the full power of the Javascript programming language.

In the video, a custom Javascript function is defined to compute the number of minutes between to date/time values.
85 Custom Ajax Callback - an In-depth Example

This series of videos shows an in-depth example of a custom Ajax Callback. The video shows how a record in the Grid can be deleted. Before the record is deleted a callback is made to the server to see if the user is allowed to delete the record. If so, then custom SQL commands are executed (using AlphaDAO). The videos then show how the action can be enhanced by prompting the user for confirmation after it has been determined that the user is allowed to delete the record.

 

In a desktop application prompting the user for confirmation is simple because there is no concept of server-side and client-side code execution that you need to be aware of. But in a Web application, the act of prompting the user for confirmation when a server-side event is executing is more complex because the prompt has to be executed client-side. The video shows how the callback is divided into two separate callbacks, and how the confirmation prompt is executed on the client-side.


 

If you want to run this component for yourself, you can download the Grid component. You will need to change the connection string to point to the sample Alphasports.mdb file in the Alpha Five V10 program folder in the MDBFiles sub-folder.


 
86 Moving a Button from the Grid Row to the Navigation Bar or Free-form Edit Region When you place a button in a Grid row, the button repeats for every row in the Grid. You might prefer to put the button in the Grid's Navigation Bar, or in a free-form edit region. This video shows a simple technique for putting button in the Navigation Bar or free-form edit regions.


 

(Note: The techniques shown in this video are no longer necessary if you have the Action Buttons Feature pack, which automates the process of placing buttons in the Grid toolbar.)
87 Using the 'Checked column' in a User-defined Ajax Callback When you design a Grid you can specify that the Grid should show a 'checkbox' column to allow the user to select multiple rows in the Grid. When you define a custom Ajax callback, the callback includes information about the primary key of each row that was checked.

This video shows how you can create a custom Ajax callback to apply a filter to the Grid to show only the records that the user checked.


 

(Note: Many of the techniques shown in this video are now available through built-in Grid features - see video 88. However, the techniques shown here are still interesting as they demonstrate useful concepts.)
88 Using the 'Checked column' in a Grid Component These videos show several different ways in which the 'Checked column' in the Grid can be used.

(Requires build 3341-3597 or above)
89 Exporting Checked Records to Excel This video shows how you can allow the user to select an arbitrary number of records by checking the checkbox selector for a record, and then exporting those records to Excel.

Note: To duplicate the functionality shown here you need the Export to Excel and Action Buttons Feature Packs.
90 Using Javascript to total values in a Column for the Checked Rows  

This video shows how you can create a running total of the values in a column of the Grid. When a row is checked, the vaule in the column is added to the running total. When the row is unchecked, the value in the column is deducted from the running total.
91 Using a User-defined Ajax Callback to add records to a 'Transaction Table' This video shows how you can create a user defined Ajax callback to add records to a transaction database. The video assumes that the transaction database is a SQL database, but the principles are the same for .dbf tables.

The new record in the transaction table is populated with data from the current row in the Grid.
92 Refreshing the 'parent' Grid when an event occurs in a 'child' Grid This video shows how you can trigger a refresh of a row in a 'parent' grid when some event happens in a 'child' grid. The video show a Grid based on the 'Customer' table that has a Linked Content Section showing a Grid based on the 'Invoice_Header' table. (The 'Customer' Grid is therefore the 'parent' of the 'Invoice_Header' Grid.)

When a record in the 'Invoice_Header' Grid is saved, the AfterUpdateRecord event handler makes a change to the parent record in the 'Customer' table and then forces the 'Customer' Grid to refresh in order to show the change.


(See also video 62)

Note: If you have build 3906-3632 or above, the technique described in the video to avoid using the {Grid.object} placeholder is no longer necessary.
93 Tab UI - Warning before Closing a Tab Pane - Custom Coding When you open a Grid component in a Tabbed UI pane, if you then try to close the tab pane when the Grid is dirty, you get a warning that the Grid is dirty and you have to either save the Grid or abandon the changes. This behavior is 'built-in' to the Tabbed UI.

However, if you open an .A5W page in a Tabbed UI pane (that contains a Grid, or multiple Grids, for that matter), there is no built-in checking before a Tabbed UI pane is closed. These videos show how you can you own custom coding to trap if the Tab pane is 'dirty' and prevent it from closing.

The code works by setting an arbitrarily named property of the Tabbed UI object called 'gridIsDirty'

94 Using Grids in Desktop Applications - Passing Data from the Grid to Xbasic A power feature for developers who are building Desktop application is the ability to use Grid components in their Desktop applications. This video, which was made in response to a specific question from a developer, shows how to set a global Xbasic variables from a field in the Grid component.
95 Opening Tab Panes automatically when a Tabbed UI Component is Opened When a TabbedUI component is opened, the Home tab is displayed. In this video we show how you can automatically open any number of Tabbed UI panes when the Tabbed UI Component is first opened.
96 Showing a value in the Grid only for the current row and hiding the value when the row does not have focus. Assume that you have a Grid with multiple columns. Let's say you only want to display the value in one of the columns for the row that has focus. In other words, the value in this column will be hidden for all rows, except for the row that has focus. These videos show two different ways in which you can write the Javascript to accomplish this:
97 Action Buttons - Programmatically Clicking a Button using Javascript This video shows how you can use Javascript to 'click' an Action Button.
98 Positioning a Grid's Linked Content Sections Precisely Say you have a Grid which displays a child Grid in a Linked Content Section. Assume that the child Grid also has a child Grid in a Linked Content Section. So, when the top level Grid is displayed, there are actually three Grids visible - parent, child and grand child.


Typically, these Grids will be displayed sequentially. But what if you wanted to display them horizontally with the tops of each Grid perfectly aligned? It turns out to be harder to do this than you might imagine.


The following videos show how you can use a Master Template in the parent Grid and some simple Javascript that is generated in the server-side onAfterExistingRowsRender event to precisely align the Grid, the child Grid and the grand-child Grid.
99 Enabling or Hiding an Action Button if No Records in Current Query This video shows how you can enable or hide an Action Button if there are no records in the current Grid query.

Understanding Server-side Events in a Grid Component

Number Category Description
SSE2 After Validate Events These videos explain the various events that fire after data is successfully saved in the database.
SSE3 Redirect Event These videos explain how the redirect event can be used to dynamically compute a redirect target after data is committed.
SSE4 Render Events These videos explain how the various 'onRender' events can be used to inject custom HTML into the Grid as it is rendered.
SSE5 'OnSearchPartFilterCompute' Event These events show how you can use the 'OnSearchPartFilterCompute' event to customize the way the search filter is computed from the data that is submitted when the user submits the Search Part.
SSE6 BeforeSearch events. These videos show how you can use the BeforeSearch events.
SSE7 OnSummarySectionRender Event These videos show how you can use the 'OnSummarySectionRender' event to completely customized the summary section of the Grid and inject your own calculated fields into this section.
SSE8 RowExpander Events These videos show how you can create a custom row expander to display any content you want when a row is expanded. We also demonstrate how you can control which rows display the 'expand row' icon.
SSE9 OnGridInitialize and OnGridExecute Events This video explains how you can use the OnGridInitialize and onGridExecute events.
SSE10 Customize SQL Error Messages In a Grid component against a SQL database, when you do an Insert, Update, or Delete, the SQL Database might send back an error. Typically the error message is not very friendly. The new onSQLExecuteError event allows you to intercept the error and show a friendlier error to the user.


(Required V10.5)
SSE11 Customizing the Write Conflict Error Message The Grid component uses 'Optimistic record locking' to prevent one user from overwriting another user's edits when two users edit the same record at the same time. The OnWriteConflict event handler allows you to customize the Write Conflict error message.
SSE12 Customizing SQL Insert, Update and Delete  Statements - Using Stored Procedures to Update your Database In a Grid component that is based on a SQL database, the Insert, Update and Delete SQL statements that are executed when a user inserts, updates or deletes a record are automatically computed by Alpha Five.

In some cases, a user might want more control over how these SQL statements are executed, or might want to use stored procedures to insert, update or delete records.

The onBeforerSQLCommandExecute and onAfterSQLCommandExecute server side events allow you fully customize the SQL statements that the Grid executes in order to insert, update or delete records.

In addition, another common use for these events is to update some other table at the same time as the update is being performed in the tables the Grid is based on. For example, you might want to add a record to a log table.
 

When you perform updates against some other table as part of our update, insert or delete, you might want to wrap the entire operation into a single transaction. This is easily done by starting a transaction in the onBeforeSQLCommandExecute event and then either committing or rolling back the transaction in the onAfterSQLCommandExecute event.

These videos discuss these new events.


(Required Version 10.5)