| 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 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
Watch Video (Container and
Frames) |
| 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. Watch View (Popup Windows) Watch Video (DIV) |
| 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: Watch Vide (Specifying Cascading Dropdown Boxes)
|
| 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 the 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 Dialog Component | If you have used the Dialog 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) |
| 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 (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 show
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.
|
Feature Packs are separately sold add-ons that enhance the functionality of Alpha Five.
To see a list of the available feature packs, click here.
This series of videos gives a short tutorial on the various server-side events in the Grid.
Click here to download the components used in these Videos. You can install these components into a web project in the
sample Alphasports database. You will need to make a named connection called 'asports' that point to Alphasports.mdb.
A copy of Alphasports.mdb can be found in the MDBFiles folder in your A5V10 Program folder. You will need to copy this file to a
location outside the Program Files folder if your machine has UAC turned on.
| SSE1 | Validating Data | These videos explain the various was in which data can be validated
before it is written to a database.
|
| 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.
(Requires build 2862-3542 or above) |
| 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) |