Web Applications Videos

 

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.

 

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video

 

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'.

 

Watch Video

 

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.

 

Watch Video

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

 

Watch Video

7 Error Reporting Styles The grid offers several styles for reporting errors. This video demonstrates the various error reporting styles.

 

Watch Video

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

 

Watcvh Video

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

 

Watch Video

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

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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)
Watch Viewo (Tabs and Accordions)
 

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.

 

Watch Video

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)


This video shows how you can control the layout of the Search Part:
Watch Video (Customizing Search Part Layout)

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

23 Supercontrols This video shows how you can define a window to show Google Maps for the address in the current record.

 

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video - Part 1

Watch Video - Part 2

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).

 

Watch Video - Part 1

Watch Video - Part 2

 

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.

 

Watch Video - Part 1

Watch Video - Part 2

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").

 

Watch Video

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.

Watch Video

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.

Watch Video

 

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.

Watch Video

 

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.

Watch Video

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.

 

Watch Video

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.

Watch Video

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.

 

Watch Video  

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.

 

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video

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.

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

 

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.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

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.

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video - Part 1

Watch Video - Part 2

 

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.

 

Watch Video

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'.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

 

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.

 

Watch Video

47 Displaying Chinese Data Improved support for UTF-8 data makes it possible to display Chinese data in a Grid.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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).

 

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

 

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.

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video

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.

 

Watch Video

 

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.

 

Watch Video

 

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.

 

Watch Video

 

(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.

 

Watch Video - Part 1

Watch Video - Part 2

 

(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.

 

Watch Video

 

(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.

 

Watch Video

 

(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.

 

Watch Video

 

(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.

 

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

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.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

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)

Watch Video

 

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.

 

Watch Video

 

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.

 

Watch Video - Part 1

Watch Video - Part 2

 

(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.

 

Watch Video

(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.

 

Watch Video - Part 1

Watch Video - Part 2

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.

Watch Video - Part 1

Watch Video - Part 2

(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.

Watch Video

(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.

 

Watch Video - Part 1

Watch Video - Part 2

 

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.

Watch Video

Watch Video- Printing Reports

 

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.

 

Watch Video

 

(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.

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

Watch Video - Part 5

Watch Video - Part 6

 

(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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

 

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.

Watch Video

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.

Watch Video

 

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.

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

Watch Video - Part 5

Watch Video - Part 6

Watch Video - Part 7

 

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.

Download Grid Component

 

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.

 

Watch Video

 

(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.

 

Watch Video -  Part 1

Watch Video -  Part 2

 

(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)

 

Watch Video -  Part 1

Watch Video -  Part 2

Watch Video -  Part 3

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.

 

Watch Video

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.

Watch Video

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.

 

Watch Video -  Part 1

Watch Video -  Part 2

 

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.

 

Watch Video -  Part 1

Watch Video -  Part 2

Watch Video -  Part 3

(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'


Watch Video -  Part 1

Watch Video -  Part 2
 

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.

 

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video

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:

 

Watch Video - 1

Watch Video - 2

97 Action Buttons - Programmatically Clicking a Button using Javascript This video shows how you can use Javascript to 'click' an Action Button.

 

Watch Video

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 image.


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.

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video

 

 

 

Feature Packs

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.

Understanding the Server-side Events in the Grid Component

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.

 

Watch Video - Part1

Watch Video - Part2

Watch Video - Part3

Watch Video - Part4

Watch Video - Part5

SSE2 After Validate Events These videos explain the various events that fire after data is successfully saved in the database.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

SSE3 Redirect Event These videos explain how the redirect event can be used to dynamically compute a redirect target after data is committed.

 

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

SSE6 BeforeSearch events. These videos show how you can use the BeforeSearch events.

 

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

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.

 

Watch Video - Part 1

Watch Video - Part 2

SSE9 OnGridInitialize and OnGridExecute Events This video explains how you can use the OnGridInitialize and onGridExecute events.

 

Watch Video - Part 1

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.

 

Watch Video

 

(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.

 

Watch Video

(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.

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

Watch Video - Part 5

Watch Video - Part 6

 

(Required Version 10.5)