Alpha Five Videos
Quick Links to Categories
Miscellaneous Grid, Tabbed UI and PageLayout Component Features
Mapping and Geography Features - Using Maps in the Alternate View and the Search Part
Dialog Component - Managing Data in the Security Framework
Optional V10 Feature Packs - Now Included as Part of V11
V11 Feature Packs - Calendar Control in a Dialog Component
V11 Feature Packs - Slider Control in a Dialog Component
V11 Feature Packs - Dialog Component - Power Search for Grid using a Dialog Component
V11 Feature Packs - Dialog Component - Record Navigation and Dialog Search
V11 Feature Packs - Dialog Component - Live Linked Embedded Grids
V11 Feature Packs - Dialog Component - Advanced Tab Control
V11 Feature Packs - Dialog Component - Power Search for Embedded Report
V11 Feature Packs - Grid Component - Proximity Search Control
V11 Feature Packs - Dialog Component - Map Control
Miscellaneous Grid, Tabbed UI and PageLayout Component Features | |||||||||
Number | Category | Description | |||||||
M1 | Client-side Show/Hide Expressions can use Animation | The Grid and Dialog component both allow you to define client-side
show/hide expressions to dynamically hide and show controls on a
component. Now, you can associate an animation effect with each
show/hide expression you define. This video shows how you can do this.
|
|||||||
M2 | Group Headings in Grid | When a Grid is rendered it can be useful to break the Grid up into
logical sections by inserting Group Breaks into the Grid. These videos
show how this can be done for both tabular and snaking columnar Grids.
|
|||||||
M3 | Summary Values in Group Headers and Footers | You can include summary values in Group Headers and Footers.
(Contrary to what the video says, this feature is supported on both SQL and .dbf tables). |
|||||||
M4 | Collapsing and showing rows in each Group | When you turn on Grouping in a Grid, it can be useful to collapse
and show the rows in each Group. This video shows how this is easily
done.
|
|||||||
M5 | Scrollable Grids and Fixed Column Widths | If a Grid is set to display a large number of records, it can take
up a large amount of vertical space on your page. You might prefer to
specify a fixed amount of vertical space and then have the Grid scroll
within the specified window size, keeping column titles and summary
values fixed in place when the Grid is scrolled.
This video shows how this is easily done: |
|||||||
M6 | Setting Multiple Properties at Once Using Xbasic | This video shows how you can use an Xbasic function when you are
setting properties in multiple controls at once. For example, assume
that you have built a component with many controls and you would like to
wrap all of the control labels in language tags (<a5:r> and </a5:r>), so
that you can internationalize your component.
Note: This feature applies to both the Grid and the Dialog component. The video shows the feature in the Dialog component, but the feature operates in exactly the same way in the Grid. |
|||||||
M7 | Project Styles - Set the style of every component in one place to make it easy to change the style of every component at once. | This video shows how instead of hard coding the style used by each
component in your project at Design Time, you can now set the style to <ProjectStyle>.
The actual style to use is set in the Web's Project Properties dialog.
|
|||||||
M8 | Default Value for New Records when doing data entry in the Grid Part. | The Grid allows you to enter new records directly in the Grid part,
or in the Detail View part. The Grid builder allows you to specify
default values for fields in new records. This can be done by either
specifying the field's 'Initial Value' property, or by specifying code
in the 'onInitialValueCalculate' event.
In the case where data entry is done in the Grid Part (as opposed to the Detail View), the issue with the 'onInitialValueCalculate' event (which is a server-side event), is that it is only called once, when the Grid is initially rendered. So, if you enter a new record and then save that record, the event is not called before the next new record is displayed. This video shows how you can save the value of a field that was just entered inside the Grid's 'stateInfo' object, and then use the 'afterRowPopulate' event to retrieve that value and use it as a default in the next new record. Note: The .setValue() method is not used to set the value of the field in the new record row because this would cause the new record row to go 'dirty'. Instead we get a pointer to the element and then simply set its value property. |
|||||||
M9 | Tabbed UI - Tree Control | The Tabbed UI displays a series of buttons on the left hand button
panel. These buttons open the various pages in your application and
shown them in tabs in the Tabbed UI. Now, you can organize these buttons
in a tree control layout.
|
|||||||
M10 | Auto-suggest Control - New 'Contains' option | The auto-suggest feature in the Grid and Dialog component displays a
list of matches as the user types into a field. Previously, the control
displayed matches that start with the characters that the user typed.
Now, you can configure the control to display matches that contain the
characters that the user has typed.
|
|||||||
M11 | Global Update Operation to Update a Field in Multiple Rows in a Grid | When doing data entry into a Grid there may be times when the user
wants to copy a value from one row to multiple rows in the Grid. Using
Action Javascript is is easy to make a button that does a 'global
update' operation on all visible rows in the Grid.
It is important to recognize that the action shown in this video is a 'client-side' action. No data is actually written to the database until the user clicks the 'Submit' button. |
|||||||
M12 | Global Search and Replace Operation in a Grid | When doing data entry into a Grid there may be times when the user
wants to perform a search and replace operation on the data the
currently visible rows in the Grid. Using Action Javascript, it is easy
to make a button does a 'global search and replace' on all visible rows
in the Grid.
It is important to recognize that the action shown in this video is a 'client-side' action. No data is actually written to the database until the user clicks the 'Submit' button. |
|||||||
M13 | Date picker, Date/Time picker and Time Picker | The Date picker in V11 has been substantially improved over the V10
date picker. It can be be configured as a date picker, date/time picker
or time picker. It has a full Javascript event model. Many of the
properties (such as the low and high date can be set dynamically using
Javascript functions).
These videos give a tour of the new features. |
|||||||
M14 | Auto-suggest and Edit-combo Controls allow you to select multiple values | Both the auto-suggest and edit-combo controls allow you to enter
multiple values in the field you are editing. For example, say you have
a field called 'Send to' and you want to support a comma delimited list,
such as 'Smith,Jones,King,Cohen' and you want the user to be able to
select each entry in the list from the pick list.
This video shows how either the edit-combo, or auto-suggest control can be used for this. |
|||||||
M15 | Using Action Javascript to toggle the show/hide state of any arbitrary DIV or 'container' using animation | Animation is built into many of the objects in V11, but there may be
times when you want to animate some arbitrary DIV or container. This is
now very easy using Action Javascript. You can define complex animations
without having to write any code.
|
|||||||
M16 | Changing the number of New Record rows shown in a Grid at run-time | In an updateable Grid, the number of new record rows shown is a
property that is set at Design time. In some applications you might want to expose a property to the user to set this value at Run time. These videos show how you can do this.
|
|||||||
M17 | Action Javascript - Open A Grid Component - How to Invoke a Server-side action when a Grid is Opened | When you have a client-side event handler (such as a button's
onClick event), that opens a Grid (in a pop-up Ajax window, a div, a
tabbed UI pane, etc), you might want to execute some Xbasic on the
server before the Grid is executed on the server. This topic discusses
how you can do this.
|
|||||||
M18 | Grid and Dialog Component - Client-side Mask - Dynamically Setting the Mask at Run-time | You can now specify a Javascript function to dynamically compute the
mask for a control. The Javascript function gets called every time the
control gets focus. When the Javascript function gets called, it can
read data in the current Grid row, (or Dialog) and compute the mask to
use based on this data. For example, say you have a mask for a telephone
number field. In the US, UK and Europe, different formats are used for
telephone numbers. The Javascript function can decide what format string
to return based on the current value of the 'COUNTRY' field.
|
|||||||
M19 | Using jQuery Controls in a Dialog or Grid Component | V11 tightly integrates the jQuery Javascript Library. This video
shows how you can use a jQuery UI control in a component. In the video
we show a jQuery date picker, but the principle applies to other jQuery
controls as well.
|
|||||||
M20 | Grid Component - Setting Default Initial Properties - International Developers | The Options, Set Default Properties command in the Grid Builder has
always allowed you to set default properties for the Grid when you
create a new Grid. However, if you created a new Grid from a Template,
the default properties that you set were not honored. They were only
honored if you created a blank new grid. Now, the default properties are
used even if you use a template. This makes it much easier to customize
the Grid builder for developers whose native language is not English.
|
|||||||
M21 | Grid Component - Search Part - Save and Load Search Criteria | You can now use the new Repository feature in V11 to save search
criteria to the repository and load searches from the repository.
|
|||||||
M22 | Repository Table - Managing Records in the Repository | This video is aimed at advanced used who use the Repository feature
in V11.
The video shows how you can create a Grid to manage the records in the Repository that 'belong' to the current component.
For example, when you save search criteria from the Search Part of a Grid to the Repository, the search is saved with the GUID of the current component. This is important because when you load a saved search, you only want the user to see the saved searches that 'belong' to the current component. If you want to manage the records in the Repository, (by creating a Grid that is based on the Repository table), you might want to filter the records in the Repository based on the Guid of a particular component.
Say you have a Grid called 'Customers' and you want to put a button on this Grid to show the Repository entries that belong to this Grid. You can do this by setting the filter on the target Grid to
componentGuid = ComponentGuid()
|
|||||||
M23 | Grid Component - Summary Fields - Styling Summary Values | You can now define inline styles for summary values. You can also
use the new BeforeSummarySectionRender event to make the inline style
conditional based on the value of the summary field.
|
|||||||
M24 | Detail View - Animation | Regardless of where the Detail View is shown, it can be animated.
This includes the 'OnPage' and 'InGrid' options.
|
|||||||
M25 | Tabbed UI - Animating the Menu Panel | You can now animate the showing and hiding of the menu panel on the
Tabbed UI Component. To enable animation, check the 'Animation' property
in the 'Tabbed UI Properties' pane.
|
|||||||
M26 | Ajax Windows - Animation | Animation effects have been added for
pop-up Ajax windows. Important Note: Ajax windows that contain IFrames, which in turn contain display PDF files cannot be animated. As a result, the Animation property has not been made available for Ajax windows that host .a5w pages (since .a5w pages are hosted in an IFrame).
There are several animation methods that have been exposed. The 'slide' and 'fade' methods are based on methods in the jQuery core library. All of the other methods are based on method in the jQueryUI library. By default, both of these libraries are loaded. The Web Project Properties dialog contains settings which control if these libraries are loaded, and from where they should be loaded.
You can control the animation effect for the window display and the window close. You can also control the animation speed. Certain animation styles will mess up the positioning of windows. If you find this to be the case, you should stick with the 'Fade' style for the 'show' animation. |
|||||||
M27 | Grid Component - Tab and Accordion Controls - Animation |
You
can now animate the tab and accordion controls in the Grid component.
You can control the animation method to hide and show panes. The animation methods are 'slide' and 'fade'. You can use one method to show the pane, and another method to hide the pane. For example, you might choose to 'slide' the pane into view, but 'fade' it out of view.
|
|||||||
M28 | Tabbed UI/Page Layout Components - Animation | You can now animate
the tab and accordion controls in the Button Pane of the Tabbed UI and
Page Layout components.
You can control the animation method to hide and show panes. The animation methods are 'slide' and 'fade'. You can use one method to show the pane, and another method to hide the pane. For example, you might choose to 'slide' the pane into view, but 'fade' it out of view. |
|||||||
M29 | Grid Component - Row Expander - Animation | You can now set animation options for when a row expander in the
Grid is opened or closed. To turn animation on, check the 'Animate'
property in the Row Expander section of the Grid Builder.
|
|||||||
M30 | Automatic Backup of All Component Files | Whenever you edit a component, it is automatically backed up.
By default, the backups are stored in the _backup.backup folder in your Web Project folder. You can specify where backups are stored by going to the Web Project Properties dialog.
For example, you might want to store your backups on a different machine, or in a folder that is linked to your 'DropBox' account. If you store your backups in a DropBox folder, for example, then all of your backups will be automatically backed up into the 'cloud'. |
|||||||
M31 | Action Javascript - Open .a5w Page - New Options for the Target Window | This action now has additional options for the target. Previously,
the target could be a pop-up Ajax window, a DIV or a Tabbed UI Page. Now
you can also specify 'Browser window' to open the target page in a
new browser window.
When you select the 'Browser window' option, you can specify several different options to control different aspects of the browser window. |
|||||||
M32 | Grid Component - Making a Grid Behave Like a Data Driven Accordion Component |
Using the new 'Row expand method' property, you can make a Grid
component behave like a data driven Accordion Control.
|
|||||||
M33 | Grid Component - Search Highlighting | The search highlighting feature highlights the strings in the Grid
that match your search criteria. This makes it easy to see why a
particular record in a Grid was selected when you executed a search.
|
|||||||
M34 | Action Javascript - Opening PDF Files - New Options | PDF Documents - Tabbed UI, Page Layout, Grid and Dialog Components - All of these component allow you to create Javascript actions that open static PDF files, or dynamically generated PDF files (from Alpha Five reports). Now you can control several aspects of how the PDF in initially rendered. For example, you can set the zoom level to 50% and navigate to page 2 of the document. | |||||||
M35 | Abstract CSS Class Names | V11 Introduces the concept of 'Abstract CSS Class Names'. When you design a Component, all of the HTML is now marked up using abstract CSS class names (e.g. [class.gridPartSelect]). A class map defines how the abstract CSS class name maps to the physical class names in your CSS stylesheets.
This is a very powerful concept because it gives you very granular control over the styling of different elements in your components. These videos explain the concept in more detail. |
|||||||
M36 | Action Javascript - Binding an Argument Value to Result of a Javascript Function | (This video is aimed at advanced developers). When you use Action
Javascript to open a Grid, Report, Dialog, Custom Component, etc. you
often need to bind the value of an argument to a value from the parent
Component. For example, you might bind the value of 'arg1' to the value
of the Lastname field in the current Grid row.
Now, instead of binding an argument to the value of a field in the Grid, you can specify an arbitrary Javascript function to execute. The argument is bound to the value that this Javascript function returns.
(Requires build 3816 or above) |
|||||||
M37 | Advanced Client-Side Show/Hide Expressions - Calling a User Defined Javascript Function when a Show/Hide Event Fires | (This video is aimed at advanced developers). When a client-side
show/hide event fires, you can now define your own Javascript function
that will get called.
This video shows an interesting use of this functionality. In the video, we show a Grid with a Detail View. In the Detail View, a large number of fields are hidden by show/hide client-side events. The space taken up by the hidden controls is not completely eliminated because the controls are contained in rows (<tr> tags) that are not hidden. We use the Javascript function to hide the empty <tr> tags.
(Requires build 3816 or above) |
|||||||
M38 | Tabbed UI on Mobile Device | A very common pattern when building Web Applications in Alpha Five
is to use the Tabbed UI component as the 'home page' for the app. All of
the pages and components in the app are accessed from the Tabbed UI.
However, when running on a mobile device (tablet or phone), the Tabbed
UI consumes too much real estate.
This video shows how you can set a property in the Tabbed UI to change the way in which the Tabbed UI component renders so that it is more appropriate for a mobile device.
(Requires build 3822 or above) |
|||||||
M39 | Edit-Combo - AfterSelect Event - AjaxCallback | This video discusses firing an AjaxCallback in the AfterSelect event
in an edit-combo control. This video applies to both a Grid and Dialog component. (This is the same as video D31) |
|||||||
M40 | Getting the User's Current Location and Tracking Location Changes using Action Javascript | Shows how you can use Action Javascript to get the location of the
user and store that information in the Grid or Dialog object. Also shows
how you can fire events when the users location changes. This is
particular useful in the case of a mobile device.
|
|||||||
M41 | Setting Session Variables when a Child Component is Opened using Action Javascript | When you define an button using Action Javascript to open a child
Grid, Dialog or Custom Component, you can also set session variables at
the same time that the Ajax callback is made to open the child
component. The session variables can be set to constant values, or to
values returned by Javascript functions that you define. For example,
you might read the value in a field in the parent Grid and then use that
value to set a session variable.
(Requires build 3851 or above) |
|||||||
M42 | Displaying the Value of an Argument that Was Passed into a Grid | In many cases, a Grid is filtered based on the value of one or more
Arguments whose value is set at run-time. This video shows how you can
display the value in these arguments a free-form edit-region on the
Grid. For example, the Grid might be filtered on an argument called 'WhatState'
and you want to show this text in a free-form edit region:
Showing records in: (value of :whatstate argument) (Required build 3852 or above)
|
|||||||
M43 | Understanding Global Javascript Variables and the 'Window' Namespace | Storing data in global Javascript variables is often the easiest way to pass information
from one component to another. Global Javascript variables are stored in Javascript's 'window'
namespace. These videos give a quick introduction to global Javascript variables, and the Javascript 'window' namespace.
|
|||||||
M44 | Filtering a Grid Based on the Current Logged in User | Data in a Grid can be filtered based on the current logged in user. This video shows how to set a filter in a Grid so that only data for the current logged in user is shown.
The Grid filter uses an argument whose value is set to a session variable.
This session variable is populated when the page that contains the Login Component runs
when the user logs in initially.
|
|||||||
M45 | Communicating Between Components - Sending Commands from one Component to Another asdf | Often, when your application is displaying multiple components on the screen at the same time you will want to send a command from one component
to another component. For example, when a child Grid is opened in a Row Expander, you might want to set the default value of a field in the
child Grid to a value from the parent Grid, or vice versa. These videos build on concepts discussed in video M43 Watch Video - Part 1 Watch Video - Part 2 Watch Video - Part 3 Watch Video - Part 4 Watch Video - Part 5 |
|||||||
M46 | Using Xbasic to Generate HTML by Merging Data into Templates - Understanding the a5_mergeDataIntoTemplate() Function. asdf | This video is aimed at advanced developers who are generating HTML in hand coded Xbasic scripts. The video demonstrates how
the a5_mergeDataIntoTemplate() function can be used to easily create HTML content by merging data from a query into an HTML template.
Watch Video - Part 1 Watch Video - Part 2 |
|||||||
M47 | Dynamically Change the Choices for a Checkbox, Radio Button, or Dropdownbox Control in a Grid. |
When you place a checkbox, radiobutton or dropdown box in an editable Grid, the choices shown in the control are the same for each row in the Grid. This video shows how you can make the choices for each row in the Grid dependent on some other field in the the current Grid row. NOTE: You might also find video number D41 relevent. Watch Video - Part 1 Watch Video - Part 2 Watch Video - Part 3 Watch Video - Part 4 Watch Video - Part 5 |
|||||||
M48 | Using the Checkbox Column in a Grid to Select Rows and then Opening another Grid Showing the Selected Rows. | In this video we show how you can select multiple rows in a Grid and then click a button to perform an Ajax callback and open another Grid
showing just the records that were checked in the first Grid.
See video 87 and 88 for additional information. Watch Video - Part 1 Watch Video - Part 2 Watch Video - Part 3 Download Components Used in Video |
|||||||
M49 | Displaying the Search Part in a Pop-up Window. | This video shows how the Search Part of the Grid can be shown in a pop-up window, rather than on the page, as it is by default.
Watch Video In this next video we show how this technique is refined by automatically closing the pop-up window when the user submits the search. Watch Video |
|||||||
M50 | Action Javascript - Message Box Action - Advanced Options |
This video shows how you can use the advanced options feature in the Message Box Action in Action Javascript to create message boxes that are much richer than the built-in Javascript alert() and confirm() functions allows.
This feature is a Subscriber Benefit. Watch Video |
|||||||
M51 | Displaying a Fade Out Message on a Grid when a Record is Saved | A common pattern in web applications is to display a transient message (a 'fade out' message) to confirm that an action has taken place. This video shows how you can easily
create fade out messages in your applications, and in particular how easy it is to add a 'fade out' confirmation message when a record is saved.
This feature is a Subscriber Benefit. Watch Video Note: For an example of a fade out message on a Dialog, see video number D49. |
|||||||
M52 | Opening a Dialog Component in a Grid Row Expander to Edit a the Current Grid Row | See video D58. | |||||||
M53 | Opening a Grid Component from a Button and Passing Arbitrary Data to the Child Grid Component | This video shows how you can define an Action Javascript event handler to open a child Grid component and pass arbitrary information to the child Grid.
In the video we show how the child Grid then consumes the data that is passed in to it when it makes an Ajax callback. Watch Video |
|||||||
M54 | Using a Grid Component in a Desktop Application - Automatically Closing the Host Xdialog Window when Data in the Grid is Saved | It is easy to use Grid and Dialog components in Desktop applications. For example, you might have a button on a form (with code generated by Action
Scripting genie) that opens a Grid or Dialog in a window. In this video we show how the pop-up window, in which the Grid is hosted can be automatically
closed when the user makes an edit to data in the Grid and then submits the Grid. The techniques shown in the video apply equally to a Dialog component. Watch Video - 1 Watch Video - 2 |
|||||||
M55 | Using a Grid Component in a Desktop Application - Calling Xbasic from Events on the Grid. | In this video we show how easy it is for Desktop application developers who use Grids and Dialogs in their applications to call Xbasic when a button on the
component is clicked.
The techniques shown in the video apply equally to a Dialog component. Watch Video |
|||||||
M56 | Setting the Text in a Label or Button Automatically when a Client-side Expression is True - Conditional Text and Events | See video D63 |
|||||||
M57 | Debugging Server-side Xbasic in Web Applications - Live Preview | Prior to build 2921 you could not use the Xbasic debugger to debug server-side Xbasic in a running Web Application. While you have always been able to use
'Working Preview' to debug server-side Xbasic, this approach has limitations (for example, session variables and the Security Framework are not enabled in 'Working Preview').
Now, as long as you are running in Live Preview mode, you can debug any server-side Xbasic by simply inserting 'debug(1)' into your Xbasic. This includes Xbasic inside .a5w pages and Xbasic in your server-side event handlers in Components. Watch Video |
|||||||
M58 | Storing State Information in the Grid or Dialog Object | This video is for advanced developers. It shows how 'state' information can be stored in the 'state' object in the Grid or Dialog object.
The data in the 'state' object can be read in both client side and server side events. It can also be set in either client side or server side events.
In many cases, storing state information in the Grid or Dialog object's 'state' object is preferable to using session variables. Watch Video - Part 1 Watch Video - Part 2 |
|||||||
M59 | Marking Records as 'Deleted' without Physically Deleting Them | In some applications you might want to allow users to mark a record as 'deleted' without physically deleting the record
from the table that the Grid is based on. This is easily accomplished by adding a logical 'isDeleted' flag to the table
and adding a button to the Grid that sets the value in this field. You might also want to allow the user to easily filter out the
records that are marked as 'deleted'.
This video shows how this is done. Watch Video |
|||||||
M60 | Three-state Logical Checkboxes | In some applications you might have a logical field in a Grid that is displayed using a checkbox. If the Grid is
based on a SQL table that allows for NULL values, there are really 3 different states that the field value can have: true, false and NULL. HTML checkbox controls only
have two states - checked, or unchecked, so by default the checkbox will appear unchecked for both the false and NULL state.
Using Javascript, it is possible to set a checkbox state to 'indeterminate'. In this video we show how you can set a checkbox control in a Grid to the 'indeterminate' state if the data in the field is NULL. Watch Video |
|||||||
Mapping and Geography Features - Using Maps in the Alternate View and the Search Part Back to top (These videos all use the sample Microsoft SQL Server SQL Airports Database. You can download this database). | |||||||||
Number | Category | Description | |||||||
GM1 | Google Maps/Alternate Views-Introduction | Grids have a property called 'Alternate Views'. An Alternate View is simply another way of displaying the data in the Grid. You can define custom Alternate View (using Xbasic), or you can use one of the built-in Alternate Views. The most commonly used built-in Alternate View is a Google Map. This is used to plot the data displayed in the Grid as markers on a Google Map. The following videos show how you can use the Google Map Alternate View in a Grid.
This video show: 1) Defining an Alternate View with a Google Map and showing a marker
on the map for each record in the Grid. 2) Defining the bubble help for each marker on the Grid so that it shows data from the corresponding record in the Grid.
|
|||||||
GM2 | Google Maps/Alternate View-Customizing the Marker Title and Info Box | This video continues from video GM1. The video shows how you can
customize the 'info box' for each marker on the map. The 'info box' is a
small window that pops up when the user clicks on a marker.
The video shows how you can put any HTML that you want in the info box and how the html can include placeholders to include data from the corresponding row in the Grid. The HTML can also include Javascript commands. In the video we show how you can insert the Javascript to open the corresponding Detail View part for the current record. |
|||||||
GM3 | Google Maps/Alternate View-Dynamic Marker Icons-Alternate View Layout Options | This video continues from GM2. The video shows how the icon for each
marker that is placed on the map can be dynamically specified. So, for
example, if record 1 in the Grid was for a customer with a low credit
rating, the corresponding icon on the map might be red. If record 2 was
for a customer with a high credit rating, the corresponding icon on the
map might be green.
In the video we have a Grid based on our sample Airports table and we show how a different map icon is used depending on the elevation of each airport shown in the Grid.
The video also discusses the different ways in which the Alternate Views can be shown on the Grid. Alternate Views can be shown in Tabs, or they can be shown on the main page, alongside the main Grid.
|
|||||||
GM4 | Google Maps/Alternate View-More Alternate View Layout Options | This video continues from GM3. The video shows more options for how
the Alternate Views and the main Grid can be displayed on the page. It
shows how you can display the Alternate Views in accordions, tabs or on
the main page.
The video shows how you can even suppress the display of the main Grid part and only show the Alternate view.
In the video, we show the map, with a marker for each row in the Grid. The Grid itself is hidden. However, when the user clicks on a marker, the Detail View for the current row in the (hidden) Grid is shown.
|
|||||||
GM5 | Google Maps/Alternate Views-Dynamic Marker Circles | When you place a marker on a map you have control over the marker
icon, bubble help and info box text. You can also draw a circle around
the marker and you can control the color of the circle and the shading
of the interior of the circle. The circle and its color can be used to
convey information about the corresponding record in the Grid.
The ability to draw a circle around the marker could be used to indicate the service area of a branch location. Or it might be used to represent the relative price of a house in a real estate application. For example,for more expensive houses you might draw a larger circle around the marker on the map.
In this video, which shows a Grid based on the sample Airports database, we draw a circle around each marker on the map. The radius of the circle is proportional to the airport's elevation.
|
|||||||
GM6 | Google Maps/Alternate Views-Dynamic Images and Image Sequences | When you place a marker on a Google Map, you have full control over
the icon that is used. You can specify an expression that evaluates to
the icon name to use for the marker. Or, you can specify an Xbasic
function that will get called for each row in the Grid. The function can
compute the marker icon based on the data in the current Grid row.
You can also use built in image sequences. An image sequence is a set of numbered icons.
In this video we show how you can use an image sequence in the map and also use the same sequence in the Grid itself. This makes it very easy for the user to see a record in the Grid and immediately locate the corresponding marker on the map. |
|||||||
GM7 | Google Maps - Layers | When you place a marker on a Google Map you can assign the marker a
logical 'layer' name. For example the layer name for a marker could be
'High Risk', or 'Medium Risk', etc. Then using the automation features
on the map that Alpha exposes, you can hide and show different layers on
the map. For example, you might put a checkbox control on your Grid with
these entries: High risk, Medium risk and Low risk. Then when the user
checked or unchecked an entry, your Javascript automation code could
hide or show the markers in the corresponding map layer.
In this video we show how we have defined a map with 3 logical layers - 'layer1', 'layer2' and 'layer3'. When each marker is placed on the map is is assigned to one of these layers. In the example, the rule for assigning a marker to a particular layer is contrived - if the marker is for a record in the first 3 rows of the Grid, it is in 'level1', and so on. Obviously, in a real application you would have more realistic rules for assigning markers to different map layers. Then, we put a checkbox control in a free-form region of the grid to control which layers as shown. We also show how the markers in a particular layer can be animated to draw attention to them. |
|||||||
GM8 | Google Maps - Animating Markers | When markers are placed on a Google Map, you can specify that the
markers should be animated as they are placed on the map. Two animation
modes are supported: Drop and Bounce. The video shows how to use the
animation effects.
You can also use the Action Javascript to animate a marker after it has been placed on a map to draw attention to it. For example, you could click on a Grid row and cause the corresponding marker on the map to bounce.
|
|||||||
GM9 | Google Maps/Alternate Views-Treating the Map as a Blank
Canvas so that the Markers on the Map can be Added Programmatically
|
In the previous videos, the markers on the map have been added
automatically. For each record in the Grid, a corresponding marker has
been placed on the Map. However, you can specify that there should be no
markers on the map initially. You would do this if you want to add the
marker to the map with your own code.
This video shows how you can turn off the automatic placement of markers on the map and then use Action Javascript to add markers to the map programmatically.
The video shows a Grid with a list of states. Each row in the Grid has a button to populate the map with the 10 airports in the state with the highest elevation. When you click a button in the Grid row, an Ajax callback is made to place the markers on the map.
|
|||||||
GM10 | Search Part - Geography Searches - Google Maps | Certain SQL databases (such as SQL Server, Oracle, DB2, MySQL,
Postgres) support a special data type called 'Location'. If a table has
a location field (which contains information about a record's position -
latitude and longitude), then you can perform 'geography' searches. For
example, you can find all records that are within x miles of a certain
location, or all records that fall within an area marked by the latitude
and longitude of 3 or more points.
You can put a Google Map in the Search part of the Grid to make specifying geography searches easy.
This video shows how you can put a Google Map into the Search Part and how Alpha Five automatically generates the Portable SQL to query the database. The video demonstrates both 'location' and 'radius' searches.
|
|||||||
GM11 | Search Part - Geography Searches - Google Maps - Show Search Results on Screen | This video continues from GM10. When you have a Google Map in the
Search Part of a Grid you can use the Map to mark a search polygon or
radius, as shown in the previous video. However, you can also display
markers on the map to show the location of the records found by the
search.
In this video we show how the search results can be plotted on the map. A marker is placed on the map for each record found by the search.
The video shows how you can customize the bubble help, title and info box for each marker that is placed on the map. The video also shows how the click action for each marker can be customized - you can use a built-in action, such as 'open Detail View', or you can define your own Javascript. |
|||||||
GM12 | Search Part - Radius Search - Sorting result by distance from the map center point. | When you do a radius search (i.e. find all records with a certain
distance of a map center point), it can be useful to order the records
by distance from the map center point. This video shows how this is
easily done.
For more information on how the Grid in the video was configured, click here |
|||||||
GM13 | How to use a Grid to implement a typical 'Store Finder' application. | A typical pattern often seen in web applications is a 'store finder'
The user enters his location and clicks a button and a list of store
branches that are closest to his location is retrieved. In this
video we show how this type of application is easily built using a Grid
component with a Search Part.
(Note: To get a complete summary of how the Grid was configured for this example, scroll to the bottom of this page).
Contrast this video with video FP11_PROXSRCH which shows how the same problem can be solved in a different way using a Proximity Search control in the Search Part. Watch Video - Part 1 |
|||||||
GM14 | Shows how to Update the Latitude and Longitude in the current Grid row when a Marker in the Map is dragged to a new Location. | In this video we show how the latitude and longitude value in the
current Grid row can be updated when the user drags the marker to a new
position on the map.
|
|||||||
GM15 | Updating a Geography data type field automatically when a Longitude or Latitude Field is Changed | In order to perform a Geography search on a table, the table must
have a special 'Geography' field (supported in certain SQL databases,
such as SQL Server, MySQL, Oracle, Postgress, DB2, etc.). The Geography
field is a special type of field that contains binary data, so you can't
update its value as easily in your SQL INSERT or UPDATE statement as you
can for regular fields. However, it is highly desirable to automatically
update the value in the Geography fields in a record whenever a
longitude or latitude value is changed.
This video shows how this is easily accomplished in a Grid component. Alpha Five automatically generates the appropriate Portable SQL statement to update the Geography field whenever there are changes to the longitude or latitude field on which the Geography field is based.
|
|||||||
GM16 | Shows how a New Marker Can be Added to a Map When Entering New Records to a Grid | When you add a new record to a Grid, instead of asking the user to
manually enter a value into the latitude and longitude fields in the new
record, it might be desirable to allow the user to right click on the
map at a specific location and then automatically set the value of the
longitude and latitude field in the row with the position of the marker
that was added to the map.
Also, once the marker has been added, the user can drag the marker to a new location and the latitude and longitude fields in the new record will be updated.
(Requires build 3838 or above) |
|||||||
GM17 | Scaling a Map in an Alternate View after the User Executes a Query | After the user does a query in a Grid that has a Google Map in an
Alternate View, the map might be zoomed in to tightly to be useful. This
video shows how you can easily control the map scaling in the
afterSearchSubmit event handler in the Grid.
|
|||||||
Dialog Component Back to top | |||||||||
Number | Category | Description | |||||||
D1 | Dialog Component - Overview | Overview of the Dialog Component - This video gives an overview of
the Dialog component and contrasts it with the Grid Component
|
|||||||
D2 | Dialog Component - Creating | Creating a new Dialog - This video shows how to create a new Dialog component. You can create controls one by one, or use one of several shortcut methods. You can also insert controls from a 'Control Library', and you can add your own controls to the Control Library. | |||||||
D3 | Dialog Component - Editing in Tree and Wyswyig Mode - Setting Properties in Multiple Controls at Once | This video shows how you can edit the Dialog component properties in
either Tree View or Wyswyig Mode. You can change multiple properties at
once by pasting a property value from one control to multiple controls
and you can also edit in the Xbasic view.
|
|||||||
D4 | Dialog Component - Complex Layout Using Frames, Containers, Tabs and Accordions | This video shows how you use different types of containers - simple
containers, frames, tabs and accordions to control the layout of a
Dialog. By wrapping controls in containers and then turning on/off the
breaks between containers, you can achieve complex Dialog layouts.
|
|||||||
D5 | Dialog Component - Copying Controls from one Component to Another | This video shows how you can copy controls from one Dialog component
to another.
|
|||||||
D6 | Dialog Component - Repeating Sections | The Dialog Component can be used for 'Master-Detail' style forms.
This is done by putting a 'Repeating Section' on the Dialog. Any
controls that are inside the 'Repeating Section' will repeat as many
times as you specify. At runtime, when the user is filling in the form,
they can click a button to add a new row to the Repeating Section if
they need more rows.
This video shows how you can create a simple invoice form with a Repeating Section. The video then shows how you can define client-side calculated fields to show the extended total (Price * Quantity) for each row as data is entered and also client-side summary fields that sum the extended total for all of the rows in the Repeating Section. |
|||||||
D7 | Dialog Component - Submitting Data | This video shows how you can put a button on the Dialog to submit
the data in the Dialog component to the server and then how the
AfterDialogValidate event is fired where your Xbasic code can handle the
event.
Typically, your Xbasic event handler would save the submitted data to a table. You are free to write your own code to perform this task, or you can use Server-Side Action Scripting to write the code for you (as shown in a subsequent video) |
|||||||
D8 | Dialog Component - Validating Data | The Dialog component has an extremely rich set of features for
validating data in the dialog. Validation rules can be defined
declaratively, or using code (either Javascript for client-side, or
Xbasic for server-side). Validation rules are evaluated on the client
where possible (thus eliminating the need for an Ajax callback).
Validation rules can be set to fire when the dialog is submitted, or
immediately, when the user tabs out of a field.
These videos discuss the various validation options in the Dialog component. Validating data in a Repeating Section Watch Video - Repeating Section - Part 1 In this video we show how the visual effects used in the sample dialogs shown in the above videos were created. |
|||||||
D9 | Dialog Component - Genie Style | When building Dialogs that have a large number of fields, it is
common to present the controls to the user in 'genie' or 'wizard' style.
In this style 'page 1' of the Dialog is shown, with a next button at the
bottom of the Dialog. When the user has entered data into the controls
on page 1, pressing Next moves to page 2, and so on. Typically, the user cannot move to the next page until the data on the current page has been validated. This video shows how easy it is to create 'Genie' style Dialog components.
|
|||||||
D10 | Dialog Component - Data Binding - Creating Tables to Match the Dialog Layout | When you create a Dialog component, you will often want to store the
data the the user submits in a table. In some cases, when you design the
Dialog, you will already have an existing table. However, there may be
cases where you design the Dialog first, and only then create the table
into which the data will be stored.
These videos show how you can design a Dialog component, and then automatically create one or more tables to match the structure of your Dialog component. Watch Video - Creating a Table from Dialog Definition Entering data into the newly created table
|
|||||||
D11 | Dialog Component - Data Binding - Binding to Existing Tables | After you create a Dialog component, you may want to 'bind' the
controls in the Dialog to one or more existing tables so that you can
use Server-side Action Scripting to automatically enter data into
tables. (You can't use Server-side Action Scripting until you have first 'bound' the Dialog to tables). In this video we show how you can bind the controls in a Dialog to a table. Once the controls have been bound, we then show how you can use Server-side Action Scripting to enter or edit records in the table. |
|||||||
D12 | Dialog Component - Creating Multiple Tables to match the Structure of a Dialog Component that has one or more Repeating Section |
These next set of videos show how, if the Dialog has Repeating Sections, when you can create both the Master and Detail tables automatically. Alpha Five analyzes the structure of your Dialog and lets you create multiple tables, linked in either one-to-one, or one-to-many relationships. Watch Video - Creating Multiple Tables - Part1 Watch Video - Creating Multiple Tables - Part2
Next, the videos also show how Server Side action scripting can be used to insert, update and delete records in the tables. In the case where the Dialog is bound to a SQL database, all of the SQL statements can be wrapped in a single transaction. |
|||||||
D13 | Dialog Component - Repeating Sections - Scrollable Containers | If you have a Repeating Section in a Dialog, you can put buttons
below the Repeating Section to add or remove rows from the Repeating
Section. When you add or remove rows, all of the controls on the Dialog
that are below the Repeating Section will move up and down as the size
of the Repeating Section changes. You might prefer to put the Repeating
Section in a fixed size, scrollable container. When you scroll this
container however, you want the titles for each column in the Repeating
Section to remain fixed.
This video shows how this is easily done. |
|||||||
D14 | Dialog Component - Eye candy - Adding free-form text to the Dialog | In this video we show how some nice visual effects can be added to a
Dialog component.
|
|||||||
D15 | Dialog Component - Grid Component - Calling a Dialog Component from a Grid and then Passing Information from the Dialog to the Grid | A common design pattern is to open a Dialog component from a button
on a Grid and then pass information from the Dialog back to the parent
Grid. This video shows how this can be done.
|
|||||||
D16 | Dialog Component - Setting Multiple Properties at Once Using Xbasic | This video shows how you can use an Xbasic function when you are
setting properties in multiple controls at once. For example, assume
that you have built a component with many controls and you would like to
wrap all of the control labels in language tags (<a5:r> and </a5:r>), so
that you can internationalize your component.
In the video we show how this is easily done. Note: The feature shown here in the Dialog also applies to the Grid component. |
|||||||
D17 | Adding a Row Number to Each Row in a Repeating Section | This video shows how you can add a row number to each row in a
Dialog Repeating Section.
|
|||||||
D18 | Button Styling Options | This video shows you how you can make the buttons on the dialog look
more interesting by including images on the buttons. (Requires build
3811 or above)
|
|||||||
D19 | Field Level Validation in the DialogValidate Event | By default, when you execute validation code in the DialogValidate
event and you want to display a validation error to the user, the error
text is displayed in a message area above the Dialog. This is different
than Field Level validation errors, which are displayed next to the
field in error. Field Level validation rules are defined at the Control
level in the Dialog Builder.
Howerver, in some cases it is more convenient to put all of your validation logic in the Dialog Validate event, but still be able to show errors next to the fields in error, rather than in the message area at the top of the dialog.
This video shows how you can defined field level validation in the DialogValidate event.
|
|||||||
D20 | Populating a Dialog with Data from one or more Tables | When a Dialog component is first opened, you might want to
automatically populate the dialog with data from one or more tables.
This video shows how you can use Server Side Action Scripting to
automatically populate a Dialog with a Repeating Section with data.
(Requires build 3818 or above)
|
|||||||
D21 | Creating a Button to Make a Callback to the Server and Populate the Dialog with Data for a Specified Record | After a Dialog Component has been opened, you might want to have a
button that does an Ajax callback to populate the dialog with data for a
specific record. This video shows how you can use Action Javascript to
define the code for a button that will populate the Dialog. The primary
key of the record you want to retrieve is read from a control on the
Dialog.
( Requires build 3818 or above.)
|
|||||||
D22 | Sending E-mail From a Dialog Component | A very common pattern in Web Applications is to display a form to
capture some information (for example, name and address information),
and then when the user clicks on the Submit button, store the submitted
data in a table and then send an e-mail confirmation to the the user.
This can be easily done with the Dialog component. Using Server-side Action Scripting, the entire process can be handled without having to write any code. The Alpha Five Genies will write all of the code for you. The videos show how the email message can be sent immediately, or queued in a 'WorkQueue' table.
|
|||||||
D23 | Understanding the 'Prevent Container Float' Property on
a Container Control
How to Eliminate Unwanted Vertical Space when a Client-side Show/Hide Expression Hides a Control. |
(This dialog is aimed at advanced developers). When you use a
client-side show/hide expression to show or hide a container, not all of
the vertical space that is consumed by the container is removed when the
container is hidden. This dialog explains how the Container's 'Prevent
container float' property can be used to solve this problem.
(Requires build 3818 or above) |
|||||||
D24 | Using a Dialog Component to Edit a Record in a Grid Component, or Enter a new Record into a Grid Component | This video shows how you can use a Dialog Component in conjunction
with a Grid component. The Dialog component can be used to edit existing
records in the Grid, and to enter new records. No programming is
required. All code is automatically generated using Action Javascript
and Server-side Action Scripting.
(Contrast this action with the action shown in D28 in which the Dialog is merely an alternate view of the record you are editing).
(Requires build 3822 or above.) |
|||||||
D25 | Placing Grid Lines on the Dialog Background in Preview Mode to Help Set Control Sizes | When you layout out a Dialog Component, getting the right edge to
controls that are on different lines to be right aligned can involve
quite a bit of trial and error. This video shows how you can make the
process easier by displaying grid lines as a background to the Dialog
when you are in Working or Live Preview.
(Required build 3829 or above) |
|||||||
D26 | Using Action Javascript to Open a Dialog and Populate it with Data from a Table | In Video D20 we show how you can populate a Dialog with data from
one or more tables when it is first opened. In this video we show how
you can create an event handler (for a Dialog or Grid) to open a Dialog
component and populate the Dialog with data from a table. The primary
key of the record to load can be read from controls in the current
Component (a Grid or Dialog), or specified by a session variables.
(Requires build 3833 or above) |
|||||||
D27 | Using Action Javascript to Lock the Page, or a Portion
of the Page During an Ajax Callback
(Video is shown for a Dialog, but technique applies to a Grid as well). |
A common requirement in Ajax applications is to 'lock' the screen,
or a portion of the screen, for the duration of the callback. This
prevents the user from performing some action that is not appropriate
during a callback. A transparent overlay is displayed over the screen or
element to 'lock' it.
In this video we show how you can use Action Javascript to lock either the entire screen, or a portion of the screen.
Note: The video shows how this is done in a Dialog component, but the technique applies equally well to a Grid component. |
|||||||
D28 | Using a Dialog Component as an Alternate Editing View of a Record in a Grid | If you have a lot of columns in an updateable Grid, it can be
cumbersome to scroll horizontally when editing data in the Grid. In this
video we show how a Dialog Component can be used to edit the data in the
Grid row. A button can be inserted into the Grid row. When the button is
clicked, the Dialog Component is opened and the current data in the Grid
row is filled into the Dialog. The user can then continue editing in the
Dialog, and then click an Update button, which closes the Dialog and
fills in the controls in the row in the Grid that is being edited.
You can toggle instantly between the Grid view and the Dialog view of the data.
(Contrast the behavior in this video with that of video D24. In D24, the Dialog is more than just an alternate editing view - it is responsible for saving the edits to the database. In this video, the Dialog is not responsible for saving data to the database - it is merely an alternate view of the data you are editing).
(Requires build 3834 or above) |
|||||||
D29 | Creating a New Dialog From a Template | Video shows how you can use a template to get a quick start when
creating a new Dialog. You can easily create your own templates as well.
|
|||||||
D30 | Understanding How Data From Repeating Sections is Submitted | This video is aimed at advanced developers who are writing their own
event handlers for the DialogValidate or AfterDialogValidate events. It
explains how the data from the RepeatingSections is represented in the
e.datasubmitted object that is passed to the event handlers.
|
|||||||
D31 | Edit-Combo - AfterSelect Event - AjaxCallback | This video discusses firing an AjaxCallback in the AfterSelect event
in an edit-combo control. This video applies to both a Grid and Dialog component. (This is the same as video M39) |
|||||||
D32 | Embedding a Grid Component inside a Dialog Component and Executing Methods on the Grid from the Dialog | In this video we show how a Dialog component can 'host' a Grid
component (i.e. a Grid can be embedded inside a Dialog) and how the
Dialog can call methods of the embedded Grid component.
(Requires build 3846 or above) |
|||||||
D33 | Duplicate and Copy Rows in a Repeating Section | This video shows how methods of Dialog component can be used to
duplicate a row in a Repeating Section or to copy a row in a Repeating
Section.
(Requires build 3846 or above) |
|||||||
D34 | Extended Dialog Demo Showing How Tables Can be Created from the Dialog Definition, and Data Can Be Entered into Repeating Sections | A comprehensive demo showing how a Dialog with a Repeating Section
can be used to create database tables and then enter data into the
database.
|
|||||||
D35 | Moving Rows in a Repeating Section Up or Down and Swapping Rows in a Repeating Section | This video shows how you can add buttons to a Dialog component to
move rows in a Repeating Section up or down, or swap rows in a Repeating
Section. In the video we show how to use the methods that the Dialog
Component exposes for changing the order of rows in a Repeating Section.
(Requires build 3852 or above) |
|||||||
D36 | Sorting Data in a Repeating Section | This video shows how you can add buttons or event handlers to a
Dialog component to sort the data in a Repeating Section. You can sort
by any column in the Repeating Section, and you can specify an ascending
or descending sort.
(Requires build 3854 or above) |
|||||||
D37 | Opening a Component and then Executing Javascript Code in the Target Component - Circumventing the Asynchronous Nature of Ajax Callbacks. | Often, when using Action Javascript, you might define an action to open a component (say a Grid, or a Dialog) and then you might define a subsequent action to perform
some command on the component you just opened. This does not work because the second action executes before the first action has completed - since the first action is an
Ajax callback, and it is therefore asynchronous. |
|||||||
D38 | Using Hidden Fields in a Repeating Section | When you want to hide a fields in a Repeating Section, it is not as simple as hiding a field that is in the
main section of the Dialog. This video shows the extra steps that you must follow in order to hide a fields in
a Repeating Section.
Watch Video |
|||||||
D39 | Understanding what's in the e.dataSubmitted and e.oldDataSubmitted Objects when the Dialog is Submitted. | When a Dialog is submitted, the data in the Dialog are submitted in the e.dataSubmitted object. In addition, the original data that was in the
Dialog when the Dialog was originally opened are in the e.oldDataSubmitted objected. In some cases the developer will allow the Dialog to be submitted
multiple times and might want to re-initialize the Dialog so that each time the Dialog is submitted, the data in the e.oldDataSubmitted object
are the data that was in the Dialog the previous time it was submitted, and not when the Dialog was initially displayed.
Watch Video |
|||||||
D40 | Processing JSON Data to Display Feeds from Twitter in Alpha Five. | These videos provide a detailed overview of consuming and processing the JSON results from the Twitter Search API.
A client side example using JavaScript and jQuery is included as well as a server side example using Xbasic.
The data from Twitter are displayed in Dialog components.
Watch Video - Part 1 Watch Video - Part 2 To download the components used in these videos click here. |
|||||||
D41 | Dynamically Re-populate a DropdownBox Control in a Dialog or Grid Component. |
This video shows how you can make an Ajax callback to get a new set of choices to display in a Dropdownbox in either a Grid or Dialog component and then send back the necessary Javascript code to repopulate the choices that are shown in the Dropdownbox control. Watch Video - Part 1 Watch Video - Part 2 |
|||||||
D42 | Evaluating Javascript contained in <script> tags in an Ajax response. Applies to both Dialog and Grid. |
When you make an Ajax callback to populate an element on a page with some content, any Javascript that is contained in <script> tags in the content you are populating the element with is not executed. Here is how you can find any code within <script> tags and execute it. Note: The technique shown here applies to both the Dialog and the Grid components. Watch Video |
|||||||
D43 | Hiding Controls on a Dialog and then Showing Them in a Pop-up Window. | This video shows how you can take certain cotrols on a Dialog that would normally be visible when the Dialog was run
and hide them. When the user clicks a button to show the controls, the hidden controls are shown in a pop-up window.
As shown in the video, all of the controls in a specified Container control are automatically hidden and only shown in the pop-up window on demand. Watch Video |
|||||||
D44 | Working with an IFrame on a Dialog | This video shows how you use Javascript to set the properties of an IFrame control in a Dialog component.
Watch Video |
|||||||
D45 | Add a File Download Feature to a Dialog Component | This video shows how you can add a file download feature to a Dialog component.
Watch Video |
|||||||
D46 | Geocoding Data when Records are Saved | This video shows how you can automatically geocode data when saving a record in a Dialog component. This feature is a Subscriber Benefit. Watch Video - 1 Watch Video - 2 |
|||||||
D47 | Server Side Events For CRUD Operations |
When using Server-side Action Scripting to save data to SQL tables, you can insert event handlers for these actions:
This feature is a Subscriber Benefit. Watch Video |
|||||||
D48 | Using the 'Prevent Container Float' Property on a Free-form Container To Center or Right Justify Text | By default, all controls in a Dialog component are wrapped in a div which has the A5Container class. This class floats all elements to the left. In some cases, this will prevent you from achieving a layout that you want. For example, say you have a container, and you would like the controls in the container to be center or right justified.
This video explains how you can place the controls in a free-form container and then turn off the float property of the container.
Requires build number 2591-3907 or above Watch Video |
|||||||
D49 | Displaying a Fade Out Message to Confirm that Record was Saved | A common pattern in web applications is to display a transient message (a 'fade out' message) to confirm that an action has taken place.
This video shows how you can easily create fade out messages in your applications, and in particular how easy it is to add a 'fade out' confirmation message when a record is saved.
This feature is a Subscriber Benefit. Watch Video - 1 Watch Video - 2 Note: For an example of a fade out message on a Grid, see video number M51. |
|||||||
D50 | Adding a Row to a Repeating Section Programmatically By First Prompting for Data in a Pop-up Window | A common pattern when adding a new row to a Repeating Section in a Dialog is to first display a dialog where you can collect information from the user. Once the user has filled in all of the information, the new row is in the Repeating Section is created and the data that was collected in the pop-up window is used to populate the new Repeating Section row.
Watch Video - Part 1 Watch Video - Part 2 |
|||||||
D51 | Prompting for Confirmation Before Submitting a Dialog | A common requirement in a Dialog component that submits data to the server is to prompt the user for confirmation before actually submitting the Data.
These videos show two different ways in which this can be done. The technique shown in this video are available as part of the Subscriber Benefits. Watch Video - 1 Watch Video -2 The technique shown in this video do not require any Subscriber Benefits. Watch Video - 1 Watch Video -2 |
|||||||
D52 | Dynamically Re-populating Choices in a Radiobutton or Checkbox Control. | In some applications it might be necessary to repopulate the choices shown in a radiobutton or checkbox controls with a new
set of choices after the Dialog has initially been rendered. An ajax callback it made, where the new choices are computed on the server and then
a javascript response is sent to the browser to update the choices for the control.
These videos show how this can be done. Note: The video shows an example for a checkbox, but the same principle applies to radio buttons. The only difference is that the a5w_radiobuttons() function would be used on the server to compute the HTML for a radiobutton control. Watch Video In this next video the checkbox is populated with a much larger set of choices and a snaking layout (left-to-right, top-to-bottom) for the checkboxes is specified. Watch Video Download component used in video |
|||||||
D53 | Dynamically Re-populating Choices in a Dropdownbox Control. | In some applications it might be necessary to repopulate the choices shown in a dropdownbox control with a new
set of choices after the Dialog has initially been rendered. An ajax callback it made, where the new choices are computed on the server and then
a javascript response is sent to the browser to update the choices for the control.
These videos show how this can be done. See also Video D59 and D60 Watch Video In this next video the dropdownbox is populated with different stored and displayed values. Watch Video In this next video the dropdownbox is populated with choices that are obtained by querying a SQL table. Watch Video - 1 Watch Video - 2 Download component used in video In this video we show how dropdownboxes in a Repeating Section can be dynamically populated by querying a SQL table. Watch Video Download component used in video |
|||||||
D54 | Preventing an Event From Firing Twice when a User Double-clicks on a Hyperlink or Button. | Sometime users double-click on a button or hyperlink instead of single clicking it. This can cause problems because the event will fire twice, instead of the intended once.
This is especially problematical if the event is an Ajax callback. This video shows a simple technique to prevent the problem and cause the event
to only fire once, regardless of whether the button or hyperlink was double or single clicked.
Note: This same technique can also be used in a Grid component. Watch Video |
|||||||
D55 | Using jQuery to Make a Div Draggable | The jQuery Javascript library is, by default, automatically available to you in all of your components.
This video show how you can easily translate an example on using jQuery that you might have found on the internet into something you can use on
a Dialog component.
Note: This same technique can also be used in a Grid component. Watch Video |
|||||||
D56 | Defining Javascript Action - Using Action Javascript Genies to Define Global Javascript Code | Javascript Actions are an alternative to defining global Javascript Functions in your Dialog Components. When you define a Javascrpt function, you have to hand-code
the Javascript. However, when you define a Javascript Action you can use the Action Javascript genies to write the code for you.
Watch Video |
|||||||
D57 | Populating Controls in a Dialog - Tutorial | This video is aimed at advanced developers who are writing their own Xbasic handlers to populate complex Dialogs with one or more Repeating Sections.
Normally, the code to populate a Dialog with data from a database is auto-generated by the Dialog. However, in some cases, developers might want to write custom code.
These videos describe how this can be done using two special 'helper' Xbasic functions (a5DialogHelper_JS_PopulateDialog() and a5DialogHelper_GetDataToPopulateDialog())
to generate some of the code for you.
(Requires build 2743-3945 or above) Background information Watch Video Generating the Javascript to populate the Dialog Watch Video - 1 Watch Video - 2 Querying the Database to get the data Watch Video - 1 Watch Video - 2 Watch Video - 3 Watch Video - 4 |
|||||||
D58 | Opening a Dialog Component in a Grid Row Expander to Edit a the Current Grid Row | This video shows how a Dialog component can be displayed in a Grid Row Expander. The Dialog is automatically populated with data from the current row in the Grid
and when the record in the Dialog is saved, the Grid row is refreshed.
(Requires build 2747-3953 or above) Watch Video - Part 1 Watch Video - Part 2 |
|||||||
D59 | Refresh the Choices in a Dropdownbox and Dynamically Filter the Choices in a Dropdownbox | Shows how you can do an Ajax callback to refresh the choices in a Dropdownbox. The query that was uses to populate the Dropdownbox initially is re-executed and the
refreshed list of choices is used to re-populate the Dropdownbox. When you call the method to refresh the choices, you can also specify an optional filter to dynamically filter the choices in the Dropdownbox. The Dialog component method that is used to refresh the choices in the Dropdownbox is: {dialog.Object}.refreshDropdownBoxChoices() See also Video D53 (Requires build 2766_3968 or above) Watch Video - Part 1 Watch Video - Part 2 Download component used in video |
|||||||
D60 | Prompt For a New Choice to Add to a Dropdownbox and Dynamically Add the Choice to the Dropdownbox | Shows how the user can select an 'Add new choice' selection in a Dropdownbox which then opens a dialog where the user can specify the
new value to add to the Dropdownbox. The choices is added to the table on which the Dropdownbox is based and is then added to the list of choices show in the
Dropdownbox.
See also Video D53 (Requires build 2766_3968 or above) Watch Video - Part 1 Watch Video - Part 2 Watch Video - Part 3 Download component used in video |
|||||||
D61 | Using Action Javascript when Writing Javascript Code | When you write Javascript to handle events in a Dialog, you can either use Action Javascript, or Text mode. In some cases, the only option is Text mode.
This video shows how, even when you are using Text mode, you can still take advantage of Action Javascript and have the built-in Genies write a lot of
complex code for you.
(Requires build 2807_3978 or above) Watch Video - Part 1 Watch Video - Part 2 |
|||||||
D62 | Understanding Difference Between 'Control Width' and 'Container Width' Layout Mode | The Dialog Component has two different layout modes - 'Control Width' and 'Container Width'. This video explains the
differences between these two modes.
(Requires build 2879-3990 or above) Watch Video |
|||||||
D63 | Setting the Text in a Label or Button Automatically when a Client-side Expression is True - Conditional Text and Events | The Dialog and Grid components have allways allowed you to defined client-side conditional style definitions that
automatically change the style and/or class of a control when a particular expression is true. (For example, set the font
of the amount due field to red if the balance is above $200). Now, the conditional style functionality has been
extended to allow you to dynamically set the text in controls (such as buttons, hyperlinks and static text objects)
and to dynamically invoke arbitrary Javascript functions when an expression is true.
This video is based on a Dialog component, but the exact same functionality is also now available in the Grid component. (Requires build 2887-3990 or above.) This feature is a Subscriber Benefit. Watch Video - Part 1 Watch Video - Part 2 |
|||||||
D64 | Server-side Action Scripting - Send E-mail - Get E-mail Settings at Run-time | This video shows how email account settings for the 'Send e-mail' action can by dynamically set a run-time by reading the values from the Repository. The video also shows how a Dialog component can be configured to edit the e-mail settings in the Repository. (Requires build 2921-3999 or above.) Watch Video |
|||||||
D65 | Printing Reports - Using the 'BeforePrintJavascript' and 'AfterPrintJavascript' Events To Display a Wait Message | When you print a Report in a web application, depending on the complexity of a report, there can be a relatively long delay before the
report is rendered. Using the 'BeforePrintJavascript' and 'AfterPrintJavascript' events, you can easily put up a 'wait' message while the report is rendering.
In this video, we show how this feature is used in for a Report that is embedded into a Dialog component, but these events are available in all Action Javascript actions that print Reports. (Requires build 2921-3999 or above.) This feature is a Subscriber Benefit. Watch Video |
|||||||
D66 | Storing State Information in the Grid or Dialog Object | This video is for advanced developers. It shows how 'state' information can be stored in the 'state' object in the Grid or Dialog object.
The data in the 'state' object can be read in both client side and server side events. It can also be set in either client side or server side events.
In many cases, storing state information in the Grid or Dialog object's 'state' object is preferable to using session variables. Watch Video - Part 1 Watch Video - Part 2 |
|||||||
D67 | Using the 'Lookup and Fill In' Action in a Repeating Section | The 'Lookup and Fill In' action takes a key value that was entered into a control, does an Ajax callback to lookup some addtional data for the key value, and then fills in other fields on the page.
If some cases, when you use the action in a Repeating Section, the wrong row of in the Repeating Section can be filled in, because focus has moved to another
Repeating Section row before the callback has completed.
In this video we explain a technique to make sure the event fills in the correct row of the Repeating Section by explicitly telling the callback what the active row in the Repeating Section is. Watch Video |
|||||||
D68 | Understanding the synchronizeDialog (client-side) and onSynchronize (server-side) Events. |
When a Dialog component is opened in a pop-up window, it can be set to use a 'cached' version of the Dialog the
second and subsequent time it is opened. In the case of small Dialogs, there is not much benefit is using a
cached version. But for large Dialogs, if you use a cached version, the second and subsequent opens will be
much faster.
When a cached Dialog is opened the onDialogInitialize event does not fire. Instead, there is a client-side and server-side event that fires. This video discusses these two synchronize events. (Requires build 3019-4033) Watch Video - Part 1 Watch Video - Part 2 Watch Video - Part 3 |
|||||||
D69 | Dynamically computing default values for fields when adding a new row to a Repeating Section. |
When the user clicks the plus key to add a new row to a Repeating Section, the new row is populated with any default values
that were defined for each field. If any default value was specified using an expression, the expression is evaluated when the component
is initially rendered (not when each new row is added). This means that every new row that is added by the user will have the same default values.
You might want each new row to have a dynamically computed default value. This video discusses how to make an Ajax callback each time the user adds a new row to compute default values for fields in the Repeating Section. Watch Video |
|||||||
Dialog Component - Managing Data in the Security Framework Back to top | |||||||||
Number | Category | Description | |||||||
D_SF_1 | Dialog Component - Security Framework - Create an Account for a New User |
Managing data in the Web Security Framework tables at run-time is a common requirement. These videos show how this is easily done using Dialog components.
This video shows how a Dialog Component can be used to create an account for a new user. The Dialog Component prompts for account information (such as username and password), and enters the data in the tables used by the Web Security Framework. (Requires build 3829 or above). |
|||||||
D_SF_2 | Dialog Component - Security Framework - Create an Account for a New User and also Store Personal Information in a Related Table | This video builds on the concepts of video D_SF_1. It shows how you
can also add data to a related table at the same time that you create a
new user account. The account credentials are stored in the Web Security
Framework tables, and the additional information (which could include
any data that you choose to collect) are stored in a related table.
All of the coding in the Dialog Component is automated through the use of Server-side Action scripting. (Requires build 3829 or above). |
|||||||
D_SF_3 | Dialog Component - Security Framework - Modifying the Account of an Existing User | This video builds on the concepts of video D_SF_2. It shows how you
can use the Dialog Component to retrieve the account information for an
existing user into the Dialog component, and then edit that data. For
example, you might want to change the Group (i.e. role) to which the
user is assigned.
(Requires build 3829 or above). |
|||||||
D_SF_4 | Modifying the Security Account of an Existing User and Update Personal Information in a Related Table using a Grid. | This video builds on the concepts shown in video D_SF_2.
It shows how you can use a Grid based on a table related to the
Web Security settings to find and edit a record in the related table
using a Grid, and then open a Dialog to edit the security information.
The Dialog is opened in a dropdown window from the Grid.
All of the coding in the Dialog Component is automated through the use of Server-side Action scripting. Watch Video |
|||||||
D_SF_5 | Setting Security on Pages and Components - Using the Page Permissions Genie | When you turn the Security Framework on, you can then set permissions on individual pages (.a5w pages) and Components in your project. This video
gives a quick overview of the Page Permissions Genie.
Watch Video |
|||||||
Calendar Component Back to top | |||||||||
Number | Category | Description | |||||||
Cal1 | Overview of the Calendar Component | The Calendar component allows you to display 'events' or
'appointments' in a Calendar view. This video gives a quick overview of
the features of the Calendar component. In a subsequent video we show
how to set up the Calendar component.
|
|||||||
Cal2 | Setting up the Calendar Component | This video shows the steps to get started to set up and use a
Calendar component in your application.
|
|||||||
Cal3 | Dynamically Creating New Records in the Calendars Table | When the Calendar Component is opened, it can be configured to only
display the events for a particular calendar.
For example, you might have an 'Employees' table and you might have a Grid which shows the records in the Employees table.
A button in each row of the Grid opens the Calendar Component showing the appointments for that particular Employee. However, if there is no matching record in the Calendar table for the Employee, it would be convenient to automatically create a new record in the Calendars table before opening the Calendar.
This video shows how this is easily done.
|
|||||||
Cal4 | Opening the Calendar Component and Showing a Selected List of Calendars | When the Calendar Component is opened from a button in a Grid or
Dialog component, you can specify which calendars (i.e. the calendar for
Dr. Jones, Dr. Smith, etc.) should be shown on the Calendar.
This video shows how you can read the list of calendars to show from a column in the Grid. (Requires build 3823 or above) |
|||||||
Cal5 | Opening the Calendar Component and Showing a List of Related Calendars | Assume that you have a Grid that contains a list of people for which
calendars have been defined. When you click a button to open the
Calendar Component for a particular person, you would like to see the
calendars for 'related' people as well. In addition, you would like the
'related' calendars to be read-only, while the main calendar is
updateable.
This video shows how you can define a 'link table' that indicates what the 'related' calendars are for each calendar. For example, whenever the calendar for Dr. Smith (id = 3) is shown, you also want to see the calendars for Dr. Jones (id = 27) and Dr. King (id = 33).
This video shows how this can be done by putting a Linked Content Section in the main Grid. The Linked Content Section shows the Grid based on the 'link table'. (Requires build 3823 or above)
|
|||||||
Cal6 | Adding Custom Fields to the Events Tables |
The information for each event shown on the calendar is stored in an Events table. You are free to add any fields of your own to this table. When you edit an event, the Dialog component that is shown will allow you to display and edit the additional fields you define in the Events table. The videos discuss the difference between adding the new fields BEFORE you auto-generate the Dialog component that is used to edit the events, and AFTER you have auto-generated the Dialog component. Obviously, if you have auto-generated the Dialog that will be used to edit events, and have made extensive customization to it, you would not want to re-generate it. This video discusses how this is easily done. Watch Video - Part 1 Watch Video - Part 2 |
|||||||
Custom Component Back to top | |||||||||
Number | Category | Description | |||||||
CC1 | Custom Component | The Custom Component is for developers who want to generate the
component using their own Xbasic code. These videos give a basic
overview of the Custom Component. They explain what a custom component
is, and show how the component can define arguments whose value can be
passed in from the calling page or component. The videos shows how a custom component can be called from a Grid component and how the values of the arguments defined in the custom component can be passed in from data in the current Grid row. Next the videos demonstrate a more realistic example where the Custom Component is used to define a pie chart displaying the breakdown of items on an order.
|
|||||||
Image Gallery Component Back to top | |||||||||
Number | Category | Description | |||||||
IG1 | Quick Start | The Image Gallery is a powerful component for displaying images in a
Web or Mobile application.
This video shows how easy it is to get started with the Image Gallery Component. |
|||||||
IG2 | Overview of Image Gallery | Overview of the Image Gallery Component
|
|||||||
IG3 | Using the Image Gallery in a Tabbed UI Component | Watch Video | |||||||
IG4 | Calling the Image Gallery from a button in a Grid | Watch Video | |||||||
IG5 | Filtering the Images Shown in an Image Gallery | By default, when you open an Image Gallery, all of the images in the
specified folder as shown. However, the Image Gallery supports a filter
property that allows you to apply a filter to the list of files in the
folder. For example, if you specify a filter of
image_bathroom_*,image_kitchen_*,
then only images that start with 'image_bathroom' or 'image_kitchen'
will be shown in the Image Gallery.
This ability to filter the list of images shown in the Image Gallery dynamically greatly enhances the flexibility of the Image Gallery. (Requires build 3815 or above) |
|||||||
Video Player Component Back to top | |||||||||
Number | Category | Description | |||||||
VP1 | Video Player | The Video Player Component allows you to easily display video
content in a Web Application.
These videos shows how easy it is to get started with the Video Player Component.
|
|||||||
Reporting Back to top | |||||||||
Number | Category | Description | |||||||
R1 | Reports - Embedded Charts | This video shows how charts can be embedded into an Alpha Five
report.
|
|||||||
R2 | Reports - Adding a Chart to the Sample Invoice Report | In Video R1 we showed how you can add a chart to a report. In that
video, the data source for the chart was set to 'Table'. In this video
we show how a chart can be added to the sample 'Invoice' report in the
sample 'AlphaSports' application that ships with Alpha Five.
In this video, the data source for the chart is set to 'Report', which means that the data used in the report is used for the chart, rather than a separate query. By setting the data source to 'Report' the chart can use all of the calculated fields and summary fields that the report calculates. |
|||||||
R3 | Reports -Printing the Same Report in Multiple Languages | A common requirement in Web applications is to allow the user to select a language (e.g., French, German, English).
For Grid and Dialog components, the technique used is to wrap strings in language tags (e.g. <a5:r> and </a5:r>).
However, for reports, a different technique must be used. This video shows how this can be done.
Using a free-form report |
|||||||
R4 | Reports - Putting Boxes and Lines Around Report Sections | A common requirement when designing reports is to put report content in sections with boxes around the sections and to draw lines in the report to separate report columns.
The Layout Table Report Editor makes this very easy to do. The 'Box' object in the Layout Table Report editor can be used to draw boxes and lines on the report.
In this video we explain how the 'Box' object works. We show how a box can be placed around multiple sections of the report - the Group Header, Detail and Group Footer sections. |
|||||||
R5 | Reports - More About Boxes | When you put a box around a section, if the box touches a box in another section, it is automatically joined with the adjacent box.
In some cases, this is desirable, and in others it will not give the desired effect. In this video we explain the issue in more detail. |
|||||||
R6 | Reports - Suppressing Blank Lines in a Static HTML Control | When using a Layout Table report, the technique used to display blocks of text, such as an address block, is to put the fields in a
static HTML field. In this video we show how blank lines in the 'address block' can be suppressed.
|
|||||||
R7 | Reports - Duplicating the Functionality of the Free-form Report 'Conditional Object' in a Layout Table Report - Showing Conditional Content in a Cell |
When designing Free-form reports, developers often use the 'Conditional Object' control to display conditional content. For example, you might want to
show one set of field values under one condition, another set under another condition, and so on. When designing Layout Table reports, you can implement the functionality of the 'Conditional Object' (and much more!) by placing a 'Static HTML' control into a report cell. In this video we show how this is done. |
|||||||
Web Component Style Builder Back to top | |||||||||
Number | Category | Description | |||||||
SB1 | Introduction to the Style Builder | The Style Builder, which is used to edit the appearance of
Components in a Web Application, has been completely re-written in V11.
It is now no longer just a Grid style editor. It is used to edit the
style of all Components - Grid, Dialog, Tabbed UI, etc.
This video gives an overview of the new Style Builder.
|
|||||||
SB2 | Creating a New Style from a Template | When you create your own custom Styles for use in a Web Application
you can either start by editing one of the built-in Styles (such as
GrBlue - the 'Gr' prefix indicates that the style is a 'Gradient'
style), or you can create your new style from one of the built-in
Templates.
A 'Template' is a style that has no colorization. Everything (all CSS colors, all Icons etc.) are just shades of grey. When you create a new style from a Template, you use hue, luminance and saturation sliders to adjust the color of your new style. This video shows how this is done. |
|||||||
SB3 | Adjusting the Colors in an Existing Style | After you have created a style you might want to make adjustments to
the overall color of the style. Visiting each selector in the CSS
stylesheet to make an adjustment would be tedious. You can make
adjustments to all of the colors used throughout the style at once, as
shown in this video.
The color adjustments that you make here are all 'relative'. I.e. you add more saturation, or luminance to every color used in the style. |
|||||||
SB4 | Understanding the 'Part' Tab in the 'Manager' Panel in the Style Builder. | This video explains the purpose of the 'Part' tab in the 'Manager'
panel of the Style Builder. It allows you to quickly see and edit the
selectors used in a style.
|
|||||||
SB5 | Understanding the 'Selectors' Tab in the 'Manager' Panel in the Style Builder. | This video explains the purpose of the 'Selectors' tab in the
'Manager' panel of the Style Builder. It give you direct access to the
selectors used in the CSS style.
|
|||||||
SB6 | Understanding the 'Icons' Tab in the 'Manager' Panel in the Style Builder. | This video explains the purpose of the 'Icons' tab in the 'Manager'
panel of the Style Builder. It gives you full control over the icons
that are used in your style.
|
|||||||
SB7 | Understanding the 'Settings' Tab in the 'Manager' Panel in the Style Builder. | This video explains the purpose of the 'Settings' tab in the 'Manager' panel of the Style Builder. This tab gives you access to certain style settings that are not part of the CSS file. |
|||||||
SB8 | Understanding the 'Edit' Panel in the Style Builder | The 'Edit' panel in the Style Builder is where you can edit the
actual CSS in the style. This video shows how to use the 'Edit' panel.
|
|||||||
SB9 | Understanding the 'Background' Genie in the 'Edit' Panel - Generating Interesting Backgrounds for Elements in a Component |
When editing the CSS background of an element in a Component, you
are not limited to boring solid backgrounds. There is a powerful genie
in the Style Builder for generating complex gradient and patterned
backgrounds.
This video explains how to use the 'Background' genie.
|
|||||||
SB10 | Understanding the 'Help' Panel in the Style Builder | The Style Builder integrates a help system that explains the purpose
of the various selectors in the style.
|
|||||||
SB11 | Understanding the 'Assets' Panel in the Style Builder | The 'Assets' panel shows you all of the colors and icons used in a
style. The 'Assets' panel exposes powerful editing features for making
changes to the colors and icons used in the style.
|
|||||||
SB12 | Introduction to 'Design Mode' in the Style Builder. | This video introduces you to the 'Design Mode' in the Style Builder.
It shows how you can interact with the preview of the style elements to
select and edit style settings.
|
|||||||
SB13 | Using the 'Appearance' Tool in the 'Design Mode' of the Style Builder | This video discusses the 'Design Mode' of the Style Builder in more
detail. It shows you you can use the 'Appearance' tool to copy/cut/paste
appearance from one element to another. It also shows how you can clear
the appearance settings of an element.
|
|||||||
SB14 | Using the 'Asset' Tool in the 'Design Mode' of the Style Builder | This video discusses the 'Design Mode' of the Style Builder in more
detail. It shows you you can use the 'Asset' tool in 'Design Mode'.
|
|||||||
SB15 | Searching in a Style | The Style Builder has powerful search features, including search and
replace features. This video explains how you can use the search
features of the Style Builder.
|
|||||||
SB16 | Scaling Fonts in a Style | Sometimes you want to make all of the fonts in a style bigger or
smaller. This video shows how this is easily done in a single global
operation. You don't have to edit each font size CSS selector
individually.
|
|||||||
SB17 | Converting a Legacy Style to a new Style | The CSS for styles in V11 is quite different from that used in
previous versions. The Style Builder allows you to convert a legacy
style to a V11 style. This video explains how to go about converting a
legacy style.
|
|||||||
Desktop Applications Back to top | |||||||||
Number | Category | Description | |||||||
DT1 | Layout Editors - Control Libraries | When you are editing a Layout (e.g. Form, Report, etc.), you can
select one or more controls and then place them in a 'Control Library'
on the Toolbox. Controls in the Control Library can be placed on any
Layout.
This video shows how you can add controls to the Control Library, and then use controls that you previously added to the Control Library.
|
|||||||
DT2 | Layout Editors - Embedded Charts | Alpha Five V11 introduces a powerful charting engine. Charts can be
used in Form, Reports, Labels, Letters, Xdialogs, and Web Components.
This video shows how a chart can be embedded into a form.
|
|||||||
DT3 | Charts - Xdialog Examples | The charting features in V11 can be used in Xdialogs. The following
video show how you can embed custom charts in your own Xdialogs.
The Xdialogs shown in the above video are all in the sample 'Learning Xdialog' database that ships with V11. Since there are many example scripts in 'Learning Xdialog' that would be useful to have quick access to, regardless of which database you are working in, we show in this video how you can easily create a Code Library from the examples in 'Learning Xdialog'. |
|||||||
DT4 | Forms - Embedded Charts - Charting Summary Data | The charts that you embed on a Form or Report can plot summary data.
The charts can either be defined declaratively, or you can use custom
Xbasic.
These videos show how a chart that summarizes attendees at a seminar by state can be defined using the built-in Chart Genie, or using Xbasic. The sample database used in the videos can be be downloaded here.
|
|||||||
DT5 | Using a Grid Component in a Desktop Application - Automatically Closing the Host Xdialog Window when Data in the Grid is Saved | It is easy to use Grid and Dialog components in Desktop applications. For example, you might have a button on a form (with code generated by Action
Scripting genie) that opens a Grid or Dialog in a window. In this video we show how the pop-up window, in which the Grid is hosted can be automatically
closed when the user makes an edit to data in the Grid and then submits the Grid. The techniques shown in the video apply equally to a Dialog component. Watch Video - 1 Watch Video - 2 |
|||||||
DT6 | Using a Grid Component in a Desktop Application - Calling Xbasic from Events on the Grid. | In this video we show how easy it is for Desktop application developers who use Grids and Dialogs in their applications to call Xbasic when a button on the
component is clicked.
The techniques shown in the video apply equally to a Dialog component. Watch Video |
|||||||
Optional V10 Feature Packs - Now Included as Part of V11 Back to top | |||||||||
Number | Category | Description | |||||||
V10FP2 | Tree-control Navigator
(Note: This Feature Pack is sold as an optional add-on in V10, but is
included with V11.)
|
The Tree-control Navigator displays a tree-control on the page. When
the user makes a selection in the tree-control you can optionally filter
the associated Grid component. In other words, the tree-control is used
to navigate in the Grid. Hence the name 'tree-control navigator'. The following videos demonstrate the Tree-control navigator in more detail.
|
|||||||
V10FP3 | Using Grid Components on the Desktop
(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
|
The Grid Component in Desktop Applications Feature Pack allows you
to use a Grid Component in a Desktop application in two different ways:
Watch Video - Embedded a Grid in a Form Watch Video - Using Action Scripting to open a Grid Component in a Desktop Application - Part 1 Watch Video - Using Action Scripting to open a Grid Component in a Desktop Application - Part 2 |
|||||||
V10FP4 | Database Upsize Genie
(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
|
The Database Upside Genie is for developers who have developed a
Desktop Application in Alpha Five that uses Alpha Five's native .dbf
tables for data storage.
The Genie allows you to 'upsize' your application to use a SQL database for data storage.
There are many benefits to using a SQL database for the data storage in your application. These benefits include:
|
|||||||
V10FP5 | Flying Start Genie
(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
|
The Flying Start Genie allows you to get a quick start on a new Web
Application by automatically creating a Grid component for every table
and view in your Database. The Genie also creates a Tabbed UI component
which serves as your 'home page' for your auto-generated application.
The Flying Start Genie can be used against both SQL databases and native Alpha Five databases (.dbf tables). Once the Flying Start Genie has created the Grid components, you can edit any of the components in the Grid Component editor and customize any of their properties.
By default, the Grids that are automatically created for you have a Search Part and a Detail View Part. The Grids are editable and the edits are made in the Detail View part which is set to display in a pop-up, modal window. You can easily change these defaults for all of the Grids that are created, or for individual Grids. |
|||||||
V10FP6 | Export to Excel/Ascii From Grid Component
(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
|
The 'Export to Excel, Ascii or Custom Format' Feature Pack allows
you to export data from a Grid component to a file that can then be
downloaded from the server to the user's machine where the file can be
saved to user's machine.
The Feature Pack allows you to:
Once the Feature Pack is installed, its functionality is exposed in two ways:
|
|||||||
V10FP7 | Image Upload
(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
|
The Image Upload Feature Pack allows you to upload images from the
user's machine to the server.
Here are some of the things you can do with the Image Upload Feature Pack:
Watch Video - Uploading Images - Part 1 Watch Video - Uploading Images - Part 2 Watch Video - Uploading Images - Part 3 Watch Video - Uploading Images - Part 4 Watch Video - Uploading Images - Part 5
|
|||||||
V10FP8 | File Upload
(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
|
The File Upload Feature Pack allows you to upload files from the
user's machine to the server.
Here are some of the things you can do with the File Upload Feature Pack:
Watch Video - 'File Upload' - Part 1 Watch Video - 'File Upload' - Part 2 Watch Video - 'File Upload' - Part 3
Watch Video - 'File Upload - User Defined' Advanced Example - Part 1 Watch Video - 'File Upload - User Defined' Advanced Example - Part 2 Watch Video - 'File Upload - User Defined' Advanced Example - Part 3 Watch Video - 'File Upload - User Defined' Advanced Example - Part 4
Watch Video - Uploading Files into the HTML Editor
Notice: At the time these videos were recorded, the builder for the 'File Upload - User Defined' action showed an 'Upload Folder' property. This property is no longer in the builder because it is not needed. The Xbasic event that fires after the files are uploaded is responsible for processing the uploaded files and this event can save the file in any location that you want. |
|||||||
V10FP9 | File/Image Download
(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
|
The File Download Feature Pack allows you to define an action for an event in your Grid (such as when a user clicks a button) that downloads a file from the server to the user's machine. Using the Feature Pack, you can:
|
|||||||
V10FP10 | Reports - Table of Contents, Bookmarks and Index
(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
|
This feature pack allows you to add the following features to
Reports that you create in Alpha Five:
You can completely customize the entries that are made in the Table of Contents, Bookmark section and Index. In addition, you can completely customize the layout of the Table of Contents section and Index section. The entries that appear in the Table of Contents, Bookmark section and Index are 'live' - if you click on an entry, you will be navigate to the appropriate page in the report. In addition, when you print the report to a PDF file, the Table of Contents, Bookmarks and Index are live.
|
|||||||
V10FP11 | Action Buttons in Grid Components
(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
|
The Action Buttons Feature pack allows you to add buttons to the
following parts of a Grid component:
|
|||||||
V10FP12 | Grid Component - Import Excel or Ascii Files
(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
|
The File Import Feature Pack allows you to add a button to a Grid component that will upload a file from the user's machine to the server and then import the data in the uploaded file. The following types of files can be uploaded:
The data in the uploaded file can be imported into:
|
|||||||
V10FP13 | Grid Component - Generic User-Defined Pop-up Window
(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
|
The 'Generic User-Defined Pop-up Window' Feature Pack allows you to
open pop-up windows on your Grid component. This is extremely useful in
creating highly customized user interfaces in your Grid. There are four different ways to populate the contents of the window. These are:
The pop-up window you create be:
|
|||||||
V10FP14 | Grid Component - Custom Help Windows
(Note: This Feature Pack is sold as an optional add-on in V10, but is included with V11.)
|
The Custom Help Windows Feature Pack allows you to create help windows for the Grid components in your Application.
Here are some of the things you can do with the Custom Help Windows Feature Pack:
|
|||||||
V11 Feature Packs - Calendar Control in a Dialog Component Back to top | |||||||||
Number | Category | Description | |||||||
FP11_CAL1 | Introduction to the Calendar Control for the Dialog Component. | This video introduces you to the Calendar control in the Dialog Component. Note: The control will only be available to you if you have the Feature Pack installed. The video shows how the calendar can be embedded into the Dialog and it shows several different use cases for the control. Watch Video |
|||||||
FP11_CAL2 | Using the Calendar Control in a Dialog for Setting a 'start' and 'end' Date. | This video shows how two Calendar controls can be placed in a Dialog component to prompt the user for a
start and end date. The video shows how you can use client-side programming against the calendar control
objects to automatically set the date in the calendar for the 'end' date when the user changes the start date, and how you can automatically
set the disabled dates in the calendar for the 'end' date when the user changes the start date. Note: The control will only be available to you if you have the Feature Pack installed. Watch Video - Part 1 Watch Video - Part 2 Download Components Used in Video |
|||||||
FP11_CAL3 | Displaying Events on the Calendar Control in a Dialog Component. | When the Calendar control is rendered, you can completely customize the HTML that is shown for each date in the Calendar by writing your own event handler
for the Calendar's onItemDraw event. In this video we show how we use this event to display the orders that were received on each day of the month. The video shows how we make an Ajax callback to a SQL database to get the orders for each month as the user navigates from month to month. The orders are then shown in the appropriate cell on the Calendar. Note: The control will only be available to you if you have the Feature Pack installed. Watch Video Download Components Used in Video These next set of videos are an in-depth look at the Javascript and Xbasic code that draws the orders on each day of the calendar. Watch Video - 1 Watch Video - 2 Watch Video - 3 Watch Video - 4 Watch Video - 5 Watch Video - 6 In this next video we show how you can open another Dialog showing details of the Order that was clicked on in the Calendar. Watch Video |
|||||||
FP11_CAL4 | Understanding How to Display Custom Information on the Calendar | In video FP11_CAL3 we show how you can display orders for a particular date on the Calendar control in a Dialog component.
In these videos we go into much more depth on how to actually use the Calendar control's onItemDraw and onMonthNavigate events and how to make the
Ajax callbacks to get the data from the database in the required JSON format.
Note: The control will only be available to you if you have the Feature Pack installed. Section 1 - Understanding the OnItemDraw event Watch Video - Part 1 Watch Video - Part 2 Watch Video - Part 3 Watch Video - Part 4 Section 2 - Understanding the Xbasic to get the orders for a given month in the required JSON format Watch Video Section 3 - Making Ajax callbacks to populate the Calendar Shows how an Ajax callback is made in the onMonthNavigate event to populate the Calendar when the user navigates from month to month. The same Ajax callback is also made in the onRenderComplete client-side event to populate the Calendar when it is initially rendered. Watch Video - Part 1 Watch Video - Part 2 Download Components Used in Video |
|||||||
V11 Feature Packs - Slider Control in a Dialog Component Back to top | |||||||||
Number | Category | Description | |||||||
FP11_SLIDER1 | Introduction to the Slider Control for the Dialog Component. | This video introduces you to the Slider control in the Dialog Component. Note: The control will only be available to you if you have the Feature Pack installed. The video shows how the calendar can be embedded into the Dialog and it shows several different use cases for the control. Watch Video - Part 1 Watch Video - Part 2 The Slider control can also be rendered in a larger format on a mobile device. Watch Video - Part 1 Download Components Used in Video |
|||||||
FP11_SLIDER2 | Using the Slider to set a 'Rating' Image Showing Number of Stars | A common metaphor in Web applications is to indicate a 'rating' by showing an image with stars.
This video shows how the slider control can be used to set the rating and show the appropriate 'stars' image. Note: The slider control will only be available to you if you have the Feature Pack installed. Watch Video These videos show how the Dialog components were set up. Watch Video - Part 1 Watch Video - Part 2 Download Components Used in Video |
|||||||
V11 Feature Packs - Dialog Component - Power Search for Grid using a Dialog Component Back to top | |||||||||
Number | Category | Description | |||||||
FP11_POWERSEARCH1 | Introduction to the 'Power Search' Feature Pack for the Dialog Component - Allows you to build a Powerful Search Part to Search a Grid that has been Embedded into a Dialog. | While it is easy to add a Search Part to a Grid, there may be situations where you want to create a much more sophisticated
Search Part for the Grid than the built-in Search Part allows. (See http://smartphones.findthebest.com/ for an example of a very sophisticated 'Search Part'). For example, you might want your 'search part' to be organized into collapsible 'accordion' panes and you might want users to be able to use sliders and calendar controls to enter their search criteria. Using the layout power that the Dialog offers, it is very easy to create extremely sophisticated layouts to prompt for search criteria. This video shows how you can use new actions in Action Javascript to submit the Dialog, compute a search expression from the submitted data, and then apply the search to a Grid that has been embedded into the Dialog. The net result being the ability to create an extremely powerful and flexible 'power search' part for your Grids. Note: The features shown here will only be available to you if you have the Feature Pack installed. This video shows an example of how a Dialog has been used to create a 'power search' part for an embedded Grid. Watch Video - Part 1 The next set of videos show how the Power Search part was created. Watch Video - Part 1 Watch Video - Part 2 Watch Video - Part 3 Watch Video - Part 4 Watch Video - Part 5 Download Components Used in Video |
|||||||
FP11_POWERSEARCH2 | Linking a Grid that is Embedded in a Dialog | In the previous videos we show how a Grid that is embedded into a Dialog can be searched. In this video, instead of searching the embedded
Grid we 'link' it. Linking is like searching, in that it causes the records in the target Grid to be filtered, but has a very important difference - the link fields in
the target Grid are automatically set to their corresponding value in the parent component. So, for example, if the embedded Grid is linked on (say) the 'invoice_number' field,
all new records that are added to the embedded Grid will automatically have their 'invoice_number' field set to the linking value.
See also video FP11_LIVELINK1 for information on how to create 'live links'. Note: The features shown here will only be available to you if you have the Feature Pack installed. Watch Video |
|||||||
V11 Feature Packs - Dialog Component - Record Navigation and Dialog Search Back to top | |||||||||
Number | Category | Description | |||||||
FP11_DLGNAV1 | Introduction to the Record Navigation and Dialog Search Feature Pack for the Dialog Component. | This video introduces you to the Record Navigation and Dialog Search Feature Pack for the Dialog Component. Using this Feature Pack you can easily add functionality to let you navigate from record to record in a Dialog Component that has been bound to a database. The videos show how you can implement First/Next/Previous/Last buttons to move from record to record, how you can add a slider control to navigate from record to record, or how you can add a List View control to the Dialog to show you a list of key values that you can click on to navigate to a particular record in your Database. You can also add a highly customized search part that allows you to enter search criteria so that when you navigate from record to record, you are only seeing records that meet your search criteria. Note: The control will only be available to you if you have the Feature Pack installed. Watch Video More complex example using a Dialog with Repeating Sections Watch Video Sorting the List View after editing a record in the Dialog (requires build 3915 or above) Watch Video Download Components Used in Video |
|||||||
FP11_DLGNAV2 | In Depth Demonstration on How The Record Navigation and Search Features in Video FP11_DLGNAV1 were implemented. | In these videos we go into detail on how to implement the Dialog Navigation and Search Feature pack as shown in video FP11_DLGNAV1. 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 Watch Video - Part 8 Download Components Used in Video The following additional functionality has been added to this feature (requires build 3915 or above) Watch Video |
|||||||
V11 Feature Packs - Dialog Component - Live Linked Embedded Grids Back to top | |||||||||
Number | Category | Description | |||||||
FP11_LIVELINK1 | 'Live' Linking a Grid that is Embedded in a Dialog | In video FP11_POWERSEARCH2 we show how you an apply a 'link' to a Grid component that is embedded into a Dialog. In this video we show how to define a 'live link'.
When you use the 'live link' feature, the embedded Grid is automatically refreshed any time a linking value in the parent Dialog is changed.
Note: The features shown here will only be available to you if you have the Feature Pack installed. Watch Video |
|||||||
V11 Feature Packs - Dialog Component - Advanced Tab Control Back to top | |||||||||
Number | Category | Description | |||||||
FP11_DLG_ADVTAB1 | Advanced Tab Control in the Dialog Component | The standard Tab control object in the Dialog allows you to group Dialog controls into a series of 'panes'. When the Dialog is run, the user clicks on a tab button to show the corresponding tab pane. However, clicking on a tab button is not the only way in which you might want to change the active pane. With this Feature Pack other methods for selecting the active pane are exposed.
The various ways in which the active tab pane can be selected are:
Note: The features shown here will only be available to you if you have the Feature Pack installed. In this video we give an overview of the Advanced Tab Control Watch Video - Part 1 Watch Video - Part 2 Download Components Used in Video |
|||||||
FP11_DLG_ADVTAB2 | In depth demonstration of how the timer features in the tab control in video FP11_DLG_ADVTAB1 was implmented. | This video shows how the timer feature that automatically cycles between a seriew of images was implmented
|
|||||||
V11 Feature Packs - Dialog Component - Power Search for Embedded Report Back to top | |||||||||
Number | Category | Description | |||||||
FP11_DLG_POWERSEARCHRPT | Power Search for Reports Embedded in Dialog Components | The Dialog Component can be used to create a 'Search Part' for a Report so that the end-user can enter search ctieria to define exactly which records to display in the report.
|
|||||||
V11 Feature Packs - Grid Component - Proximity Search Control Back to top | |||||||||
Number | Category | Description | |||||||
FP11_PROXSRCH | Using a Proximity Search Control to Search for Records within a Specified Radius of an Address, or Partial Address. |
A common type of application allows a user to find all store locations, doctors, etc. within a specified radius of a location. The location can be entered in full, or as a partial address (e.g. city, or zip code). Contrast this video with video GM13 which shows how the same problem can be solved in a different way using a map control in the Search Part. Requires Feature Pack and build 3568-3905 or above. Watch Video - Part 1 Watch Video - Part 2 Download Components Used in Video To use this component, you will need to install the sample SQL Server Airports database. |
|||||||
V11 Feature Packs - Dialog Component - Map Control Back to top | |||||||||
Number | Category | Description | |||||||
FP11_DLGMAP1 | Placing a Map Control on a Dialog Component | Shows how you can place a map control on a Dialog and set basic poperties of the map object.
Watch Video |
|||||||
FP11_DLGMAP2 | Displaying Driving Directions on a Map Control for a Starting and Ending Address and Adding a Marker to the Map. | When you place a map control on a Dialog you can call any of the various methods that the map object exposes.
There are quite a few different methods exposed by the map object. In this video we show how the .plotRoute() method can be used to
display a route and driving directions for a starting and ending address.
Watch Video In this next video we show how the .addMarker() method can be used to add a marker to the map. Watch Video
Important: In the video we show that the map object's .viewMarkers() method is called after the .addMarker() method is called. Actually,
the .viewMarkers() method should be called in the 'onAddComplete' callback event. This ensures that no attempt is made to show the marker
before it has actually been placed on the map. The 'onAddComplete' event in the settings object should be defined as follows: |
|||||||
FP11_DLGMAP3 | Tour of Methods Exposed by Map Control in Dialog Component | In the previous video we looked at the .plotRoute() and .addMarker() methods of the map object. In this video we take a quick tour of other methods exposed by the map object.
Watch Video - Part 1 Watch Video - Part 2 Download component used in video |
|||||||
FP11_DLGMAP4 | Adding Multiple Markers to a Map |
In this video we show how the map control's .addMarker() method can be called to add markers to the map. The example is based on the sample airports
database that contains a record for every airport in the United States. When the user selects a state from a dropdown box, an Ajax callback it made
and a query is performed to find all of the airports in the selected state. A javascript response is then computed on the server.
This response calls the .addMarker() method once for each airport in the state.
When the response is received by the browser, a marker is added to the map for each airport in the selected state.
Watch Video - Part 1 Watch Video - Part 2 Download component used in video Download sample airports database In this next video we show how the .addMarker() method can be used to add multiple markers to the map. (Requires addins build 4099 or above). |
|||||||
FP11_DLGMAP5 | Adding Multiple Markers to a Map - Advanced Example. |
This example extends the example shown in the previous video. When the user clicks on a marker we show how another Ajax callback can be made
to populate fields in the Dialog with information about the selected airport. The video shows how the markers are defined with the appropriate onClick behavior. In addition, when a particular marker is clicked, the markers for all of the airports in the state are removed and a single marker for the selected airport is shown. This marker is draggable, so if you move the marker, the latitude and longitude field for the airport are updated in the corresponding controls on the Dialog. Watch Video - Part 1 Watch Video - Part 2 Download component used in video Download sample airports database |
|||||||
FP11_DLGMAP6 | Geocoding Addresses and Showing Them on a Map |
This video shows an example of automatically geocoding an address when a record is edited and then plotting the address on a map.
The example also shows how a route that consists of multiple addresses ('waypoints') can be plotted. The example is based on a Dialog with a Repeating Section. The Dialog is bound to two tables: Driver and DeliveryAddresses. Each driver record is linked to multiple delivery addresses, which are shown in the Repeating Section. Watch Video - Part 1 Watch Video - Part 2 Watch Video - Part 3 Watch Video - Part 4 Watch Video - Part 5 Download component used in video |
|||||||
FP11_DLGMAP7 | Calling Methods of the Google Map Object Directly |
The methods of the map control that the previous videos have shown are wrappers around the underlying Google Maps api. Advanced programmers
might want to work directly with the Google Maps api. This video shows how you can do this. We show an example of how a marker can be placed on
a map using a method of the map control and then using direct calls to the Google Maps api.
Watch Video - Part 1 Watch Video - Part 2 |
|||||||
V11 Feature Packs - Dialog Component - Chart Control Back to top | |||||||||
Number | Category | Description | |||||||
FP11_DLGCHART1 | Placing Charts on a Dialog Component - Overview | This video gives an overview of the Chart control on a Dialog. The video gives a quick tour of some of the different types of charts that can be created.
Watch Video |
|||||||
FP11_DLGCHART2 | How to add a Chart to a Dialog Component |
This video gives a basic tutorial on adding a chart to a dialog. It demonstrates a very simple pie chart based on a static series. You can add multiple charts to a dialog to create 'dashboards'. The video shows how a second chart is easily added to the Dialog.
In the third video we show you you can apply some basic styling to the chart, such as changing the legend placement and the pie slice colors. Of course, this is only the tip of the iceberg in terms of the styling options that are available.
Watch Video - Part 1 Watch Video - Part 2 Watch Video - Part 3 Download component used in video |
|||||||
FP11_DLGCHART3 | How to base a chart on a Custom Series |
In FP11_DLGCHART1 we demonstrated a chart that displayed summary data from the sample Northwind database. In this video we explore this Dialog component in detail. First, we describe the concept behind the 'custom' series type. Watch Video Download component used in video In the next series of videos we go into an in-depth explanation of the code that makes the chart work. We discuss the custom SQL query that is used to get the data that the 'custom' series type will return. We show how the data that are submitted from the dropdown controls are used in the SQL query and we discuss how changing a value in either of the dropdown controls on the Dialog triggers an Ajax callback to refresh the chart. Watch Video - Part 1 Watch Video - Part 2 Watch Video - Part 3 Download component used in video |
|||||||
FP11_DLGCHART4 | Chart with Events |
When you interact with a chart, you can fire server-side and client-side events. In this example we demonstrate how a pie slice can be 'exploded' by double clicking on it. This involves both client-side event handling (in this case a double-click on a pie slice) and server side-event handling (in this case, refreshing the chart). Watch Video - Part 1 Watch Video - Part 2 Watch Video - Part 3 Download component used in video - explodedPie1.a5wcmp Download component used in video - explodedPie2.a5wcmp |
|||||||
FP11_DLGCHART5 | More on Chart Events |
In this video we show how chart events can be used to dynamically display additional information based on where the user has moved the mouse on the chart. In the example, we show a pie chart and we have a popup window that moves with the mouse when the mouse is over any pie slice. Watch Video - Part 1 Watch Video - Part 2 Download component used in video |
|||||||
FP11_DLGCHART6 | Calling a Simple Web Service to Get Chart Data - Stock Price Example |
In this video we plot stock prices using the 'stock price' chart style. The data is obtained by making a call to a RESTful Yahoo web service. Watch Video - Part 1 Watch Video - Part 2 Download component used in video |
|||||||
FP11_DLGCHART7 | Customizing the Chart Background and Labels |
This video shows how you can customize the chart background color, set format for data labels and control other aspects of the chart appearance.
Watch Video Download component used in video |
|||||||
FP11_DLGCHART8 | Plotting Multiple Data Series on a Single Chart | This video shows how you can plot multiple data series on a single chart. The series can all be plotted using the same series style (i.e. as bar charts or line charts, etc.) or you can mix chart types. For example series1 might be a line, while series2 might be a bar, etc.
Watch Video - Part 1 Watch Video - Part 2 Download component used in video - 1 Download component used in video - 2 |
|||||||
FP11_DLGCHART9 | Ajax Callback to Refresh a Series | There are different types of 'series' on which a chart can be based. A data series can be 'refreshed'. When a data series is refreshed, all of the charts that are bound to that data series are also automatically refreshed. Watch Video Download component used in video |
|||||||
FP11_DLGCHART10 | Understanding the Javascript Series Type | This video shows how the data that is plotted on a chart can be computed by a Javascript function. This is done by specifying that the data series on which the chart is based is a 'Javascript' data series. Because the chart data is computed by a Javascript function, the chart is only rendered after an ajax callback is made to refresh the chart.
Watch Video - Part 1 Watch Video - Part 2 |
|||||||
FP11_DLGCHART11 | Understanding the SQL/DBF 'Cross-section' Series Type |
In most cases when you plot data from a SQL or DBF table your tables are structures so that your query will return a series of values from multiple records, with each value representing a point in a data series. However, in some cases the data in your tables is structured in a 'cross-sectional' manner. In other words, the data that represents points in the data series that you want to plot comes from multiple fields in a single record, rather than from a single field in multiple records.
In order to create charts based on 'cross-sectional' data, you define your Data Series using either the SQL or DBF 'Cross-section' data series type. This video shows how the data series for this type of chart is defined. Watch Video Download component used in video Download DBF table used in component |
|||||||
FP11_DLGCHART12 | Plotting Time Series Values - Dates and Times | In some cases the data points that you want to plot on a chart are associated with specific date or date/time values. This video shows how XY type charts
can be used to plot this type of data.
Watch Video Download component used in video |
|||||||
FP11_DLGCHART13 | Exporting Charts to PDF or RTF Files | This video shows how the charts on a Dialog component can be exported to a PDF or RTF file.
(Requires build 2818- 3980 or above) Watch Video |
|||||||
FP11_DLGCHART14 | Splitting a Single Physical Series into Multiple Logical Series to Plot a Dynamic Number of Series on a Chart | This video shows you you can plot a dynamic number of series on a chart by splitting a single physical series into multiple logical data series.
(Requires build 2887- 3993 or above) Watch Video |
|||||||
FP11_DLGCHART15 | Defining Labels for each Bar in a Bar Chart. | By default, the label for each bar in a bar chart is the data value for the bar. In this video we show how each bar can have a descriptive label.
Watch Video |
|||||||
Xbasic Back to top | |||||||||
Number | Category | Description | |||||||
X1 | Defining Xbasic Classes that Inherit from a Parent Class | When you define Xbasic classes, you can define classes that inherit from a parent class. You can also
put classes in their own namespaces.
This video shows how you can define a class that inherits from a parent. It also shows how methods in a child class can call methods in the parent class from which it inherited. (Requires build 3158-4061 or above.) Watch Video |
|||||||
Application Templates Back to top (Requires build 2701-3932 or above.) | |||||||||
Number | Category | Description | |||||||
APP1 | Contact Manager Template | At the Web Control Panel, when you click the 'New Project' button, a dialog appears asking if you want to create an empty project, or if you want to start
with a template. Currenly only one template is available, but over time we expect to add additional templates. These videos explain how to install and publish the template and give a tour of the template features. Watch Video - Tour of the Contact Manager Template Application Watch Video - Creating an Application from a Template |
|||||||
Version 10 Videos Back to top (These videos were all originally recorded for V10. In most cases, they still apply to the current version, although in the current version there may be new, or easier ways of performing the task that is being demonstrated.) | |||||||||
Number | Category | Description | |||||||
1 | General | This video shows a basic Ajax component. It shows how easy
it is to create an Ajax Grid using the Grid builder. The video demonstrates
basic interaction with the Grid such as sorting, page navigation and changing
the number of record per page.
|
|||||||
2 | Searching | In these videos we will show the various types of search features you
can add to the Grid: - Search Part 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 they can pre-set a multitude of properties when you
create a new component.
This video shows how you can use Templates, and how you can define your own templates.
|
|||||||
34 | Edit-Combo Boxes - Dynamic Filtering | An earlier video (number 22) showed how you can create edit-combo
box controls in your Grid component. In this video we show how you add
dynamic filtering to your edit-combo boxes. With dynamic filtering, the
list of choices that are shown in the edit-combo box is filtered on the
value in some other control that you have filled in. For example, you
might have filled in MA into the State field. When you open the
Edit-combo, only cities in MA will be shown.
The dynamic filtering can be client-side, or server-side. If you choose the client-side option, then the edit-combo box is populated at render time with a complete set of data and then when you open the edit combo, Javascript is used to filter the data that is already in memory.
If you choose the server-side option, then when you open the edit-combo, an Ajax callback is made to populate the edit-combo box.
The edit-combo can be used in all parts of the Grid - i.e. Search, Grid and DetailView.
|
|||||||
35 | Grid with an Embedded Grid in a Cell | Grids are completely recursive. That means that Grids can be placed
inside other Grids, up to any depth that you want. In this example, we
have a simple Grid showing customers. One of the columns in the Grid
contains an embedded Grid showing the Invoices for that customer. This
embedded Grid, in turn, has a row expander. When you open the row
expander, it shows all of the invoice items for the selected invoice.
Normally, each cell in a tabular grid contains a single field. But in this example, instead of placing a single field in a column cell, we have placed an entire Grid.
|
|||||||
36 | Action Javascript - Lookup and Fill-in Action | The 'Lookup and Fill-in' action allows you to define a Javascript
event that will automatically lookup data in a lookup table and then
fill-in certain fields in the record you are editing.
This video shows how you can define a 'Lookup and Fill-in' action using Action Javascript. |
|||||||
37 | Client-side System Events | The Grid Component has a rich client-side event model. This video
shows how you can use client-side events to put up a simple
'Sorting....' message while the Ajax callback is taking place after the
user has clicked on a column heading to sort the Grid.
|
|||||||
38 | Using Arguments in the PageLayout and TabbedUI Components to Filter Records | You can define arguments in the PageLayout and TabbedUI builder.
Arguments allow you to filter the Grid and Reports shown in the
PageLayout or TabbedUI based on some external data (such as a session
variable, or page variable).
This video shows how you can put a button in a Grid to open a pop-up window. The pop-up window shows a PageLayout component that is filtered based on data in the current Grid row. A second button opens a pop-up window showing a TabbedUI component that is also filtered based on data in the current Grid row.
|
|||||||
39 | Using a Grid Component instead of a 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) (See also video 92) |
|||||||
63 | Customize Language in Date Picker | The strings for month and day names in the Date Picker can now be
customized. This feature also works with the <a5:r> language translation
tags, making it easy for your application to automatically use the
appropriate language strings for different users.
(Requires build 3530 or above) |
|||||||
64 | TabbedUI Component - Refreshing Parent Grid when child Grid tab pane is closed. | When you use Action Javascript to open a child Grid in a pop-up Ajax
window, you have always had the option in the Action Javascript builder
of specifying that the parent Grid should be refreshed when the
pop-window is closed. Now, if the parent Grid is running in the Tabbed
UI and your button opens the child Grid in a new tab pane in the Tabbed
UI component, you can specify that when the tab pane for the child Grid
is closed that the parent Grid should be refreshed.
(Required build 3535 or above) |
|||||||
65 | Linked Content Enhancements - Placing Linked Content into the Master Template | Linked Content Sections allow you to display a child Grid that is
linked to a record in a parent Grid (for example, showing invoice
line-items for a given invoice record). Previously, you could only place
the Linked Content sections in one of the Grid's Free-form Edit regions.
Now, you also have the option of placing the Linked Content in the
Grid's Master Template. This video explains the benefits of using this
new option.
(Requires build 3535 or above) |
|||||||
66 | User-defined Ajax Callbacks - Understanding what Information is Available to you when you write your Xbasic Callback Handler | Action Javascript allows you to define a user-defined Ajax callback.
Typically, you define an Xbasic function to handle the callback. This
video explains how you can use the Xbasic Debugger to explore what
information is available to you when you write the Xbasic Callback
Handler. It also explains how you can use Javascript to 'harvest' any
data on the page and pass that information back to the server as part of
your Ajax callback.
|
|||||||
67 | Tutorial on Path Aliases | In web applications, filename references are typically aliased (e.g
[PathAlias.ADB_Path]\Customer.dbf). The aliases are resolved using data
that is published in the a5_application.a5i file in the webroot. These
videos present a short tutorial on understanding aliases.
|
|||||||
68 | Reports - Using session variables in Reports | Session variables are used throughout web applications. You can
reference session variables in reports. This video show how you can
place a calculated field on a report to print out the value in a session
variable.
(Requires build 2830-3540 or above)
|
|||||||
69 | How to Pass Variables from a Parent Grid to a Child Grid | This video presents a short tutorial on how you can pass arbitrary
data from one Grid to another Grid.
|
|||||||
70 | Controlling the Position of Pop-up Ajax Windows | When you use Action Javascript to open a Grid, web page, or Report,
you are using a pop-up Ajax window to display the target object.
Previously you did not have control over where the pop-up window was
displayed. It was always centered when initially displayed, and then its
position was remembered for subsequent displays.
Now, there are several new options for controlling the position of these pop-up windows.
(Required build 2842-3541 or above) |
|||||||
71 | Customizing the Write Conflict Error Message | The Grid component uses 'Optimistic record locking' to prevent one
user from overwriting another user's edits when two users edit the same
record at the same time. The OnWriteConflict event handler allows you to
customize the Write Conflict error message.
(Requires build 2862-3542 or above) |
|||||||
72 | Duplicating an Existing Record | Sometimes when you are entering a new record into a database, it
would be great to be able to use the data from an existing record as a
starting point for the new record. This video shows how you can create a
button in your Grid that fills in the data in the new record row with
data from the current record.
|
|||||||
73 | Client-side Xbasic | Typically the HTML events in a Grid (e.g. onClick, onChange, onBlur,
etc.) are handled using Javascript. But in the case where the Grid is
running on the Desktop in a Desktop application (which includes 'Working
Preview' mode), you can actually use Xbasic functions to handle these
HTML events.
This is an extremely powerful feature for users who incorporate the Grid component into their Desktop applications. (Requires build 2877 - 3543 or above) |
|||||||
74 | Printing Reports from a Grid in Working Preview mode |
Previously, if you added a button to a Grid component to print a Report,
the report would only render if the Grid (Requires build 2877 - 3543 or above)
|
|||||||
75 | Using an Auto-suggest instead of a Dropdown Control - 'Coded Lookups' |
A very popular feature of a Dropdown control is that it allows you to
store an 'id' value, but display a text value. For example, in an Order
Items table, you might store the 'product id' value, but display the
corresponding 'product name' field. When the user is editing data they
can select from a list of product names, which is obviously much easier
than having to enter a product id.
A significant drawback, however, of using dropdown controls is that the list of choices for the control has to be loaded when the Grid is loaded. If the list is small, then this does not represent a problem. However, what if the list is extremely large? This would cause a significant slowdown in loading the Grid. If the Grid displayed multiple rows, then the problem is even worse because the list will be downloaded for each row in the Grid!
These videos show a technique where the auto-suggest control is used
rather than the dropdown control. The user still enters a product name
and the corresponding product id gets stored in the table. Because the list of choices does not have to be loaded up front, the Grid will load much more quickly, and then when a list of choices is presented to the user, it is pre-filtered based on the characters the user has already typed into the field.
|
|||||||
76 | Currency Symbols from any Country in the World |
This video shows how you can easily format currency data in a web
application to use the currency symbol from any country in the world.
The video demonstrates both server side and client side formatting of the data. The second video demonstrates how you can print reports with international currency symbols.
|
|||||||
77 | Customize SQL Error Messages |
In a Grid component against a SQL database, when you do an Insert,
Update, or Delete, the SQL Database might send back an error. Typically
the error message is not very friendly. The new onSQLExecuteError event
allows you to intercept the error and show a friendlier error to the
user.
(Requires Version 10.5) |
|||||||
78 | Customizing SQL Insert, Update and Delete Statements - Using Stored Procedures to Update your Database |
In a Grid component that is based on a SQL database, the Insert, Update
and Delete SQL statements that are executed when a user inserts, updates
or deletes a record are automatically computed by Alpha Five.
In some cases, a user might want more control over how these SQL statements are executed, or might want to use stored procedures to insert, update or delete records. The onBeforerSQLCommandExecute and onAfterSQLCommandExecute server side events allow you fully customize the SQL statements that the Grid executes in order to insert, update or delete records.
In addition, another common use for these events is to update some
other table at the same time as the update is being performed in the
tables the Grid is based on. For example, you might want to add a record
to a log table. When you perform updates against some other table as part of our update, insert or delete, you might want to wrap the entire operation into a single transaction. This is easily done by starting a transaction in the onBeforeSQLCommandExecute event and then either committing or rolling back the transaction in the onAfterSQLCommandExecute event.
These videos discuss these new events.
(Requires Version 10.5) |
|||||||
79 | Setting Default Values in the Search Part and Automatically Searching the Grid |
In the case where you have a Grid with a Search Part, you might want the
Grid to open with the Search Part already filled in with default search
values. And furthermore you might want to actually submit the Search
Part so that the user's initial view of the Grid is a filtered view
based on the Search Part's default values.
|
|||||||
80 | Customizing the Layout of the Detail View Toolbar - Adding and Removing Buttons |
You have always been able to customize the icons and bubble help that
are displayed in the Detail View toolbar. Now you can completely
customize the layout of the toolbar. You can eliminate any of the
standard buttons if you want, or add your own buttons to the toolbar.
|
|||||||
81 | Using GUIDs (Unique Identifiers) as a Table's Primary Key. |
A GUID (Globally Unique Identifier) is an ideal choices for the Primary
Key of a record. This video shows how you can easily build a Grid
component on a table that has a GUID as its primary key. The video
demonstrates how you can assign the GUID value to the primary key field
in the new records that you create in the Grid component. The video shows
how a SQL table is used, but the technique applies equally well to
native Alpha Five .dbf tables.
|
|||||||
82 | Power Searches in the Search Part of the Grid Component |
The Search Part of the Grid component supports a special syntax that
allows you to do powerful searches for ranges of records, to search for
multiple different values in a field, and to use the special ..
operator.
This video demonstrates how you can use the Search Part to perform powerful searches.
|
|||||||
83 | Search Part - Multi-Value Fields - Checkboxes and Multi-line Dropdownboxes |
The checkbox control and the dropdown box control (when configured
appropriately) allow multiple values to be selected. When you use a
multi-value control in the Search Part of a Grid component, you can now
specify if multiple selected values should be combined with an AND or
and OR clause.
The video demonstrates the significance of this new option. |
|||||||
84 | Using Custom Javascript Functions in Client-Side Expressions. |
This video shows how you can use custom Javascript functions in
client-side calculations. Client side calculations include calculated
fields, show/hide expressions, enable expressions, conditional image and
conditional style calculations. When you write these expressions you can
use any custom Javascript functions that you create. This is an
extremely powerful feature because it allows you to create very complex
client-side calculations, using the full power of the Javascript
programming language.
In the video, a custom Javascript function is defined to compute the number of minutes between to date/time values.
|
|||||||
85 | Custom Ajax Callback - an In-depth Example |
This series of videos shows an in-depth example of a custom Ajax Callback. The video shows how a record in the Grid can be deleted. Before the record is deleted a callback is made to the server to see if the user is allowed to delete the record. If so, then custom SQL commands are executed (using AlphaDAO). The videos then show how the action can be enhanced by prompting the user for confirmation after it has been determined that the user is allowed to delete the record.
In a desktop application prompting the user for confirmation is simple because there is no concept of server-side and client-side code execution that you need to be aware of. But in a Web application, the act of prompting the user for confirmation when a server-side event is executing is more complex because the prompt has to be executed client-side. The video shows how the callback is divided into two separate callbacks, and how the confirmation prompt is executed on the client-side.
If you want to run this component for yourself, you can download the Grid component. You will need to change the connection string to point to the sample Alphasports.mdb file in the Alpha Five V10 program folder in the MDBFiles sub-folder.
|
|||||||
86 | Moving a Button from the Grid Row to the Navigation Bar or Free-form Edit Region |
When you place a button in a Grid row, the button repeats for every row
in the Grid. You might prefer to put the button in the Grid's Navigation
Bar, or in a free-form edit region. This video shows a simple technique
for putting button in the Navigation Bar or free-form edit regions.
(Note: The techniques shown in this video are no longer necessary if you have the Action Buttons Feature pack, which automates the process of placing buttons in the Grid toolbar.) |
|||||||
87 | Using the 'Checked column' in a User-defined Ajax Callback |
When you design a Grid you can specify that the Grid should show a
'checkbox' column to allow the user to select multiple rows in the Grid.
When you define a custom Ajax callback, the callback includes
information about the primary key of each row that was checked. This video shows how you can create a custom Ajax callback to apply a filter to the Grid to show only the records that the user checked.
(Note: Many of the techniques shown in this video are now available through built-in Grid features - see video 88. However, the techniques shown here are still interesting as they demonstrate useful concepts.) |
|||||||
88 | Using the 'Checked column' in a Grid Component |
These videos show several different ways in which the 'Checked column'
in the Grid can be used. (Requires build 3341-3597 or above)
|
|||||||
89 | Exporting Checked Records to Excel |
This video shows how you can allow the user to select an arbitrary
number of records by checking the checkbox selector for a record, and
then exporting those records to Excel.
Note: To duplicate the functionality shown here you need the Export to Excel and Action Buttons Feature Packs.
|
|||||||
90 | Using Javascript to total values in a Column for the Checked Rows |
This video shows how you can create a running total of the values in a column of the Grid. When a row is checked, the vaule in the column is added to the running total. When the row is unchecked, the value in the column is deducted from the running total. |
|||||||
91 | Using a User-defined Ajax Callback to add records to a 'Transaction Table' |
This video shows how you can create a user defined Ajax callback to add
records to a transaction database. The video assumes that the
transaction database is a SQL database, but the principles are the same
for .dbf tables. The new record in the transaction table is populated with data from the current row in the Grid.
|
|||||||
92 | Refreshing the 'parent' Grid when an event occurs in a 'child' Grid |
This video shows how you can trigger a refresh of a row in a 'parent'
grid when some event happens in a 'child' grid. The video show a Grid
based on the 'Customer' table that has a Linked Content Section showing
a Grid based on the 'Invoice_Header' table. (The 'Customer' Grid is
therefore the 'parent' of the 'Invoice_Header' Grid.)
When a record in the 'Invoice_Header' Grid is saved, the AfterUpdateRecord event handler makes a change to the parent record in the 'Customer' table and then forces the 'Customer' Grid to refresh in order to show the change.
(See also video 62) Note: If you have build 3906-3632 or above, the technique described in the video to avoid using the {Grid.object} placeholder is no longer necessary. |
|||||||
93 | Tab UI - Warning before Closing a Tab Pane - Custom Coding |
When you open a Grid component in a Tabbed UI pane, if you then try to
close the tab pane when the Grid is dirty, you get a warning that the
Grid is dirty and you have to either save the Grid or abandon the
changes. This behavior is 'built-in' to the Tabbed UI. However, if you open an .A5W page in a Tabbed UI pane (that contains a Grid, or multiple Grids, for that matter), there is no built-in checking before a Tabbed UI pane is closed. These videos show how you can you own custom coding to trap if the Tab pane is 'dirty' and prevent it from closing.
The code works by setting an arbitrarily named property of the Tabbed UI object called 'gridIsDirty' |
|||||||
94 | Using Grids in Desktop Applications - Passing Data from the Grid to Xbasic |
A power feature for developers who are building Desktop application is
the ability to use Grid components in their Desktop applications. This
video, which was made in response to a specific question from a
developer, shows how to set a global Xbasic variables from a field in
the Grid component.
|
|||||||
95 | Opening Tab Panes automatically when a Tabbed UI Component is Opened |
When a TabbedUI component is opened, the Home tab is displayed. In this
video we show how you can automatically open any number of Tabbed UI
panes when the Tabbed UI Component is first opened.
|
|||||||
96 | Showing a value in the Grid only for the current row and hiding the value when the row does not have focus. |
Assume that you have a Grid with multiple columns. Let's say you only
want to display the value in one of the columns for the row that has
focus. In other words, the value in this column will be hidden for all
rows, except for the row that has focus. These videos show two different
ways in which you can write the Javascript to accomplish this:
|
|||||||
97 | Action Buttons - Programmatically Clicking a Button using Javascript |
This video shows how you can use Javascript to 'click' an Action Button.
|
|||||||
98 | Positioning a Grid's Linked Content Sections Precisely |
Say you have a Grid which displays a child Grid in a Linked Content
Section. Assume that the child Grid also has a child Grid in a Linked
Content Section. So, when the top level Grid is displayed, there are
actually three Grids visible - parent, child and grand child.
|
|||||||
99 | Enabling or Hiding an Action Button if No Records in Current Query |
This video shows how you can enable or hide an Action Button if there
are no records in the current Grid query.
|
|||||||
Understanding Server-side Events in a Grid Component Back to top | |||||||||
Number | Category | Description | |||||||
SSE2 | After Validate Events | These videos explain the various events that fire after data is
successfully saved in the database.
|
|||||||
SSE3 | Redirect Event | These videos explain how the redirect event can be used to
dynamically compute a redirect target after data is committed.
|
|||||||
SSE4 | Render Events | These videos explain how the various 'onRender' events can be used
to inject custom HTML into the Grid as it is rendered.
|
|||||||
SSE5 | 'OnSearchPartFilterCompute' Event | These events show how you can use the 'OnSearchPartFilterCompute'
event to customize the way the search filter is computed from the data
that is submitted when the user submits the Search Part.
|
|||||||
SSE6 | BeforeSearch events. | These videos show how you can use the BeforeSearch events.
|
|||||||
SSE7 | OnSummarySectionRender Event | These videos show how you can use the 'OnSummarySectionRender' event
to completely customized the summary section of the Grid and inject your
own calculated fields into this section.
|
|||||||
SSE8 | RowExpander Events | These videos show how you can create a custom row expander to
display any content you want when a row is expanded. We also demonstrate
how you can control which rows display the 'expand row' icon.
|
|||||||
SSE9 | OnGridInitialize and OnGridExecute Events | This video explains how you can use the OnGridInitialize and
onGridExecute events.
|
|||||||
SSE10 | Customize SQL Error Messages |
In a Grid component against a SQL database, when you do an Insert,
Update, or Delete, the SQL Database might send back an error. Typically
the error message is not very friendly. The new onSQLExecuteError event
allows you to intercept the error and show a friendlier error to the
user.
(Required V10.5) |
|||||||
SSE11 | Customizing the Write Conflict Error Message | The Grid component uses 'Optimistic record locking' to prevent one
user from overwriting another user's edits when two users edit the same
record at the same time. The OnWriteConflict event handler allows you to
customize the Write Conflict error message.
(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) |
|||||||