Alpha Anywhere 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

UX Component

UX Component - Managing Data in the Security Framework

Calendar Component

Custom Component

Image Gallery Component

Video Player Component

Reports

Web Component Style Builder

Desktop Applications

Optional V10 Feature Packs - Now Included as Part of V11

V11 Feature Packs - Calendar Control in a UX Component

V11 Feature Packs - Slider Control in a UX Component

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

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

V11 Feature Packs - UX Component - Live Linked Embedded Grids

V11 Feature Packs - UX Component - Advanced Tab Control

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

V11 Feature Packs - Grid Component - Proximity Search Control

V11 Feature Packs - UX Component - Map Control

V11 Feature Packs - UX Component - Chart Control

Xbasic

Application Templates

Version 10 Videos

Understanding Server-side Events in a Grid Component

Grid Component

UX Component - List Control

Application Server

Tabbed UI Component

UX Component - Mobile

UX Component - PhoneGap

UX and Grid Component

Interactive Window

Web Security Framework



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.

 

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

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

Watch Video

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.

 

Watch Video

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:

Watch Video

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.

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video

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.

Watch Video

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.

 

Watch Video - Part1

Watch Video - Part 2

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.

 

Watch Video

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.

Watch Video

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.

Watch Video

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.

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

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.

Watch Video

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.

 

Watch Video

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.

Watch Video - Part 1

Watch Video - Part 2

 

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video - Part 1


Watch Video - Part 2

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

 

Watch Video

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.

 

Watch Video

M24 Detail View - Animation Regardless of where the Detail View is shown, it can be animated. This includes the 'OnPage' and 'InGrid' options.

 

Watch Video

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.

 

Watch Video

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.

Watch Video

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.

Watch Video

 

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.

Watch Video

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.

 

Watch Video

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

Watch Video

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.

Watch video

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.

 

Watch Video

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.

 

Watch Video

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

Watch Video

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.

Watch Video - Part 1

Watch Video - Part 2

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)

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

 

(Requires build 3816 or above)

M38 Tabbed UI on Mobile Device A very common pattern when building Web Applications in Alpha Anywhere 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.

 

Watch Video

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

Watch Video

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.

 

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

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

 

Watch Video

M43 Understanding Global Javascript Variables and the 'Window' Namespace

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

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

Watch Video 1
Watch Video 2

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.

Watch Video

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
In the previous videos we show how state information is defined in the Grid (UX in V12) component. In the next videos we show the same concept applied to the Grid component. In the case of the Grid, however, there is a subtle different - on Ajax callbacks, the state variables are in the 'e.__si2' object (and not the e._state object as for the Dialog). Setting state variables however, is the same in both cases.

NOTE:Settings state variables in Xbasic code by setting values in the e._state object requires V12, build 4196 or above.

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

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

 

Watch Video

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.

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

Watch Video

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.

Watch Video 1

Watch Video 2

Watch Video 3

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.

 

Watch Video 1

Watch Video 2

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.

 

Watch Video 1

Watch Video 2

Watch Video 3

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 Anywhere automatically generates the Portable SQL to query the database. The video demonstrates both 'location' and 'radius' searches.

 

Watch Video - Part 1

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.

Watch Video - Part 2

Watch Video - Part 3

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.

 

Watch Video

 

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

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

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.

 

Watch Video

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

 

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video

 

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

 

Watch Video

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

 

Watch Video

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.

Watch Video

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.

 

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

D5 Dialog Component - Copying Controls from one Component to Another This video shows how you can copy controls from one Dialog component to another.

 

Watch Video

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.

Watch Video - Part 1

Watch Video - Part 2

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)

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

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

Validating data in a Repeating Section

Watch Video - Repeating Section - Part 1

Watch Video - Repeating Section - Part 2

In this video we show how the visual effects used in the sample dialogs shown in the above videos were created.

Watch video

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.

Watch Video

Watch Video

 

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

Watch video - part 1

Watch video - part 2

 

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.

Watch Video

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

Watch video - part 1

Watch video - part 2

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.

Watch Video

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.

 

Watch video

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.

 

Watch Video

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.

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video

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)

 

Watch Video

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.

 

Watch Video

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)

Watch Video - Part 1

Watch Video - Part 2

 

Download component used in video

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

 

Watch Video

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

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

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)

Watch Video

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

 

Watch Video

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

 

Watch Video

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

 

Watch Video

 

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

Watch Video

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

 

Watch Video- Part 1

Watch Video- Part 2

 

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

 

Watch Video

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.

 

Watch Video

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)

Watch Video

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)

Watch Video - Part 1

Watch Video - Part 2

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)

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

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.

 

Watch Video

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

 

Watch Video

(Requires build 3854 or above)

D37 Opening a Component and then Executing Javascript Code in the Target Component - Circumventing the Asynchronous Nature of Ajax Callbacks.

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

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


Watch Video 1
Watch Video 2

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 Anywhere. 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:
  • Before/After Insert
  • Before/After Update
  • Before/After Delete
  • OnRowRefresh


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
Addendum: The above video was recorded before support for 'ContainerWidth' layout mode was added. Now, Dialogs support both 'ControlWidth' and 'ContainerWidth' layout mode. The default is 'ContainerWidth'. If the Dialog is set to use 'ContainerWidth' mode, then justifying the buttons is substantially easier, as is shown in the video:
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

In the previous videos we show how state information is defined in the Grid (UX in V12) component. In the next videos we show the same concept applied to the Grid component. In the case of the Grid, however, there is a subtle different - on Ajax callbacks, the state variables are in the 'e.__si2' object (and not the e._state object as for the Dialog). Setting state variables however, is the same in both cases.

NOTE:Settings state variables in Xbasic code by setting values in the e._state object requires V12, build 4196 or above.

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
UX_V12--1 Edit-combo and Auto-suggest Edit-Combo and Auto-Suggest controls now expose a new method to allow you to call Javascript to dynamically style the data shown in the list. Watch video   Watch video 2

Note: Also applies to the Grid component.
UX_V12--2 Very Basic Programming Concepts - The 'Hello World' Example Many books that teach programming languages start with the ubiquitous 'Hello World' example in which they teach you how to put some text on the screen. In this video we show you how you can write text to a label control on the UX component. The example is very simple, and you can think of it as the 'Hello World' example of the UX component.

The video then goes a little further and shows how data can be read from a List control to compose the message that is put in the label.

Watch Video - Part 1
Watch Video - Part 2
UX_V12--3 Tutorial Explaining Panel Layouts, Panel Navigators and Panel Cards 'Panels' are the essential building blocks for mobile applications. The UX Component builder allows you to add three types of Panels to your components - Panel Layouts, Panel Navigators and Panel Cards.

This video is a tutorial explaining the concepts behind these new UX component controls.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4
Watch Video - Part 5
UX_V12--4 Chart Control Charts - You can now control data point colors at the individual data series level. For example, if a chart plots more than one data series, you can define data point colors for each data series in the chart.
Watch Video    Read Transcript
Download Component 

Note: Also applies to Reports
UX_V12--5 Pop-up Javascript Windows Pop-up Javascript Windows - You can now specify that pop-up Javascript windows should be docked to a side of the screen. Docked windows remain visible even when the page is scrolled.
An example of where docked windows might be useful is in a shopping application where the docked window shows the shopping cart and remains on the screen as the user scrolls on the page to add items to the shopping cart.
Another example would be to display instructions that must always be visible as the user scrolls the page.

Note: Also applies to the Grid component.

Watch video    Read Transcript
UX_V12--6 Mobile Window Styles - Action Sheets and Panel Windows UX Component - Specialized Window Styles for Mobile Applications - When building mobile applications a common pattern is to create 'Action Sheets' and 'Panel Windows'. These types of windows are easily created using the standard Javascript Window object in the Grid and UX component builders. When you are working in the Window builder a genie allows you to quickly configure the window so that it exhibits specialized behaviors.

Watch Video    Read Transcript
UX_V12--7 Data Bound Images Previously, in a UX Component that was bound to a table, you could not bind image fields to images in the table. This is now possible.

There are several important options available to you when you bind an image field to a table. You can specify that the image data should be embedded directly in the HTML (as a base64 encoded value), and you can scale images on the server before rendering the HTML.

Watch Video
Read Transcript


Images in Repeating Sections can also be data bound. Watch Video   Read Transcript
UX_V12--8 Image Upload Previously, the UX Component did not support Image Upload. (Image Upload was only supported in the Grid Component).

Now, the UX Component has a powerful Image Upload feature. Watch Video

Images can even be uploaded to Image fields in Repeating Sections. Watch Video
UX_V12--9 Image Upload to an Image Control that is Not Data Bound When you upload an image in a UX component, you often are uploading to a 'data-bound' image control. However, it is not required that the Image control to which you upload be data bound. In fact there are many use cases where you want to upload an image and then in your AfterDialogValidate event handler, process the uploaded binary data as you see fit.

In this video we show how you can upload images to a non-data bound image control.

Watch Video - Part1
Watch Video - Part 2
UX_V12--10 Text Dictionary Tags Previously, language tags were used to internationalize a component. For example, by setting a control label to:
<a5:r>Label1</a5:r>
you could look up the string replacement for Label1 from a "Language Definition" that was stored as part of the component.

Now, in addition to the 'language' tag, a new type of tag is available, the 'text dictionary' tag can be used to lookup the tag definition in a SQL table - the 'Text Dictionary Table'. This makes it much easier to internationalize your application.

Note that text dictionary tags are not limited in their use to internationalizing applications. They can be extremely useful for displaying dynamic content in an application. The content shown in the application is retrieved at run-time by querying the SQL Text Dictionary database.

Watch Video - Part 1
Watch Video - Part 2

Editing Text Dictionary Entries
Watch Video

Note: Also applies to the Grid component.
UX_V12--11 Locator icons for Panel Navigator When using a Panel Navigator, a common practice is to display small icons that represent your position in the navigator. For example, the icons indicate which Panel in the Navigator currently has focus.

Watch Video
UX_V12--12 In-control buttons for Textbox Controls Textbox controls can have 'in-control' buttons and icons. This is a very common pattern seen in mobile applications, but is also quite useful in desktop web applications.

Watch Video
UX_V12--13 Deleting a Record in a Data Bound Component In a UX component that has been bound to one or more tables, you can now delete a record from the primary table to which the UX component has been bound.

Watch Video
UX_V12--14 'Conditional Object' - Displaying a different set of controls on the UX component based on a condition. A common requirement when building a user interface is to display one set of controls in a region of the screen if a condition evaluates a particular value, another set of controls in the same region on the screen if the condition evaluates to another value, and so on.

Using the 'Tab control' , and configuring the 'method for selecting the active Pane' to 'Automatic', this is easily achieved.

Watch video
UX_V12--15 Fixed Position Content when Using Panels - 'PanelOverlay' Containers Normally all controls in a UX component are positioned 'relatively'. However, when using Panels, there may be situations where you would like some content to be positioned in a fixed position. This is easily achieved by placing the content into a Container and then setting the container type to 'PanelOverlay'. A 'PanelOverlay' always 'floats above' the rest of the content on the screen and has a fixed position relative to the top, left, bottom and right of the visible Panel.

Watch video

Download component
UX_V12--16 Tree Control The UX component supports a very powerful tree control. The tree can be populated statically (with a items defined at design-time), or dynamically by executing an Xbasic script that generates the tree values.

This video shows how you can add a tree control to a UX component and it shows the various method for populating the tree.

Watch video - 1
Watch video - 2
Watch video - 3
UX_V12--17 Tree Control - Understanding how the tree control has a 'value' that can be set and read like other Data Controls The tree control is like other 'data' controls (such as textbox, radiobutton, checkbox etc). in that it is bound to a variable and by using the .getValue() and .setValue() methods on the variable, you can control the current selection in the tree.


Watch Video
UX_V12--18 Tree Control - How to Dynamically Repopulate on an Ajax Callback The tree control can be dynamically re-populated at any time by calling the tree object's .populate() method. In this video we show how an Ajax callback can be made to compute new data for the tree and how the Ajax callback sends back the Javascript commands to repopulate the tree.

Watch video

In this next example, we populate the tree with data from the Customers table in Northwinds.

Watch Video
UX_V12--19 Menus - Displaying pop-up menus when the user clicks a button When the user clicks on a button, you can display an pop-up menu with different choices. The menu can be arbitrarily complex, with multiple levels. Each node in the menu can execute a Javascript script when clicked. This video shows how Action Javascript can be used to define an action to display a pop-up menu.

In this video, the choices in the menu are defined at design-time using the Menu Builder. The Menu Builder provides an easy to use editor for constructing your menus. There are other ways in which the menu contents can be defined. These alternative methods (which are well suited to dynamically generating menu definitions) are discussed in subsequent videos.

Watch Video - 1
Watch Video - 2

Note: Also applies to the Grid component.
UX_V12--20 Populating Menus using a JSON String or an Xbasic Function The choices in the menu can be specified by a JSON string that defines the menu or by executing an Xbasic function that dynamically computes the menu choices.

In this video we show how these two options can be used.

Watch Video

Note: Also applies to the Grid component.
UX_V12--21 Menus - Advanced features - Menus can include forms, buttons, etc. Menus can be much richer than just a list of items. For example, menus can include forms, buttons, radio and check items, etc.

In order to create a menu that uses these advanced features, you must use the JSON method of populating the menu. This video gives a tour of the various options that are available.

Video1
Video2
Video3
UX_V12--22 Button List Control The Button List control is extremely useful in mobile applications. It displays a set of buttons in either a vertical or horizontal orientation. The user can select one or more buttons in the list.

The buttons in the Button List can either be statically defined at design time, or can be populated with the results of a database query.

In this video we show how the Button List can be placed on a UX component and how the choices in the Button List are defined.

Watch video - 1
Watch video - 2
UX_V12--23 Button List Control - Setting the Active Pane in a Tab Control A common use for a Button List control is to use it to set the active pane in a Tab Control. This pattern is very similar to the way in which tabbed content is shown in iOS applications.

In this video we show how a Button List is used in a UX component with a Tab Control. By selecting a button in the Button List, the active tab pane is set.

Watch video
UX_V12--24 RadioButton and Checkbox Controls - Displaying as Button Lists In mobile applications, the standard HTML radiobutton and checkbox controls are not optimal for touch events. The UX builder makes it very easy to use the Button List control instead of a the standard HTML controls.

In this video we show how this is easily done.

Watch Video
UX_V12--25 Synchronous Script Execution Ajax callbacks execute 'asynchronously'. That means that if you have defined an Action Javascript script with a series of actions (such as 'open grid 1', 'open grid 2', etc.), the actions run in parallel, not sequentially. In many cases you will want the actions to run sequentially, and this video demonstrates how you can easily convert an Action Script from asynchronous execution to synchronous execution.

Watch Video

Note: Also applies to the Grid component.
UX_V12--26 Pop-up windows - Pointers When a pop-up widow is displayed (for example to show a Grid, UX component, Report, Menu, etc.), you can specify that the pop-up window has an icon that 'points' to the element that opened the window.

Watch video

Note: Also applies to the Grid component.
UX_V12--27 Understanding the a5_xb_runGridComponent() Function The a5_xb_runGridComponent() Function is a new technique for running a Grid component on an Ajax Callback or in a <%a5..%> codeblock in a component. The video describes what the function does and how it is different from using standard Action Javascript techniques for running a Grid component.

Video 1
Video 2
Video 3

Note: Also applies to the Grid component.
UX_V12--28 Understanding the a5_xb_runGenericComponent() Function The a5_xb_runGenericComponent() Function is a new technique for running a UX, or PageLayout component on an Ajax Callback or in a <%a5..%> codeblock in a component. The video describes what the function does and how it is different from using standard Action Javascript techniques for running a UX or PageLayout component.

Watch video

Note: Also applies to the Grid component.
UX_V12--29 Understanding the a5_xb_runReport() Function The a5_xb_runReportt() Function is a new technique for running a Report on an Ajax Callback or in a <%a5..%> codeblock in a component. The video describes what the function does and how it is different from using standard Action Javascript techniques for running a Report.

Watch video

Note: Also applies to the Grid component.
UX_V12--30 Google Visualization Controls You can now easily use the Google Visualization API in a UX component. For example, in this video we show how to put a gauge and geomap on a UX component.

Watch video   Read Transcript
Download component
UX_V12--31 Lookup Grid - Dynamically Specifying the Name of the Lookup Grid at Run-time The Lookup Grid feature is a powerful way of displaying the available options for a user to select from when filling in a field in a UX component. Previously the name of the Lookup Grid had to be specified at design time. Now, you can specify a Javascript function that will be called at run-time to return the name of the Grid to show in the Lookup Window.

Watch Video
UX_V12--32 Testing on a Phone or Tablet This video shows how you can test the component that you are designing on a remote device (e.g. a phone or tablet).

Watch Video

Note: Also applies to the Grid component.
UX_V12--33 Quick Panel Genie The Quick Panel Genie allows you to quickly create complex Panel Layouts.

Watch Video
UX_V12--34 Map Control - Action Javascript Actions New actions have been added to Action Javascript to allow you to perform actions on a map control without having to write your own Javascript code.

In this video we show how you can add a marker to a map.

Watch video
Watch video2

In this video we show how you can add bulk markers to a map. When the user selects a state from a dropdown box, we show how to put a marker on the map for each airport in the selected state.

Watch video
UX_V12--35 Drag scrolling In a Section of the Screen Drag-scrolling is central to mobile applications. A common design requirement is to display long content in a scrollable section of the screen.

In this video we show how you can put content in a Container control and then turn on drag-scrolling for the Container.

Watch Video
UX_V12--36 Advanced Export - Using Report Definition Prior versions of Alpha Anywhere have supported exporting data from a Grid component to either Excel or Ascii files. The data was exported as a simple, unformatted table of raw data.

Now, a new type of export is available. You can use a Report Definition to specify the format for an export operation. Data can be exported to Excel, Word, Ascii, HTML or PDF.

Watch video

Note: Also applies to the Grid component.
UX_V12--37 Styling Controls using Sub-Themes When you select a style for a component (for example 'iOS'), all of the controls (e.g. buttons, labels, etc) are styled in a certain way. The style definitions actually contain multiple different definitions for certain controls. For example, a button can be styled as a 'confirm', 'deny', 'navigate back', or 'navigate next' button, simply by selecting the appropriate 'sub-theme'.

It is also possible to add your own 'sub-themes' to a style definition.

In this video we introduce the concept of style 'sub-themes'.

Watch Video - 1
Watch Video - 2
UX_V12--38 A 'behind the scenes' Look at Sub-Themes This video is for advanced developers who are interested in how sub-themes are actually implemented. Knowing how sub-themes are implemented makes it very easy to add you own sub-themes to a component style.

Watch Video
UX_V12--39 CRUD Operations (CReate, Update, Delete) in an Unbound UX Component The built-in Server-Side action to save data to table(s) when a UX component is saved is very powerful, but it requires that the UX component first be 'data bound'.

In some types of application you may want to submit some fields to one table and other fields to another table, and so on. In this case, you could not use the built-in server-side 'Save Submitted Data to Table(s)' action.

A new action in Action Javascript allows you to perform Update, Inserts and Delete operations against any table, without requiring that the UX be 'data bound'.

This video explains the 'Update, Insert or Delete data' action.

Watch video
UX_V12--40 Using CSS to Control Padding and Spacing When a UX Component (that uses 'container width' layout mode, which is the default mode) is rendered, every control in the component is wrapped in a DIV with a class name of 'A5CWLayout'. This special class is essential to the way in which the controls all 'flow' from left-to-right, then top-to-bottom, creating powerful, 'fluid' layouts that automatically adjust to changes in the window size.

The default padding on the A5CWLayout class is set globally in a property in the UX builder. There are situations, however, as described in this video, where you would like to selectively control the padding on the A5CWLayout class.

NOTE: This video is aimed at users with an understanding of CSS selectors.

Watch Video - Part 1
Watch Video - Part 2

Download Component
UX_V12--41 How to Vertically Center Text in a Panel Header or Footer This video shows how you can apply one of the built in class names to vertically center text in a Panel header or footer.

Watch Video
UX_V12--42 Spin List Control The Spin List control is ideal for mobile applications. It is an alternative to a Dropdown control or an Edit-combo and can be used when the user must select from a pre-defined list of values.

Watch Video - Part 1
Watch Video - Part 2
Download Components
UX_V12--43 Storing Current Location when Saving Data to a Table When you edit the data in a record using a UX component, a common requirement, especially in mobile applications, is to record the current location of the user who is editing the record.

This is easily accomplished by setting some properties in the 'Save Submitted Data to Tables' server-side action, as shown in this video.

Watch Video
UX_V12--44 Populate Controls with Data from a Table - UX Component is not 'Data Bound' A common use case in a UX component is to populate certain controls on the component with data that is retrieve by doing a database query.

In this video we show how the 'Populate controls in an UNBOUND UX Component' action can be used to populate controls in a UX component with data from a table.

Watch Video
Download Component
UX_V12--45 Image Upload - Creating Thumbnails of the Uploaded Image When you use the 'Image Upload' action in Action Javascript to upload an image (which, in the case of a mobile application is likely to have been obtained by using the camera on the device), you might want to automatically create thumbnail versions of the image that was uploaded.

This video shows how this is easily done by setting a property in the 'Image Upload' action in Action Javascript.


Watch Video
UX_V12--46 Panel Navigator - Overview of Different Methods of Navigating Panel Cards in a Panel Navigator The Panel Navigator is a fundamental building block of mobile applications. It is used to select the Panel that has focus. The Panel Navigator has several different methods for selecting the active Panel. These include: carousel, programmatic, tab buttons, tab band, list and orientation change.

In this video we demonstrate these different methods, and discuss the use case for each method.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4
Download Components
UX_V12--47 Displaying Pop-Up Windows and Overlays using the 'Window' Container Sub-type Displaying content in pop-windows (also sometimes called 'overlays') is a common requirement in web and mobile applications.

This is easily done by wrapping the content you want to show in the pop-up window in a container with a sub-type of 'Window'.

In this video we show several examples of how this technique is used to show pop-up lists, maps and forms.

Note: In addition to the techniques shown in this video, you can also use the  'Open a Pop-Up Ajax Window/Overlay' action in Action Javascript to display content in pop-up windows.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Download Component  (Note: Before running the component you will need to edit the connection string and point to the sample Northwind database.)

Contrasting the technique shown in this video with the 'Open a Pop-up Ajax Window' action in Action Javascript.
Watch Video
UX_V12--48 Dynamically Adding Panels to a Panel Navigator When you create a UX component that uses a Panel Navigator, you typically define the Panels (Cards, Layouts and child Navigators) that this Panel Navigator controls at design-time.

However, it is possible to dynamically add new Panels to a Panel Navigator at run-time by calling the .addPanel() method of the Panel Navigator object. Similarly, you can remove Panels from a Panel Navigator at run-time.

In this video, we show how this is done.

Watch Video - Part 1
Watch Video - Part 2
Down Component
UX_V12--49 Sample 'Notes' Application - Using CSS to Customize the Appearance of a List Control The sample Notes application is an advanced example of how CSS and Javascript can be use to completely customize the appearance of a List control in a UX component. In this video we show how the List control that shows the notes in the sample Notes application was customized.

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 Component
UX_V12--50 Automatically Displaying a 'Wait' Message on an Ajax Callback In mobile applications, where network connections are often slow, it becomes important to let the user know that there will be a delay while an Ajax callback completes. This is easily done with a global setting in the UX Component.

Watch Video
UX_V12--51 Dynamically Re-populate a Checkbox Control that is Configured to Display as a ButtonList Checkbox controls can be configured to display as ButtonLists. This is ideal for mobile applications where a standard checkbox control is not commonly used. In many applications it will be necessary to dynamically repopulate the choices in the Checkbox control (i.e. the ButtonList).

In this video we show how this is easily done by performing a query on a SQL database to dynamically populate the choices in the ButtonList.
Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Download Component

UX_V12--52 Chart Control - Resizing the Chart at Run-time The Chart control in a UX component is a server-side control. That means that a bitmap of the chart is generated on the server and the bitmap is sent to the client. Because it is a server-side control, it is not possible to use Javascript to resize the control at run-time, as is possible with other control types.

In this video we should how the .refreshChart() method has been enhanced to allow size information to be passed back to the server, so that when the chart is refreshed, its size can also be changed.

Watch Video
Download Component

A practical use case for this functionality is in mobile applications where a chart is displayed in a Panel and you would like the chart to fill the Panel and to automatically resize itself on an orientation change. In this video we show how a chart can be resized automatically when the orientation of a device is changed.

Watch Video
Download Component
UX_V12--53 Refreshing a UX Component That is Embedded Into a Parent UX Component A common pattern when building large UX components is to break the component up into smaller pieces and then embed a child UX component into a parent UX component using the [Embedded Object] control on the UX Component toolbox.

When you use this technique, you may want to refresh the child UX component when certain values in the parent UX component change. In this video we show how this is easily done.

Watch Video - Part 1
Watch Video - Part 2
Download Components
UX_V12--54 How to Use Multiple Sub-Components when Designing a Mobile Application When designing a large mobile application some developers tend to design a single very large UX component. However, a better approach is to break the component into multiple sub-components.

In this video we show techniques for dividing a UX component into multiple sub-components.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4
Watch Video - Part 5
Download Components
UX_V12--55 HTML Reporting When you add a Report to a Tabbed UI, or you display a report when a button is clicked, you now have the option of setting the 'initial view' of the report to HTML. HTML Reporting is significantly faster than PDF reporting because it does not use the Amyuni printer driver. Also, another significant benefit of HTML reporting is the ability to export the report to Excel or Word. You can also generate a PDF report from an HTML report if you still want a PDF version of the report.

In this video we show how HTML reporting can be used in a Tabbed UI and when a button in a Grid is clicked to show a report.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
UX_V12--56 HTML Reporting - Reports with Bookmarks When you design reports, you can turn on the 'bookmarks' and 'table of contents' features. The 'bookmark' feature creates a tree control of all of the 'bookmarks' in the report and allows you to navigate to any section of the report by clicking on a appropriate item in the 'bookmark tree', which is displayed to the left of the report itself. The 'table of contents' section, on the other hand, is shown before the first page of the report. You can also navigate to any particular section of the report by clicking on an entry in the table of contents.

In HTML reports, the 'bookmarks' tree is automatically rendered in a Panel as is shown in this video. In a mobile application, the Panel Card that contains the bookmark tree is automatically hidden if there is not enough space on the device. In the case where it is hidden, a button is automatically added to the Panel Header to reveal the bookmarks.

Watch Video
UX_V12--57 Reports - Using the IN Clause in the Report Filter - Understanding 'Array Arguments' When you use Action Javascript to display a report, you specify the report filter. In the case of reports that are based on SQL data sources, you can now use the SQL IN clause in your filter expression. When you use the IN clause, the arguments you pass into the SQL statement must be configured as an 'array argument'.

In this video, we show how you can easily configure the Action Javascript to display a report to use an IN clause and how you can make your argument into an array argument.

Watch Video
Download Component (Requires a connection string called 'Northwind' to sample Northwind database)
UX_V12--58 Slider Control - Date and String Values The slider control by default allows you to select a numeric value in a range of numbers. But it can also be configured to select a date value from a range of date values, or a string value from a pre-defined list of choices (e.g. Poor, Average, Good).

This video shows how the Slider can be configured as a numeric, character or date slider. It also shows how the range of allowed values (numeric and date sliders) or the list of choices (character sliders) can be dynamically changed at runtime.

Watch Video - Part 1
Watch Video - Part 2
Download Component
UX_V12--59 Abstract Events and Using the $e.add() and $e.removeGroup() Methods This video is aimed at advanced developers who want a better understanding of how abstract events (such as click, downHold, etc) are implemented in the UX component and how the $e.add() and $e.removeGroup() methods can be used.

Watch Video
Download Component
UX_V12--60 Chart Control - Dynamically Changing Chart Properties at Run-time In some applications, you might want to dynamically change certain properties of the chart (for example, whether the chart is 3D or 2D, or whether the chart is a Pie or a Bar, etc) at run-time. You might want to read the value for these dynamic chart properties from controls on the UX component. In this video we show how you can bind chart control properties to controls on the UX component and make run-time changes to the chart's appearance.

Watch Video - Part 1
Watch Video - Part 2
Download Component
UX_V12--61 Chart Control - Dynamically Changing the Chart Appearance by Changing the Stylesheet In the previous video we showed how aspects of the chart appearance could be changed at run-time. In this video we show how a dynamic stylesheet can be applied to the chart to control even more aspects of the chart appearance.

Watch video
Download Component

TIP: To get started creating a custom stylesheet for a chart, you should start with the style builder, then convert to CSS. See video.
UX_V12--62 User-defined Sub-themes to Style UX Component Controls Many of the controls on a UX component allow you to specify a sub-theme. The sub-theme controls various aspects of a control's appearance and also behavior. For most of the controls there are several built-in sub-themes to chose from. For example, buttons have sub-themes that can make the button look like a 'back' or 'next' button. A powerful aspect of sub-themes is the fact that it is very easy for developers to create their own sub-themes to create highly customized appearances for controls on a UX.

In this video we show how a custom sub-theme for a window can be created and used.

Watch Video - Part 1
Watch Video - Part 2
Download Component
UX_V12--63 Getting a Pointer to a Parent or Child Component So You Can Call Methods of the Parent or Child Component The ability to re-use components and open a child component in a window, div, TabbedUI pane, Panel, or embed into a parent component is one of the most powerful aspects of the Alpha Anywhere architecture.

When you open a component from a parent component, you will often want to get a pointer to the child component so you can manipulate it in your Javascript code in some way. For example, you might want some code in the parent component to read a control in the child, or set a value in the child. Similarly, you might want some code in the child component to read or set a control in its parent.

The .getParentObject() and .getChildObject() methods are used to get pointer to an object's parent or child objects.

In this video, we show how this is done.

Watch Video - Part 1
Watch Video - Part 2
Download Component
UX_V12--64 Example App Showing How to Synchronize an Embedded UX Component when a Value in a Parent UX Component Changes A common pattern when building mobile applications is to break the application into multiple sub-components and then embed child components into the parent component. Using this pattern, you break your application into manageable pieces. However, when you follow this pattern, it is often necessary to synchronize the embedded child component when a value in the parent component changes.

In this video we show a sample application that shows customers in the sample Northwind database. An embedded UX component shows the orders for the selected customer. When the user selects a different customer, the embedded 'Orders' UX component is synchronized.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Download Components (requires a connection string called 'Northwind' that points to the sample Northwind.mdb files database in the MDBFiles folder).
UX_V12--65 Signature Capture Control A common requirement in mobile applications is the ability to capture a signature and store the signature in a database. In this video we show how this is easily achieved by placing a Signature Capture control on a UX component.

Watch Video - Part 1
Watch Video - Part 2
UX_V12--66 Using a UX Component to Create a Login Component for a Mobile Application A common requirement for any application, Mobile included, is to authenticate users before they can interact with the application. There are several ways in which authentication can be performed in Alpha Anywhere. These include using the standard Login component, or using the AppLauncher. In addition to the above two techniques, you can also build a UX component for performing the authentication.

The advantage of building the Login screens using a UX component is that you can make a much richer UI for the login and it can include standard mobile elements like Panel Headers, etc.

In this video we show how an authentication layer has been added to a mobile application.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4
Watch Video - Part 5

Download Web Project Used in Videos - Note: To use the project, create a new, empty Web Project, then click the 'Open Project Folder in Windows Explorer' button and paste these files into the folder. The passwords for the sample accounts are:
a@a.com - aalpha,
s@a.com - salpha
m@a.com - malpha
 
UX_V12--67 Storing and Restoring the 'state' of a UX Component with multiple Panels UX Components can use complex layouts that involve multiple Panel Cards inside Panel Navigators and Panel Layouts. You might want to persist the state of the Panel (i.e. remember which Panel Card in a particular Panel Navigator is active and which Panels in a Panel Navigator have been docked) so that you can later restore this state. This video shows how this can be done.

Watch Video
Download Component
UX_V12--68 Preventing a Panel from Losing Focus A common design pattern in a mobile application is to have multiple Panel Cards inside a Panel Navigator. If one of the Panel Cards contains a form, you might want to prevent the user from navigating to another Panel Card if the form has been edited, but not yet been saved.

In this video we show how this is easily done using the Panel Navigator's onBeforePanelActivate event. The same techniques can be used in a PanelLayout.

Watch Video
Download Component
UX_V12--69 Responsive Design - Dynamically Resizing Controls on Orientation or Window Size Change - Understanding the FlexLayout Container A common requirement when designing a UX component is to have a control dynamically resize when the orientation of a mobile device changes or when the window size (in a desktop browser) changes. This is easily accomplished using the FlexLayout container on a UX.

Any of the controls in a FlexLayout container can have their width specified as a 'relative' size (relative to the size of the other controls in the FlexLayout container). This video shows how to use the FlexLayout container type.


Watch Video - Part 1
Watch Video - Part 2
UX_V12--70 Image and File Upload - In Depth Look at What Happens Behind the Scenes When a File is Uploaded When you upload a file or image in the UX component, the binary data that is uploaded is stored in temporary session storage until the user commits the record they are editing. This video discusses what happens when a file is uploaded and what happens when the record you are editing is committed.

The video also shows how you can write Xbasic to modify the filename that is stored on disk when the Camera is used to capture an image on a mobile device.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4

Download Component
UX_V12--71 Consolidate Multiple Ajax Callbacks into a Single Callback This video is aimed at advanced developers. It shows how the a5_ux_action() utility function can be used to optimize certain types of UX and List control actions into a single Ajax callback.

Watch Video - Part 1
Watch Video - Part 2

Download Component
UX_V12--72 Responsive Layout - Modifying the Design of a Component Automatically Based on the Device and Screen Orientation 'Responsive' is the term used to refer to a design that automatically changes its layout based on the device on which it is running, the device orientation and the window size (for desktop browsers). The UX component has very powerful tools for implementing responsive layouts.

In this video we show how the Responsive Layout Genie can be used to build highly responsive UX component designs.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

Advanced settings
Watch Video

Download Components
UX_V12--73 List Controls/Data Series - Using an IN Clause with Array Arguments in a SQL Statement List controls, Charts and Data Series in a UX can all be based on a SQL query. In some cases you might want to use an IN clause in the SQL query and reference an argument value to get the values for the IN clause.

This video shows how you can use arrays in a SQL::argument object and then reference the argument in a SQL IN clause.

Watch Video
Download Component
UX_V12--74 Computing a List Column Total using Client-side Calculations In cases where the List data is not paginated (and therefore the List contains all of the data in the List query), column totals can be computed client-side.

In this video we show how the data in a column in the List is computed using Javascript.

Watch Video
Download Components
UX_V12--75 Embedded UX Components - Understanding the onPanelActivateEvent A common practice when designing mobile applications is to break a large application into multiple smaller UX components and then embed components in Panel Cards in the 'master' UX component. When you do this, it is useful to be able to execute code whenever a child UX component gets focus.

In this video we show how the onPanelActive client-side event in a child UX will fire whenever the Panel Card in which it is embedded gets focus.

Watch Video
Download Components
UX_V12--76 Annotating an Image using the Signature Capture Control The signature capture control can be used for more than capturing images. In this video we show how a medical application can use the signature capture control to annotate an image of the body to indicate affected areas.


Watch Video
Download Component
UX_V12--77 Show/Hide Buttons in Panel Header/Footer Without Messing Up Button Alignment A common pattern in mobile applications is to have buttons in a Panel header or footer and to space the buttons so that some are left justified, some centered and some right justified. Then you might show/hide one or more of the buttons, but you don't want the spacing on the buttons to be affected.

This video shows how this can be done.

Watch Video
UX_V12--78 Building a Menuing System in a UX Component Using Docked Panels in a Panel Layout In mobile applications is it common to build menus that slide in from the right or left of the screen. In this video we contrast how this is accomplished in jQuery mobile and Alpha Anywhere. The approach we have taken in this video for Alpha Anywhere shows how the menus can be placed in Panel Cards that are docked inside a Panel Navigator.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4
Watch Video - Part 5

Download Components
UX_V12--79 How to Dynamically Change the Code on a Button (Advanced Javascript Developers) This video shows how you can dynamically change the code associated with a button on a UX component by 'unbinding' the existing code and then 'binding' new code.

Watch Video
UX_V12--80 Embedding Reports into a UX Component and Dynamically Filtering the Report Reports can be 'embedded' into the UX component and then dynamically filtered based on values that the user enters into controls on the UX. This allows for powerful interactive dashboard type applications where users can interact with reports. This video shows how this can be done.

Watch Video
UX_V12--81 Custom Styling for RadioButton and CheckBox Controls The standard way in which browsers render checkbox and radiobutton controls is pretty drab. In this video we show how the UX component allows you to apply a rich set of styling options to radiobutton and checkbox controls.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

Download Component
UX_V12--82 Positioning Controls at Absolute Locations on the Screen using the WYSYWIG Builder - Understanding the AbsoluteLayout Container By default, the UX component lays out the controls that have been placed on the component automatically, 'flowing' the controls from left to right, top to bottom. All controls are perfectly aligned. However, there are times when you want more precise control over the placement of controls. This is especially true when you want to use an image (for example, an image  of a PDF form you might have) as the backdrop to a form and then place your UX component controls at precise locations exactly over the 'fields' in the image.

This video shows how you can place controls in an an AbsoluteLayout container and the set the absolute position and size of each control.

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
UX_V12--83 Understanding the 'NoFloat' Container Type By default, all controls in a UX component are wrapped in a DIV with a class name of A5CWLayout. This class adds a CSS float and padding so that the controls 'flow' automatically, left to right, top to bottom across the page. If a control has a 'break' after it, a new 'line' is started. This automatic lay out of the controls on a UX makes it very easy to design attractive, perfectly aligned forms.

However, there are cases when the padding that is automatically added to all controls gets in the way of the effect that you are trying to achieve and in these cases you can wrap controls in a special 'NoFloat' container.

This video explains how the 'NoFloat' container works.

Watch Video
UX_V12--84 Adding a 'Flow Collapse' Button to Panels in a Panel Layout to Hide/Show Panels Panels in a PanelLayout can be hidden or shown by adding a 'flow collapse' button to a Panel. A common reason for doing this is to create a 'full screen' view for the 'primary' Panel in a PanelLayout. This video shows how this is done.

Watch Video
Download Component
UX_V12--85 Displaying QR Codes on a UX Component A common requirement, especially in mobile applications, is to display data encoded as a QR code. The UX component has a built-in QR Code control that makes it very easy to display any data in the form of a QR Code. This control uses Javascript to generate the QR Code. Because it is a pure Javascript control, no Ajax callback is required and therefore it is very fast. However, you can also generate QR codes on the server.

This video shows how QR codes can be shown on a UX component using both client-side and server-side techniques.

Watch Video - Part 1
Watch Video - Part 2
Download Component
UX_V12--86 Using Google Charts as an Alternative to the Built-in Chart Controls The UX component contains a powerful built-in chart control (based on the Microsoft .Net visualization library). This is a 'server-side' control (meaning that the chart is rendered on the server and then the resulting image is sent to the browser. However, there may be times when you want 'client-side' charting (i.e. charts that are rendered using Javascript). The Google Chart API is perfect for this. (Note: There are number of high quality open source Javascript libraries that you can choose from).

In this video we show how you can use the Google Chart API to add client-side charts to a UX component.

Watch Video - Part 1
Watch Video - Part 2
Download Component
UX_V12--87 Using SQL data in a Google Chart In previous videos we have shown ho easy it is to use Google Charts in a UX component by simply copying code from the Google Charts API documentation. However, in all of the example in the Google Chart API documentation, the data plotted by the chart is static (i.e. it is hard coded into the Javascript).

Of course, in a real application, it is likely that you will want to query a SQL database to get the data to be plotted on the chart. In this video we show an example of how this can be done.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Download Component
UX_V12--88 Control Behavior Overrides - Customizing The Data Picker and Edit-Combo Behavior on a Phone The UX component allows you to customize the behavior of certain controls based on the screen size of the device. For example, normally, the 'picker' for a date control, or an edit-combo control opens in a drop-down window, immediately under the control. However, on a phone, which has a narrow screen, there is not enough room to display the control's 'picker' in a dropdown window. Instead, you are likely to want the control to appear in a window that is docked to the bottom of the screen, centered horizontally.

In this video we show how you can define Javascript to override the behavior of certain controls, depending on the screen size.


Watch Video
UX_V12--89 Cross-domain Ajax Callback A cross-domain Ajax callback is a callback that takes places to a server that is in a different domain than the domain from which the component was loaded.

In this video we show how a callback is made to the Apple iTunes store and we contrast the difference between making the callback directly to the Apple site versus making a callback to the Alpha server first and then having the Alpha server make the call to the Apple site.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

Download component
 
UX_V12--90 Using CSS Icons in a List - List Menus A common pattern in mobile applications is to use a List control as the menu. This list control is then displayed in a Panel Window that animates in from the left side of the screen. Icons are typically displayed for each menu choice. CSS Icons are ideal for these types of icons. In this video we show how a List can be easily configured to display a menu. Each item in the List has a CSS Icon in it.

Watch Video
UX_V12--91 Split Buttons A split button is displayed as a regular button and a smaller button with a dropdown icon. You can have different event handlers for the dropdown button portion of the button and the regular portion of the button. When space is constrained, you can use a single split button to perform many tasks, while still giving the user single click access to the last selected task.

In this video we show how you can use split buttons in your applications.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Download components
UX_V12--92 List Control - Lookup Columns The List control allows you to define 'lookup columns' where the data in the column is 'looked up' either by calling a Javascript function (that you define), or by looking up the value in some other List.

A typical use case for this is a List that shows Order Details. Each row in the list has a 'productId' field. You would like to display the product name for each product id.

In this video we show how to define Lookup Columns in a List.

Watch Video
Download Component (You will need to change the connection string for both lists to point to the sample Northwind database).
UX_V12--93 List Control - Client-side Grouping and List Navigator Group breaks can be inserted into the List control. The group breaks can be 'server-side' group breaks, or 'client-side' group breaks. The advantage of 'client-side' group breaks is that they can be dynamically applied to the data in the List. That means you can easily switch from grouping the data by 'Lastname' to grouping by 'City', etc. You can also display summary values in the group headers and footer.

For lists that have group breaks (regardless of whether the group breaks were computed server-side or client-side), you can also display a List Navigator, which allows the user to easily scroll a long List.

In this video we give an overview of client-side group breaks and the List Navigator. Then, we go into depth on setting up client-side grouping using Action Javascript (to apply the group breaks after the List is initially rendered) and in the List definition itself (so that when the List is initially rendered, the group breaks are shown).

We also show how summary data can be inserted into a List header or footer.

Watch Video - Overview
Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4
Download components
UX_V12--94 List Control - Using Native SQL For List Data When you create a List control that is based on SQL data, you must use Alpha Anywhere 'portable' SQL. If you want to base you List on 'native' SQL (which includes stored procedures), you must define a 'custom' data source for the List and then in the Xbasic function that returns the data, you can use your native SQL.

In this video we show how this can be done.

Watch Video - Part 1
Watch Video - Part 2
Download Component
UX_V12--95 Drag and Drop - Dragging Rows from a Source List to a Target List A common design pattern in applications is to allows users to drag items from one List to another.

The Alpha Anywhere Javascript library contains powerful drag and drop functions that allow you to easily enable this type of functionality. In this video we show how you can create a UX with two List controls and drag rows from one List to the other.

Watch Video

In this video we explain the Javascript code that enables this functionality:

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4

Download component

Addendum. The previous videos show drag/drop on a List using a mouse. However, the previous examples do not work on some mobile devices because on iOS (for example), the 'up' event fires on the element that initiated the 'down' event (and not on the element on which the up event took place, as you might have expected). The next video explains how the component shown in the previous videos can be slightly rewritten so that it works on a mobile device (and as a bonus, also allows re-ordering of the rows within a List).

Watch Video
Download component
 
UX_V12--96 List Control - Range Searches The List control has a built-in action in Action Javascript to filter the List. An Ajax callback to the server is made and the query that populates the List is executed with a filter that is computed based on values in the search control on the UX. Now, you can easily perform 'range' searches, as shown in this video.

NOTE: Another way to perform a 'range' search is to use a single search control, turn on the 'Allow QBF' option and then enter the search value as a range using the .. (two dots) synax. For example, to search for quantity between 10 and 20, you would enter 10..20 in the search control.

Watch Video
UX_V12--97 Absolute Layout Container - Save as PDF The Absolute Layout container in a UX allows you to place controls at absolute locations, typically using a bitmap image of a form as a background. You can use an action in Action Javascript to save the contents of the Absolute Layout container as PDF file and then download the PDF to the client, or call some Xbasic function to process the PDF file.

This video shows how this is done using Action Javascript.

Watch Video
UX_V12--98 Internationalization - Language and Text Dictionary Tags Language or Text Dictionary tags are typically used to internationalize the strings in a UX component. However, adding the tags to a large component can be tedious. This video shows how the Internationalization Helper can be used to automate this task.

Watch Video
UX_V12--99 Client-side Formatting for Numeric Data and Templates You can use format directives in the Templates that the UX component List control uses to display data. This allows you to easily format numbers (for example show thousands separated by commas with 2 decimal places) and apply templates to strings (for example, show '5551234567' as (555) 123-4567)

The video shows how you can insert a format directive into a List template using the Number Format Genie.

Watch Video
UX_V12--100 Using a List Control to Display Detail Information (in Field/Value Pairs) for a Record A common pattern in mobile applications is to display a List of records and then when the user clicks on a row in the List to display a list of fields and corresponding values for the row the user clicked on, with one field/value pair per line.

In this video we show how a second List can be used to display the field/value pairs and how this List can be dynamically populated when the user clicks on a row in the main List of records

Watch Video - Part 1
Watch Video - Part 2
Download component

Addendum: In this video we show how you can enhance the UX by showing a message in the Detail List when no record is active in the primary List.
Watch Video
 
UX_V12--101 Dynamically Populating a List with Data from a SQL Database Populating a List dynamically with data from a SQL database is a very common pattern in application development. In this video we show how this is easily done.

In the video we show how a List control on a UX can be populated with customers in a country. The country is selected from a dropdown control.

Watch Video - Part 1
Watch Video - Part 2
Download component
UX_V12--102 Transform Data Type of List Data By default, the data type for each field in a List is a Javascript string. In some cases you might want the data type for a column to be a Javascript date or number object.

A benefit of transforming dates into true Javascript date objects is that you can then use date formatting in the template for the List. For example, when displaying a field called OrderDate in the the List, instead of specifying {OrderDate} in the template, you might specify {OrderDate:date('yyyy-MM-dd')}

Watch Video
Download component
 
UX_V12--103 List Virtualization - Optimizing the List for Large Number of Rows When you are working with List controls that contain a large number of rows (say several thousand rows), it is advisable to turn on the List's 'virtualization' feature. With virtualization turned on, the List will only render a small number of rows at a time (the visible rows and some additional rows above and below the visible rows).

Turning on List Virtualization will dramatically reduce both the time taken to load the List and the amount of memory consumed by the List.

Watch Video
Download component
UX_V12--104 Using the List Scroller to Move Through the Rows in a List When working with virtualized Lists, it is possible to have Lists that have a very large number of rows. Navigating a very large List by drag scrolling on the List body could be cumbersome. To facilitate navigating large Lists, a 'List scroller' can be added to the List. The scroller shows a message while you are dragging on it showing which row in the List will be shown if you were to stop dragging on the scroller.

Using the scroller, you can very quickly navigate to any row in the List.

The List Scroller is not limited to virtualized Lists. It can also be used with non-virtualized Lists.

In this video we show how to add a List Scroller to a List and we show how you can quickly navigate to the last row in a virtualized List that contains 100,000 row of data.

Watch Video
Download component
UX_V12--105 List Control - Modeless Preview Window in List Builder When you are designing a List control in a UX component, the List Builder is a modal dialog. This means that you need to first close the List Builder before you can preview the UX component to see how your List control looks.

However, while you have the List Builder open, you can click the Preview button to open a modeless preview window which you can keep open whiel you are working in the List Builder. Simply clicking on the Preview button will quickly refresh the preview shown in the window.

Watch Video
UX_V12--106 Action Javascript - Merge Data into Template Alpha Anywhere has a very powerful client-side template engine that allows you to merge Javascript data into templates to produce HTML output that can then be displayed on your component.

This functionality is exposed in the 'Merge data into client-side template' action in Action Javascript.

NOTE: Other videos explain the template syntax in more detail.

Watch Video
Download Component
UX_V12--107 Using the Template Tester to Help Design Templates - Tutorial on Template Syntax The client-side template engine in the UX component is very powerful, but to be able to take full advantage of its power it is necessary to understand the syntax used in the templates.

In this video we demonstrate how to use the Template Tester and we walk through the various examples that are built into the Template Tester.
The video gives an extensive overview of the template syntax.

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
UX_V12--108 List Control - Column Resizing The List control allows you to specify that columns in the list are resizable.

This video shows how you can set the resizable property at the individual column level.

Watch Video
Download Component
UX_V12--109 Destroy Child UX Component A common pattern when building large mobile applications is to break the app into multiple sub-component which are called from a master component.

Once the child component is no longer needed, it is useful to be able to delete the component from memory in order to conserve the limited memory available in the browser.

The {dialog.object}.destroyChildComponent() method can be used to delete child UX components from memory, as shown in this video.

Watch Video
Download Components
UX_V12--110 Generate a component at run-time using Xbasic In most cases, the UX components that your application uses will be built at design-time. However, there may be use cases for UX components that are generated dynamically at run-time using Xbasic.

The a5wcb_createDialogUsingXbasic() allows you to generate a UX component using Xbasic.

In this video we show how a button on a UX makes an Ajax callback to generate a UX on the fly. Another button then opens this dynamically generated UX component.

Watch Video
Download Component
UX_V12--111 Multi-select List Control - Icon to Indicate Selected Rows The Button List control (and the Checkbox control - configured to render as a Button List) can show an icon on selected items. The List control can also be configured to allow multiple selections (like a Button List or Checkbox), but it does not show an icon on the selected rows to indicate the row has been selected (it shows selected rows using a different row color).

In this video we show how you can easily display an icon on the selected rows. The technique uses a custom CSS class.

Watch Video - Part 1
Watch Video - Part 2
Download Component
UX_V12--112 Making a TextArea Fill a PanelCard Controls such as Lists and Maps have a 'Fill container' property that allow you to automatically cause the List or Map to fill the Panel Card in which the control is contained. Other controls, such as Text Areas, do not have this property.

In this video we show how you can configure the UX so that the Text Area control automatically fills the Panel Card in which it is contained.

Watch Video
Download Component
UX_V12--113 Tree Control - Populating Data using Javascript The data in a tree control on a UX component can easily be set using Javascript. In this video we show how to repopulate the entire tree, or dynamically add a node to an existing tree.

Watch Video
Download Component
UX_V12--114 Submitting all of the Data in a List Control on an Ajax Callback When an Ajax callback is made, the data in the variables on the UX are submitted, but the data in List controls are not submitted. There may be situations where you want to submit all of the data that are currently in a List control to the server.

In this video we show how you can 'harvest' the data that is in a List control and then submit that data to the server when you make an Ajax callback.

Watch Video - Part 1
Watch Video - Part 2
Download Component
UX_V12--115 List Control - Custom Control - Client-side When you define a List control in a UX component, one of the 'control types' that you can insert into the List is a 'Custom Control'. A 'custom control' is computed with an Xbasic function. Because Xbasic is used to render the custom control, it means that the custom control is rendered server-side when the List is initially rendered. If your UX component has code that modifies data in the List, the server-side custom control is obviously not re-rendered.

Therefore, you might want to define your custom control using client-side Javascript.

This video shows an approach to creating client-side custom controls in a List component.

Watch Video
Download Component
UX_V12--116 Setting Content of Scrollable Containers/Windows Normally, you can set the content of an element in a component by simply getting a pointer to the element and then setting the element's .innerHTML property. However, if the element whose content you are setting has been configured to allow drag scrolling, setting the .innerHTML directly will destroy the drag scroll settings and the new content will no longer be scrollable.

The solution to this problem is to use the A5.u.element.setContent() function to set the element's content.

Watch Video - Part 1
Watch Video - Part 2
Download Component
UX_V12--117 Edit-Combo Control - Specifying a Different Stored Value from the Display Value Dropdownbox controls allow you to specify that the stored value is different from the display value. For example, the control might display a 'ProductName' but the stored value in the control might be the 'ProductId'.

Edit-combo box controls can now also be configured to store a different value than their display value, just like a Dropdownbox control.

The benefit of using an Edit-combo control over a Dropdownbox control is that you can display multiple columns of data in the choice list and you can dynamically populate and filter the choices in the list with an Ajax callback every time the control is opened.

In this video we show how to configure an Edit-combo control to store a different value from its display value.

Watch Video
UX_V12--118 Building Disconnected Applications - Quick Start The following videos give a quick overview of how you can build disconnected mobile applications using the UX component. The List control (with an associated editable Detail View) is the essential building block for disconnected applications.

The video shows how you can use a genie to set up the List, how the List data is persisted to Local Storage, and how you can work with complex data structures.

Video 1 - Setting up a List with a Detail View Using the Quick Setup Genie
Video 2 - Persisting data to Local Storage
Video 3 - Hierarchical data structures
UX_V12--119 Dynamic Images - Client-Side When you add a 'Dynamic Image' column to a List control to display an image in the List that is based on other data in each List row you can specify if the computation of what image to show should be server-side, or client-side. If server-side, your expressions that define the conditional tests are specified in Xbasic. If client-side, your conditional expressions are expressed in Javascript.

The benefit of client-side dynamic images is that the image will be automatically recomputed when the data in a List row is updated.

In this video we show how client-side Dynamic Images can be defined and then we show another technique for creating client-side Dynamic Images using the List's Computed Columns feature. This second technique has the advantage of offering more flexibility.

Watch Video - Part 1
Watch Video - Part 2
Download Components
UX_V12--120 Client-side Template Tutorial Client-side templating allows you to generate HTML for display by merging a data object into a template. The client-side template library in Alpha Anywhere is extremely powerful and can be compared with similar functionality in 3rd party templating libraries, such as Mustache.js and Handlebars.js.

In this video we show how a complex template can be designed to display data (a list of Orders with OrderItems for each order) in a richly formatted display. The video shows how the templating system can compute values, including summary values.

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
Watch Video - Part 9
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.

Watch Video

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

Watch Video

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

 

Watch Video

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

 

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

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.

 

Watch Video

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)

Watch Video - Part 1

Watch Video - Part 2

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)

 

Watch Video - Part 1

Watch Video - Part 2

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

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

 

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.

Watch Video

IG2 Overview of Image Gallery Overview of the Image Gallery Component

 

Watch Video

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)

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

Number Category Description
R1 Reports - Embedded Charts This video shows how charts can be embedded into an Alpha Anywhere report.

 

Watch Video - Part 1

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

 

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.

Watch Video

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
Watch Video - 1

Using a Layout Table report
Watch Video - 2

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.

Watch Video - 1
Watch Video - 2
Watch Video - 3

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.

Watch Video

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.

Watch Video

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.

Watch Video - 1
Watch Video - 2
Watch Video - 3

RPT_V12--1 HTML Reporting When you add a Report to a Tabbed UI, or you display a report when a button is clicked, you now have the option of setting the 'initial view' of the report to HTML. HTML Reporting is significantly faster than PDF reporting because it does not use the Amyuni printer driver. Also, another significant benefit of HTML reporting is the ability to export the report to Excel or Word. You can also generate a PDF report from an HTML report if you still want a PDF version of the report.

In this video we show how HTML reporting can be used in a Tabbed UI and when a button in a Grid is clicked to show a report.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

Note: Also applies to the Grid and UX Component.
RPT_V12--2 Using HTML Reporting in a Mobile Application HTML Reporting is ideal for Mobile Applications because the HTML report can easily be displayed in one of the 'Panels' in a UX component.

In this video we show how a UX component with a Panel Navigator is built. The Panel Navigator has two Panel Cards. The first Panel Card has buttons to print various reports. The second Panel Card is used to display the HTML report.

Watch Video

Note: Also applies to the UX Component.
RPT_V12--3 HTML Reporting - Reports with Bookmarks When you design reports, you can turn on the 'bookmarks' and 'table of contents' features. The 'bookmark' feature creates a tree control of all of the 'bookmarks' in the report and allows you to navigate to any section of the report by clicking on a appropriate item in the 'bookmark tree', which is displayed to the left of the report itself. The 'table of contents' section, on the other hand, is shown before the first page of the report. You can also navigate to any particular section of the report by clicking on an entry in the table of contents.

In HTML reports, the 'bookmarks' tree is automatically rendered in a Panel as is shown in this video. In a mobile application, the Panel Card that contains the bookmark tree is automatically hidden if there is not enough space on the device. In the case where it is hidden, a button is automatically added to the Panel Header to reveal the bookmarks.

Watch Video

Note: Also applies to the Grid and UX Component.
RPT_V12--4 Converting Free-form Reports to Layout Table Reports There are several advantages that Layout Table reports have over Free-form reports, especially when it comes to generating HTML output from the report, or exporting the report to Excel or Word. In this video we show how a free-form report can be converted to a Layout Table report automatically.

Watch Video
RPT_V12--5 Exporting Layout Table Reports to Excel - Live Excel Formulae Layout Table reports can be exported to Excel. When you design the Layout Table Report you can set properties in the report definition so that when the report is exported, the Excel file has live formulas in it.

In this video we show how a simple report with a calculated field in a column, a calculated group summary value and a calculated report summary value can be exported into a 'live' Excel spreadsheet.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
RPT_V12--6 Reports - Using the IN Clause in the Report Filter - Understanding 'Array Arguments' When you use Action Javascript to display a report, you specify the report filter. In the case of reports that are based on SQL data sources, you can now use the SQL IN clause in your filter expression. When you use the IN clause, the arguments you pass into the SQL statement must be configured as an 'array argument'.

In this video, we show how you can easily configure the Action Javascript to display a report to use an IN clause and how you can make your argument into an array argument.

Watch Video
Download Component (Requires a connection string called 'Northwind' to sample Northwind database)

Note: Also applies to the Grid and UX Component.
RPT_V12--7 Chart Control Charts - You can now control data point colors at the individual data series level. For example, if a chart plots more than one data series, you can define data point colors for each data series in the chart.
Watch Video    Read Transcript
Download Component 
RPT_V12--8 HTML Reporting - Reports with Bookmarks When you design reports, you can turn on the 'bookmarks' and 'table of contents' features. The 'bookmark' feature creates a tree control of all of the 'bookmarks' in the report and allows you to navigate to any section of the report by clicking on a appropriate item in the 'bookmark tree', which is displayed to the left of the report itself. The 'table of contents' section, on the other hand, is shown before the first page of the report. You can also navigate to any particular section of the report by clicking on an entry in the table of contents.

In HTML reports, the 'bookmarks' tree is automatically rendered in a Panel as is shown in this video. In a mobile application, the Panel Card that contains the bookmark tree is automatically hidden if there is not enough space on the device. In the case where it is hidden, a button is automatically added to the Panel Header to reveal the bookmarks.

Watch Video
RPT_V12--9 Printing QR Codes Video shows how to print a QR Code on a report.

Watch video

Note: The next video shows another technique for printing QR codes in reports. This newer technique is only available for Layout Table reports.

Watch Video
RPT_V12--10 Printing Data that Contains HTML Markup In some cases the data in a report you are printing might contain HTML markup. You might want to print the HTML markup in its rendered form, rather than its raw form. In this video we show how you can configure the report editor to print HTML markup as rendered HTML.

Watch Video
RPT_V12--11 Absolute Positioning of Objects in a Layout Table Report - Using a Form Image as Report Background In a previous video we have shown how the UX component supports absolute positioning of controls over a bitmap image of a form (typically a PDF form).

Layout Table reports also offer the ability to also use an image of a form as the report background and to then position the report fields directly over the 'fields' on the background image.

This video shows how this is done.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
RPT_V12--12 Suppressing Blank Rows in a Layout Table Report The Layout Table report editor exposes a property that you can set for each row in the Layout Table to suppress the row if it is blank.

In this video we show how blank lines in a Layout Table Report are suppressed. We also discuss how the report writer determines that a row is 'blank'.

Watch Video
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.

 

Watch Video

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.

Watch Video

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.

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

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.

 

Watch Video

DT2 Layout Editors - Embedded Charts Alpha Anywhere 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.

 

Watch Video - Part 1

Watch Video - Part 2

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.

 

Watch Video

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

Watch Video

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.

 

Watch Video - Part 1

Watch Video - Part 2

 

Watch Video - Using Xbasic - Part 1

Watch Video - Using Xbasic - Part 2

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

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

More Information

 

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.

Watch Video - Part 1

Watch Video - Part 2

 

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

 

More Information

 

The Grid Component in Desktop Applications Feature Pack allows you to use a Grid Component in a Desktop application in two different ways:
  1. Embed a Grid Component into a Form
  2. Use Action Scripting to open a window that contains a Grid Component.

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

 

More Information

 

The Database Upside Genie is for developers who have developed a Desktop Application in Alpha Anywhere that uses Alpha Anywhere's native .dbf tables for data storage.

 

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

 

There are many benefits to using a SQL database for the data storage in your application. These benefits include:

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

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

V10FP5 Flying Start Genie

 

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

 

More Information

 

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

Watch Video - Part 1

Watch Video - Part 2

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

 

More Information

 

The 'Export to Excel, Ascii or Custom Format'  Feature Pack allows you to export data from a Grid component to a file that can then be downloaded from the server to the user's machine where the file can be saved to user's machine.

 

The Feature Pack allows you to:

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

Once the Feature Pack is installed, its functionality is exposed in two ways:

  1. A new action is available in Action Javascript
  2. A new property is available in the Record Navigator/Grid Toolbar section.

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

V10FP7 Image Upload

 

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

 

More Information

 

The Image Upload Feature Pack allows you to  upload images from the user's machine to the server.

 

Here are some of the things you can do with the Image Upload Feature Pack:

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

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

 

Watch Video - Uploading Images into the HTML Editor

V10FP8 File Upload

 

 

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

 

More Information

 

The File Upload Feature Pack allows you to  upload files from the user's machine to the server.

 

Here are some of the things you can do with the File Upload Feature Pack:

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

Watch Video - Quick Overview

 

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

 

More Information

 

 

 

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

Using the Feature Pack, you can:

 

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

Watch Video - Quick Overview

Watch Video - In Depth Part 1

Watch Video - In Depth Part 2

 

 

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

 

More Information

 

This feature pack allows you to add the following features to Reports that you create in Alpha Anywhere:
  • Table of Contents
  • Bookmarks
  • Index

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

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

 

Watch Video - Part 1

Watch Video - Part 2

V10FP11 Action Buttons in Grid Components

 

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

 

More Information

 

The Action Buttons Feature pack allows you to add buttons to the following parts of a Grid component:
  • Grid toolbar
  • Detail View toolbar
  • any of the free-form areas that surround the Grid, Detail View or Search part
  • the Master Template
  • inside the Detail View layout

Watch Videos - Part 1

Watch Videos - Part 2

Watch Videos - Part 3

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

 

More Information

 

 

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

The following types of files can be uploaded:

  • All Excel file types (.xls, .xlsx) up to and including Excel 2010 
  • Comma delimited ascii files

The data in the uploaded file can be imported into:

  •  the table that the Grid is based
  • an external table, unrelated to the table that the Grid is based on.

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

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

 

More Information

 

 

The 'Generic User-Defined Pop-up Window' Feature Pack allows you to open pop-up windows on your Grid component. This is extremely useful in creating highly customized user interfaces in your Grid.

There are four different ways to populate the contents of the window. These are:

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

The pop-up window you create be:

  • modal
  • modeless
  • dropdown windows

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

Watch Video - Part 5

V10FP14 Grid Component - Custom Help Windows

 

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

 

More Information

 

 

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

 

Here are some of the things you can do with the Custom Help Windows Feature Pack:

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

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

Watch Video - Part 5

Watch Video - Part 6

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
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
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
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
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
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:

  • User clicks a tab button
  • Programmatic - some Javascript code is executed
  • Automatic - a client-side 'watch' expression determines which tab pane is active
  • Timer - a timer automatically cycles between the tab panes

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


In this video we give an overview of the Advanced Tab Control
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


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


Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4


Download Components Used in Video

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.


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


Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

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.

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:


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

Note also, in the onAddComplete event function we can use 'this' to reference the map object.

FP11_DLGMAP3 Tour of Methods Exposed by Map Control in 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).



Watch Video
Download component

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

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


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
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
XB_V12--1 Working with XML Documents Xbasic has always had a powerful XML parser, but the new *property_from_xml() function and the new XML document viewer make it ever easier to work with XML documents.

Watch Video
(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

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

 

Watch Video

2 Searching In these videos we will show the various types of search features you can add to the Grid:

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

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

 

Watch Video - Part 1

Watch Video - Part 2

3 Editing In this video we show an editable grid. There are many different ways an editable grid can be configured We show:
- Submitting all rows at once
- Saving individual rows
- Edit on demand
- Turning off option to save individual rows
- Moving the new record rows to the top of the grid
- Keyboard support (F9 to save data, Up and Down to change row with focus, etc.)
- Trapping actions that would loose uncommitted data.

 

Watch Video

 

4 Rich Text The grid contains a built-in HTML editor for editing rich Memo fields. This video demonstrates how rich Memos can be edited in the Grid part and the Detail View part.
- In the Grid part, the HTML editor is configured as a popup editor - it is opened when you click on the field
- In the Detail View, the HTML editor can be configured to edit 'in-place'.

 

Watch Video

 

5 Multi-user editing The grid uses 'optimistic record locking' to trap multi-user edit conflicts. This video demonstrates:
- Automatic refresh of data as soon as the user starts to edit (which minimizes chances of a write conflict)
- Trapping write conflicts.

 

Watch Video

6 Data Validation The grid has exceptionally strong data validation features. This video demonstrates:
- Data validation rules
- Data validation custom Xbasic at the field level
- Data validation events
- For DBF tables, automatic honoring of Field Rules

 

Watch Video

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

 

Watch Video

8 Lookups The lookup feature in the Grid is exceptional. This feature demonstrates:
- Opening the lookup in a window on the page
- Dynamic lookup filtering

 

Watcvh Video

9 Detail View This video shows the various options for the grid 'Detail View'. This video demonstrates:
- Various options for where the Detail View is opened:
          - on the page underneath the Grid part
          - in a modal, popup window
          - in a modeless, popup window
          - in the Grid part, directly under the row.
- Using the 'pre-fetch' option for greater responsiveness

 

Watch Video

10 Row Expander The 'row expander' turns on a small icon next to each row in the Grid. When you click this icon, the row expands to show additional information related to the current row. This video demonstrates:
- Row expander showing a single grid
- Row expander showing multiple grids in a Tab control
- Row expander showing multiple grids in an Accordion control
- Setting the row expander to only allow one row to be expanded at a time
- Defining a custom row expander event to show any arbitrary content generated by the server

 

Watch Video

11 Conditional Formatting The conditional formatting option allows you to format data conditionally, depending on its value. For example, you might set the color of the quantity field to be red if it is above average. This video demonstrates:
- conditional formatting at the cell and control level
- conditional formatting at the row level.

 

Watch Video

12 Conditional Images The conditional image feature allows you to display different icons in the grid depending on the data in each row. This video demonstrates how above average quantities have a green icon and below average have a red icon. There is no limit to the number of conditions you can test for.

 

Watch Video

13 Master Templates The Grid component comprises three sub-parts - Search Part, Grid Part and Detail View Part. In previous versions of Alpha Anywhere you laid out these three parts on the .a5w page that contained the Grid component. With Master Templates, you can lay out these parts in the Grid definition itself. You can also enclose the parts in a Tab or Accordion object.

 

Watch Video

14 Collapse Bar The collapse bar allows you to wrap the entire Grid component in a frame. When you collapse the frame (by clicking on the frame title bar), the Grid is hidden. This is useful if you have a page with multiple Grid components on it.

 

Watch Video

15 Form Layout The records in a Grid component can be displayed in either a tabular view or a form view. When you use the form view, the Grid offers many different layout options that allow you to create highly customized form layouts. This vide demonstrates:
- Tab controls
- Accordion controls
- Container controls
- Frame controls

 

Watch Video (Container and Frames)
Watch Viewo (Tabs and Accordions)
 

16 "Liquid" Forms Smart phones are an increasingly popular platform for running web applications. On a smart phone, the screen real estate is severely limited. This video shows how the Grid makes it easy to design 'liquid' forms - forms that automatically reconfigure themselves based on the screen size.

 

Watch Video

17 Ajax Windows When you click on a hyperlink in a Grid you can display related information. This video shows how this related information can be shown in Windows on the current page. There are several different types of window styles:
- Modal popup window
- Modeless popup window
- Dropdown windows

In addition, you can also display the related information in any user defined DIV on the page.

Watch View (Popup Windows)
Watch Video (DIV)
18 Cascading Dropdown Boxes in Search Part The Search Part of the Grid can display dropdown boxes for search fields. Say you have a dropdown box for the Country, City and Company fields. You can configure dropdown boxes so that until the user has made a selection from the Country field, the City and Company dropdown boxes are disabled. When the user selects a Country, the City dropdown box is populated with cities in the selected country, and so on.
 

This video shows how to define cascading dropdown boxes:

Watch Vide (Specifying Cascading Dropdown Boxes)


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

19 Action Javascript - Print Report as PDF This video shows how you can print PDF reports and display them in popup windows (modal, modeless or dropdown), or in an arbitrary DIV on the  page.

 

Watch Video

20 Watermark Fields Watermark fields allow you to put the field label inside the field itself. If you are designing forms where screen real-estate is limited, watermark fields are a great way to save space.

 

Watch Video

21 Auto-suggest Fields Auto-suggest fields work similarly to the now familiar Google Search Toolbar. As you start typing into a textbox, a list of suggestions is supplied. In the case of the Grid component, the suggestions can come from a static list of values, or more commonly, from a table. The list of choices can be filtered based on other fields previously filled in. For example, say that you have defined the 'City' field to be an auto-suggest field. If you previously entered 'CA' into the 'State' field, then when you start typing into the 'City' fields, the list of suggestions will only show cities in California.

 

Watch Video

22 Edit-combo box fields. Standard HTML does not support an edit-combo box control. This video shows how you can include edit-combo boxes in your Grid components. You can use edit-combo boxes in the Search, Grid and Detail View parts.

 

Watch Video

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

 

Watch Video

24 Action Javascript - Open a Grid This video shows how you can open a Grid in a popup window (modal, modeless or dropdown), or in an arbitrary DIV on the page. The Action Javascript genie writes all of the Javascript code.

 

Watch Video - Part 1

Watch Video - Part 2

25 Tabbed UI Builder The Tabbed UI builder allows you to take all of the pieces of your applications (Grids, Reports, A5W pages, etc.) and build a tabbed user interface, much like a modern desktop application would employ.

 

Watch Video - Part 1

Watch Video - Part 2

26 Page Layout Builder The Page Layout builder allows you to create a complex page layout that contains multiple components. Components can be laid out in tabs, and accordions and can be displayed in on-page windows, or in pop-up windows (either modal, or modeless).

 

Watch Video - Part 1

Watch Video - Part 2

 

27 Window Options The Action Javascript builders make it very easy to create buttons that open other Grids, Reports, Pages, etc. in pop-up windows. You can also open up the target Grids, Reports, etc. in new 'Panes' in the Tabbed UI builder. These videos show some of the Window options such as:
 

Multiple modeless window

Re-using the same modeless window

Setting the window title

Opening a new pane in the Tabbed UI Object.

 

Watch Video - Part 1

Watch Video - Part 2

28 Constrained Keyword Search The Grid component has always allowed you to create Keyword searches - a search that searches in multiple fields. But now, you can create 'constrained' keyword searches. This allows you to perform a keyword search subject to some other constraint e.g. (Department = "Books").

 

Watch Video

29 Tabbed Linked Grids You can create very powerful 'master-detail' Grids by placing 'Linked Content Sections' on the Grid. If a 'Linked Content Section' contains more than one Grid, the content is displayed in a Tab or Accordion object. For example, you might have a Customer Grid that display the Orders for the customer record that has focus. The Orders grid, in turn, might display the Order Details for the order that has focus. There is no limit to the level of nesting of linked content.

 

This show how easy it is to create a Linked Content Section.

Watch Video

30 Client-side Formatting, Calculated Fields and Show/Hide Fields The Grid component supports several powerful 'client-side' features such as calculated fields, dynamic formatting, dynamic show/hide of Grid elements and dynamic enable/disable of Grid elements.

 

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

Watch Video

 

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

Watch Video

 

The third video shows how parts of a Grid form can be hidden under certain conditions. The Grid shown has a section for the billing address and shipping address. If the 'Shipping address is same as billing address' field is checked, the entire 'Shipping Address' part of the Grid form is hidden.

Watch Video

31 Client-side Show/Hide and Enable/Disable of Tab and Accordion Panes The panes in a Tab and Accordion control can be dynamically hidden/shown, or enabled/disabled based on an expression that is evaluated in the Browser.

 

This video shows a Grid with  a Tab object with two panes (Billing Address and Shipping Address). If the 'Shipping address is same as billing address' checkbox is checked, the 'Shipping Address' pane is hidden and then disabled.

 

Watch Video

32 Multiple Language Support If you are developing applications for multiple languages, you might want to change labels and prompts based on the current language. You can tag any text in the Grid definition as 'replaceable' and then you can define multiple language definitions in which you define the value for all of the tagged strings in your definition.

 

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

This video shows how you can use this feature.

Watch Video

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

 

This video shows how you can use Templates, and how you can define your own templates.

 

Watch Video  

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

 

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

 

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

 

The edit-combo can be used in all parts of the Grid - i.e. Search, Grid and DetailView.

 

Watch Video - Part 1

Watch Video - Part 2

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

 

Normally, each cell in a tabular grid contains a single field. But in this example, instead of placing a single field in a column cell, we have placed an entire Grid.

 

Watch Video

36 Action Javascript - Lookup and Fill-in Action The 'Lookup and Fill-in' action allows you to define a Javascript event that will automatically lookup data in a lookup table and then fill-in certain fields in the record you are editing.

 

This video shows how you can define a 'Lookup and Fill-in' action using Action Javascript.

Watch Video

37 Client-side System Events The Grid Component has a rich client-side event model. This video shows how you can use client-side events to put up a simple 'Sorting....' message while the Ajax callback is taking place after the user has clicked on a column heading to sort the Grid.

 

Watch Video - Part 1

Watch Video - Part 2

 

38 Using Arguments in the PageLayout and TabbedUI Components to Filter Records You can define arguments in the PageLayout and TabbedUI builder. Arguments allow you to filter the Grid and Reports shown in the PageLayout or TabbedUI based on some external data (such as a session variable, or page variable).

 

This video shows how you can put a button in a Grid to open a pop-up window. The pop-up window shows a PageLayout component that is filtered based on data in the current Grid row. A second button opens a pop-up window showing a TabbedUI component that is also filtered based on data in the current Grid row.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

39 Using a Grid Component instead of a Dialog Component If you have used the Dialog component in your V9 web application, you might want to consider using the Grid component as a replacement for the Dialog. The reason is that the Grid component in V10 has many more features than the Dialog component (which has not been updated for V10) and can be configured to behave in a manner that is very similar to the way in which a Dialog behaves.

 

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

The video shows how to create a simple dialog to collect name and address information.

Watch Video - Part 1

Watch Video - Part 2

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

 

This video shows how you can use .AEX files in a Grid Component, and it shows how the Publishing process can automatically compile the .AEX file and publish it.

 

Watch Video - Part 1

Watch Video - Part 2

 

41 Using 3rd Party Editors (such as Dreamweaver) with Alpha Five Many designers are very familiar with a particular HTML editor (such as Dreamweaver, or Fontpage) and would prefer to user their favorite editor while editing .a5w pages in an Alpha Anywhere web project. Version 10 makes it easy to use 3rd party HTML editors.

 

Watch Video

42 Custom Search Bar Buttons By default, when you create an 'Alphabet Button' search bar, Alpha Five creates buttons for each letter of the alphabet. However, you can also create custom search bars in which you specify what the button labels are, and what the corresponding search expression is for each button. This feature has many uses. For example, a list of houses for sale could have buttons for several different pre-defined searches: 'Less than $500K', 'Between $500K and $750K', '$750K to $1M' and 'Above $1M'.

 

Watch Video

43 HTML Form Import Genie In some cases a developer using Alpha Anywhere 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 Anywhere web project and 'connect' the form to a database.

 

This video shows how the Form Import Genie can be used to connect a form in an HTML page to a database.

 

Watch Video

44 Tree Control Genie For users who are hand-coding .a5w pages, the Tree Control Genie shows you how to create the Javascript and Xbasic to display an Ajax enabled tree control.

 

Watch Video

45 Advanced use of Custom Controls in a Grid  

One of the control types available in the Grid is the Custom Control. This allows you to define an arbitrary Xbasic function to compute the HTML and Javascript for the control. This example shows a Grid showing Invoices. One of the cells in the Grid shows the line items for the Invoice. This could have been done using an Embedded Grid Component, but the Custom Control solution is a lighter weight, and faster solution.

 

Watch Video - Part 1

Watch Video - Part 2

 

46 Advanced use of ShowRowExpanderIcon event When you use the Row Expander feature in a Grid, by default, the expand icon is shown next to each row in the Grid, regardless of whether that row actually has any child records or not. In some cases, you might want to suppress the row expander icon from showing if there if there are no child records. You can do this using the ShowRowExpanderIcon event.

 

Watch Video

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

 

Watch Video

48 User Defined Watch Events A user defined watch event allows you to define Javascript code that will get executed whenever the value in a 'watched' field in your Grid changes. In this video, we show how the label on the 'state' field can be changed to 'State' if the country is 'USA' and to 'Province' for all other countries.

 

Watch Video

49 Printing the Currently Selected Records, or Opening a Grid showing Currently Selected Records. Putting a button on a Grid to open another Grid or a Report is easily accomplished using Action Javascript. This video shows how you can use the special Alpha Anywhere functions, CurrentGridFilter() and CurrentGridOrder() to print the records that are currently selected in the Grid. You can also use these functions to open another Grid showing the same selection of records in the current Grid.

 

Watch Video

50 The 'Working Preview' pane in the Grid Builder The 'Working Preview' pane in the Grid Builder allows you to run the Grid (just as the Live Preview pane does). But 'Working Preview' does not use the Application Server - instead, it uses a special protocol (not 'http') to talk to Alpha Anywhere directly. Debugging your Xbasic event handlers is very easy when you use Working Preview.

 

Watch Video

51 Show/hide expressions in the Page Layout and TabbedUI component You can use show/hide expression in the Page Layout component to show or hide the objects that you place in the component. The expressions can refer to session variables and arguments defined in the component. Using show hide expressions, it is easy to show one user a page with one particular set of components, and another user a completely different set of components. In the case of the Tabbed UI component, the show/hide expressions can control which buttons are visible in the button pane.

 

Watch Video

52 Using Server Side Javascript Grid Events to show a button in only the first row of a Grid Sometimes you might want to show a control, such as a Button or Hyperlink, in only the first row of a Grid. This video shows how this is easily done using the System Javascript Events in the grid.

 

Watch Video

53 Dynamic DetailView window title The DetailView can be shown in a popup Ajax window. You might want the window title to be dynamically constructed using data from the current Grid row. This video shows how you can do this using system Javascript events.

 

Watch Video

54 Automatically Close Modal Pop-up Ajax Window when Grid Data are Saved It is easy, using Action Javascript, to open a Grid in a pop-up modal Ajax window. This video shows how you can cause the modal pop-up window to automatically close when the data in the Grid shown in the pop-up window are saved.

 

Watch Video

55 TabbedUI Component with buttons on Home Page (instead of on button bar on left) The Tabbed UI component is an easy way to create a 'launch pad' for all of the  pages, Grids and Reports in your application. The standard Tabbed UI component has a series of buttons in a 'button pane' on the left or right hand side. Each of the buttons opens a new pane in the Tabbed UI.

 

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

 

This video shows how this is easily accomplished by using a Page Layout component for the Home Page of the Tabbed UI component. (Requires System Addins build 3516 or greater).

 

Watch Video

56 Action Javascript - User Defined Ajax Callback - Setting Grid Properties on a Callback Whenever you perform an operation (e.g. Sorting, Page Navigation, Saving data, etc.) Ajax callbacks are made to the server. These callbacks are system callbacks (i.e. the user does not have to do any programming- Alpha Anywhere generates the callbacks automatically).

 

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

 

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

 

Requires build 3517 or above.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

 

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

 

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

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

 

Required build 3517 or above.

Watch Video - Part 1

Watch Video - Part 2

58 Grid, TabbedUI and PageLayout Builder Using these builders is now easier because you can quickly search for a property in the property grid when you want to edit a property value.

 

Watch Video

59 Alphabet Button Search - Dynamically hiding/showing the search bar based on number of records in a Grid. The Alphabet Buttons search bar allows you to quickly search for records in a Grid that start with a certain letter. In the case of a Grid with just a few records, you might want to hide the search bar. This video shows how you can use Javascript System events to dynamically show/hide the search bar.

 

Watch Video

 

60 Showing row-level errors in a pop-up window By default, when you submit a Grid and the server determines that there are errors in the data, the errors are either shown next to the field(s) that have errors, or in the case of 'row-level' errors, the errors are shown by turning on an error icon in the row selector, which the user can then hover over with the mouse to see the actual error text.

 

This works well if the Grid has a tabular display. But in the case where the Grid is formatted as a Form, if the form has a large number of fields, the error icon can be too subtle and is easily overlooked. A new option allows you to display 'row-level' errors in a pop-up window.

 

Watch Video

 

61 Multiple Language Support in the TabbedUI and PageLayout Components Multiple Language support was originally introduced in the Grid component (see Video 32). Now, it has been extended to the Tabbed UI and Page Layout components.

 

Watch Video

 

(Requires build 3525 or above)

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

 

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

 

{grid.object}.methodName();

 

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

 

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

 

Watch Video - Part 1

Watch Video - Part 2

 

(Requires build 3525 or above)

(See also video 92)

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

 

Watch Video

 

(Requires build 3530 or above)

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

 

Watch Video

 

(Required build 3535 or above)

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

 

Watch Video

 

(Requires build 3535 or above)

66 User-defined Ajax Callbacks - Understanding what Information is Available to you when you write your Xbasic Callback Handler Action Javascript allows you to define a user-defined Ajax callback. Typically, you define an Xbasic function to handle the callback. This video explains how you can use the Xbasic Debugger to explore what information is available to you when you write the Xbasic Callback Handler. It also explains how you can use Javascript to 'harvest' any data on the page and pass that information back to the server as part of your Ajax callback.

 

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

67 Tutorial on Path Aliases In web applications, filename references are typically aliased (e.g [PathAlias.ADB_Path]\Customer.dbf). The aliases are resolved using data that is published in the a5_application.a5i file in the webroot. These videos present a short tutorial on understanding aliases.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

68 Reports - Using session variables in Reports Session variables are used throughout web applications. You can reference session variables in reports. This video show how you can place a calculated field on a report to print out the value in a session variable.

 

(Requires build 2830-3540 or above)

Watch Video

 

69 How to Pass Variables from a Parent Grid to a Child Grid This video presents a short tutorial on how you can pass arbitrary data from one Grid to another Grid.

 

Watch Video

 

70 Controlling the Position of Pop-up Ajax Windows When you use Action Javascript to open a Grid, web page, or Report, you are using a pop-up Ajax window to display the target object. Previously you did not have control over where the pop-up window was displayed. It was always centered when initially displayed, and then its position was remembered for subsequent displays.

 

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

 

Watch Video - Part 1

Watch Video - Part 2

 

(Required build 2842-3541 or above)

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

 

Watch Video

(Requires build 2862-3542 or above)

72 Duplicating an Existing Record Sometimes when you are entering a new record into a database, it would be great to be able to use the data from an existing record as a starting point for the new record. This video shows how you can create a button in your Grid that fills in the data in the new record row with data from the current record.

 

Watch Video - Part 1

Watch Video - Part 2

73 Client-side Xbasic Typically the HTML events in a Grid (e.g. onClick, onChange, onBlur, etc.) are handled using Javascript. But in the case where the Grid is running on the Desktop in a Desktop application (which includes 'Working Preview' mode), you can actually use Xbasic functions to handle these HTML events.

 

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

Watch Video - Part 1

Watch Video - Part 2

(Requires build 2877 - 3543 or above)

74 Printing Reports from a Grid in Working Preview mode

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

Watch Video

(Requires build 2877 - 3543 or above)

 

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

 

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

 

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

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

 

Watch Video - Part 1

Watch Video - Part 2

 

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

 

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

Watch Video

Watch Video- Printing Reports

 

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

 

Watch Video

 

(Requires Version 10.5)

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

 

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

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

 

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

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

 

These videos discuss these new events.

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

Watch Video - Part 5

Watch Video - Part 6

 

(Requires Version 10.5)

79 Setting Default Values in the Search Part and Automatically Searching the Grid In the case where you have a Grid with a Search Part, you might want the Grid to open with the Search Part already filled in with default search values. And furthermore you might want to actually submit the Search Part so that the user's initial view of the Grid is a filtered view based on the Search Part's default values.

 

Watch Video

80 Customizing the Layout of the Detail View Toolbar - Adding and Removing Buttons You have always been able to customize the icons and bubble help that are displayed in the Detail View toolbar. Now you can completely customize the layout of the toolbar. You can eliminate any of the standard buttons if you want, or add your own buttons to the toolbar.

 

Watch Video

81 Using GUIDs (Unique Identifiers) as a Table's Primary Key. A GUID (Globally Unique Identifier) is an ideal choices for the Primary Key of a record. This video shows how you can easily build a Grid component on a table that  has a GUID as its primary key. The video demonstrates how you can assign the GUID value to the primary key field in the new records that you create in the Grid component. The video shows how a SQL table is used, but the technique applies equally well to native Alpha Anywhere .dbf tables.

 

Watch Video

82 Power Searches in the Search Part of the Grid Component The Search Part of the Grid component supports a special syntax that allows you to do powerful searches for ranges of records, to search for multiple different values in a field, and to use the special .. operator.

 

This video demonstrates how you can use the Search Part to perform powerful searches.

 

Watch Video - Part 1

Watch Video - Part 2

 

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

 

The video demonstrates the significance of this new option.

Watch Video

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

 

In the video, a custom Javascript function is defined to compute the number of minutes between to date/time values.

Watch Video

 

85 Custom Ajax Callback - an In-depth Example

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

 

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

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

Watch Video - Part 5

Watch Video - Part 6

Watch Video - Part 7

 

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

Download Grid Component

 

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

 

Watch Video

 

(Note: The techniques shown in this video are no longer necessary if you have the Action Buttons Feature pack, which automates the process of placing buttons in the Grid toolbar.)

87 Using the 'Checked column' in a User-defined Ajax Callback When you design a Grid you can specify that the Grid should show a 'checkbox' column to allow the user to select multiple rows in the Grid. When you define a custom Ajax callback, the callback includes information about the primary key of each row that was checked.

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

 

Watch Video -  Part 1

Watch Video -  Part 2

 

(Note: Many of the techniques shown in this video are now available through built-in Grid features - see video 88. However, the techniques shown here are still interesting as they demonstrate useful concepts.)

88 Using the 'Checked column' in a Grid Component These videos show several different ways in which the 'Checked column' in the Grid can be used.

(Requires build 3341-3597 or above)

 

Watch Video -  Part 1

Watch Video -  Part 2

Watch Video -  Part 3

89 Exporting Checked Records to Excel This video shows how you can allow the user to select an arbitrary number of records by checking the checkbox selector for a record, and then exporting those records to Excel.

 

Note: To duplicate the functionality shown here you need the Export to Excel and Action Buttons Feature Packs.

 

Watch Video

90 Using Javascript to total values in a Column for the Checked Rows  

This video shows how you can create a running total of the values in a column of the Grid. When a row is checked, the vaule in the column is added to the running total. When the row is unchecked, the value in the column is deducted from the running total.

Watch Video

91 Using a User-defined Ajax Callback to add records to a 'Transaction Table' This video shows how you can create a user defined Ajax callback to add records to a transaction database. The video assumes that the transaction database is a SQL database, but the principles are the same for .dbf tables.

The new record in the transaction table is populated with data from the current row in the Grid.

 

Watch Video -  Part 1

Watch Video -  Part 2

 

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

 

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

 

Watch Video -  Part 1

Watch Video -  Part 2

Watch Video -  Part 3

(See also video 62)

Note: If you have build 3906-3632 or above, the technique described in the video to avoid using the {Grid.object} placeholder is no longer necessary.

93 Tab UI - Warning before Closing a Tab Pane - Custom Coding When you open a Grid component in a Tabbed UI pane, if you then try to close the tab pane when the Grid is dirty, you get a warning that the Grid is dirty and you have to either save the Grid or abandon the changes. This behavior is 'built-in' to the Tabbed UI.

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

 

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


Watch Video -  Part 1

Watch Video -  Part 2
 

94 Using Grids in Desktop Applications - Passing Data from the Grid to Xbasic A power feature for developers who are building Desktop application is the ability to use Grid components in their Desktop applications. This video, which was made in response to a specific question from a developer, shows how to set a global Xbasic variables from a field in the Grid component.

 

Watch Video - Part 1

Watch Video - Part 2

95 Opening Tab Panes automatically when a Tabbed UI Component is Opened When a TabbedUI component is opened, the Home tab is displayed. In this video we show how you can automatically open any number of Tabbed UI panes when the Tabbed UI Component is first opened.

 

Watch Video

96 Showing a value in the Grid only for the current row and hiding the value when the row does not have focus. Assume that you have a Grid with multiple columns. Let's say you only want to display the value in one of the columns for the row that has focus. In other words, the value in this column will be hidden for all rows, except for the row that has focus. These videos show two different ways in which you can write the Javascript to accomplish this:

 

Watch Video - 1

Watch Video - 2

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

 

Watch Video

98 Positioning a Grid's Linked Content Sections Precisely Say you have a Grid which displays a child Grid in a Linked Content Section. Assume that the child Grid also has a child Grid in a Linked Content Section. So, when the top level Grid is displayed, there are actually three Grids visible - parent, child and grand child.


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


The following videos show how you can use a Master Template in the parent Grid and some simple Javascript that is generated in the server-side onAfterExistingRowsRender event to precisely align the Grid, the child Grid and the grand-child Grid.

Watch Video - Part 1

Watch Video - Part 2

99 Enabling or Hiding an Action Button if No Records in Current Query This video shows how you can enable or hide an Action Button if there are no records in the current Grid query.

 

Watch Video

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

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

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

 

Watch Video - Part 1

Watch Video - Part 2

SSE4 Render Events These videos explain how the various 'onRender' events can be used to inject custom HTML into the Grid as it is rendered.

 

Watch Video - Part 1

Watch Video - Part 2

SSE5 'OnSearchPartFilterCompute' Event These events show how you can use the 'OnSearchPartFilterCompute' event to customize the way the search filter is computed from the data that is submitted when the user submits the Search Part.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

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

 

Watch Video - Part 1

Watch Video - Part 2

SSE7 OnSummarySectionRender Event These videos show how you can use the 'OnSummarySectionRender' event to completely customized the summary section of the Grid and inject your own calculated fields into this section.

 

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

SSE8 RowExpander Events These videos show how you can create a custom row expander to display any content you want when a row is expanded. We also demonstrate how you can control which rows display the 'expand row' icon.

 

Watch Video - Part 1

Watch Video - Part 2

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

 

Watch Video - Part 1

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

 

Watch Video

 

(Required V10.5)

SSE11 Customizing the Write Conflict Error Message The Grid component uses 'Optimistic record locking' to prevent one user from overwriting another user's edits when two users edit the same record at the same time. The OnWriteConflict event handler allows you to customize the Write Conflict error message.

 

Watch Video

(Requires build 2862-3542 or above)

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

 

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

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

 

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

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

 

These videos discuss these new events.

Watch Video - Part 1

Watch Video - Part 2

Watch Video - Part 3

Watch Video - Part 4

Watch Video - Part 5

Watch Video - Part 6

 

(Required Version 10.5)

Number Category Description
G_V12--1 Image Upload The Image Upload action in Action Javascript now allows you to upload images to the New Record row. Previously, you could only upload images to existing rows. Also, you can now specify an image to show if there is no image associated with a record.

You can embed images directly in the HTML (as base64 encoded values) and you can scale images on the server before rendering the HTML.

Watch Video   Read Transcript

Discussion of significance of embedding images in HTML - Watch Video     Read Transcript
G_V12--2 Tree Navigator - Applying the Grid Filter to the Tree Navigator The Tree Navigator is an ideal control to navigate the records in a Grid. A common requirement is to filter the records in the tree when the user applies a filter to the records in the Grid.

In this video, we show how this is easily done.

Watch Video
G_V12--3 Edit-combo and Auto-suggest Edit-Combo and Auto-Suggest controls now expose a new method to allow you to call Javascript to dynamically style the data shown in the list. Watch video   Watch video 2
G_V12--4 Pop-up Javascript Windows Pop-up Javascript Windows - You can now specify that pop-up Javascript windows should be docked to a side of the screen. Docked windows remain visible even when the page is scrolled.
An example of where docked windows might be useful is in a shopping application where the docked window shows the shopping cart and remains on the screen as the user scrolls on the page to add items to the shopping cart.
Another example would be to display instructions that must always be visible as the user scrolls the page.

Watch video    Read Transcript
G_V12--5 Text Dictionary Tags Previously, language tags were used to internationalize a component. For example, by setting a control label to:
<a5:r>Label1</a5:r>
you could look up the string replacement for Label1 from a "Language Definition" that was stored as part of the component.

Now, in addition to the 'language' tag, a new type of tag is available, the 'text dictionary' tag can be used to lookup the tag definition in a SQL table - the 'Text Dictionary Table'. This makes it much easier to internationalize your application.

Note that text dictionary tags are not limited in their use to internationalizing applications. They can be extremely useful for displaying dynamic content in an application. The content shown in the application is retrieved at run-time by querying the SQL Text Dictionary database.

Watch Video - Part 1
Watch Video - Part 2

Editing Text Dictionary Entries
Watch Video
G_V12--6 Menus - Displaying pop-up menus when the user clicks a button When the user clicks on a button, you can display an pop-up menu with different choices. The menu can be arbitrarily complex, with multiple levels. Each node in the menu can execute a Javascript script when clicked. This video shows how Action Javascript can be used to define an action to display a pop-up menu.

In this video, the choices in the menu are defined at design-time using the Menu Builder. The Menu Builder provides an easy to use editor for constructing your menus. There are other ways in which the menu contents can be defined. These alternative methods (which are well suited to dynamically generating menu definitions) are discussed in subsequent videos.

Watch Video - 1
Watch Video - 2
G_V12--7 Populating Menus using a JSON String or an Xbasic Function The choices in the menu can be specified by a JSON string that defines the menu or by executing an Xbasic function that dynamically computes the menu choices.

In this video we show how these two options can be used.

Watch Video
G_V12--8 Pop-up windows - Pointers When a pop-up widow is displayed (for example to show a Grid, UX component, Report, Menu, etc.), you can specify that the pop-up window has an icon that 'points' to the element that opened the window.

Watch video
G_V12--9 Understanding the a5_xb_runGridComponent() Function The a5_xb_runGridComponent() Function is a new technique for running a Grid component on an Ajax Callback or in a <%a5..%> codeblock in a component. The video describes what the function does and how it is different from using standard Action Javascript techniques for running a Grid component.

Video 1
Video 2
Video 3
G_V12--10 Understanding the a5_xb_runGenericComponent() Function The a5_xb_runGenericComponent() Function is a new technique for running a UX, or PageLayout component on an Ajax Callback or in a <%a5..%> codeblock in a component. The video describes what the function does and how it is different from using standard Action Javascript techniques for running a UX or PageLayout component.

Watch video
G_V12--11 Understanding the a5_xb_runReport() Function The a5_xb_runReportt() Function is a new technique for running a Report on an Ajax Callback or in a <%a5..%> codeblock in a component. The video describes what the function does and how it is different from using standard Action Javascript techniques for running a Report.

Watch video
G_V12--12 Testing on a Phone or Tablet This video shows how you can test the component that you are designing on a remote device (e.g. a phone or tablet).

Watch Video
G_V12--13 HTML Reporting When you add a Report to a Tabbed UI, or you display a report when a button is clicked, you now have the option of setting the 'initial view' of the report to HTML. HTML Reporting is significantly faster than PDF reporting because it does not use the Amyuni printer driver. Also, another significant benefit of HTML reporting is the ability to export the report to Excel or Word. You can also generate a PDF report from an HTML report if you still want a PDF version of the report.

In this video we show how HTML reporting can be used in a Tabbed UI and when a button in a Grid is clicked to show a report.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
G_V12--14 HTML Reporting - Reports with Bookmarks When you design reports, you can turn on the 'bookmarks' and 'table of contents' features. The 'bookmark' feature creates a tree control of all of the 'bookmarks' in the report and allows you to navigate to any section of the report by clicking on a appropriate item in the 'bookmark tree', which is displayed to the left of the report itself. The 'table of contents' section, on the other hand, is shown before the first page of the report. You can also navigate to any particular section of the report by clicking on an entry in the table of contents.

In HTML reports, the 'bookmarks' tree is automatically rendered in a Panel as is shown in this video. In a mobile application, the Panel Card that contains the bookmark tree is automatically hidden if there is not enough space on the device. In the case where it is hidden, a button is automatically added to the Panel Header to reveal the bookmarks.

Watch Video
G_V12--15 Advanced Export - Using Report Definition Prior versions of Alpha Anywhere have supported exporting data from a Grid component to either Excel or Ascii files. The data was exported as a simple, unformatted table of raw data.

Now, a new type of export is available. You can use a Report Definition to specify the format for an export operation. Data can be exported to Excel, Word, Ascii, HTML or PDF.

Watch video
G_V12--16 Putting the Search Part in a Pop-up Window In this video we show how the Search part of a Grid component can be shown in a window. By default, the Search part is shown on the page directly above the Grid part, but by showing the Search Part on in a window, you can save space on the page.

Watch Video
Download Component (requires a connection string called 'Northwind' that points to the sample Northwind.mdb files database in the MDBFiles folder).
G_V12--17 Locking the Screen while a Long Running Ajax Callback is Executing If a Grid or UX component makes an Ajax callback that takes a long time to complete, you might want to display a message to the user telling them to wait and also you might want to 'lock' the screen to prevent them from firing other callbacks until the current callback has completed.

In this video we show how this is easily done using a custom modal window.

Watch Video
G_V12--18 Opening a UX from a Button on a Grid and Passing Information Into the UX You can open a UX component from a button on a Grid using several different actions in Action Javascript. For example, there are built-in actions to edit the data in the current row of a Grid using a UX.

But sometimes you want to simply open a UX and pass information from the current row in the Grid to the UX.

In this video we show how this is easily done by defining arguments in the UX component and then automatically setting the value of these arguments when the UX is opened.

Watch Video - Part 1
Watch Video - Part 2
Download Component
Number Category Description
UXL_V12--1 List Control - Introduction This List Control is a powerful new control type that can be added to the UX component. The List Control is extremely powerful and versatile. It is used extensively in applications that are designed for Mobile devices, but is also extremely useful in Web applications.

The List control has much of the functionality of a read-only Grid component.

In this video, we introduce the List control. In subsequent videos we will explore the full richness of his extremely versatile new control.

Watch Video    Read Transcript   
UXL_V12--2 List Control - .SetValue and .GetValue Methods of the UX Component The List control is just like other data controls that you place on the UX component in that it submits a value (just like a textbox, radio button etc.) does when the UX component is submitted.

Also, the standard Javascript methods (.getValue() and .setValue() ) of the UX object can be used to set and get the 'value' of the variable that bound to the list.

Watch Video     Read Transcript
UXL_V12--3 List Control - Multiple Data Sources - SQL, DBF, Static Data, Custom (Xbasic) and Javascript The List control can be populated from multiple data sources, such as static data, SQL queries, custom Xbasic code, custom Javascript code, etc.

In this video we explore these different data sources for the List control.

Watch Video - SQL and DBF Data Source     Read Transcript

The 'Custom' data source allows you to define an Xbasic function that returns the data to be shown in the List control. In the this video we show how a call can be made to the Yahoo Web Service to retrieve stock price data which is shown in the List control.

Watch Video - Custom Data Source - Part 1       Read Transcript
Watch Video - Custom Data Source - Part 2       Read Transcript
UXL_V12--4 List Control - Columnar vs. Freeform Layout - The data shown in the List control can be displayed in either a columnar or free-form layout.

In this video we show how to use both columnar and free-form layouts.

You can switch at run-time from one layout to another layout. The video also shows how a 'Layout Picker' can be placed on the component to select the active layout at run-time.

The ability to specify more than one Layout for a List control is particularly useful for Mobile applications where you might want the appearance of the List to change when the orientation of the Mobile device is changed from portrait to landscape.

Watch Video   Read Transcript
UXL_V12--5 List Control - Flex Column Widths A powerful feature of the List control is the ability to specify column widths using either absolute or relative dimensions. For example, you can specify that column one's width is 'flex(2)' and column two's width is 'flex(1)'. This means that column one will always be twice the width of column two and that the total width of the columns will automatically expand to fill the width of the List control.

Watch Video      Read Transcript  
UXL_V12--6 List Control - Multiple Layout When you design a List control, you can specify multiple Layouts. A Layout is just the manner in which the data in the List is shown. You can switch from one layout style to another at run-time.

Watch Video     Read Transcript    

Download component
UXL_V12--7 List Control - Dynamic Image You can easily add images to the List. The particular image to be shown in any row is dynamically computed based on other data in the row. In this video we show how one icon is shown if the customer is from the USA and another icon is shown if the customer is not from the USA.

Watch Video     Read Transcript  

Important Note: Dynamic images should not be confused with 'data-bound' images, which are discussed in another video. In a 'data-bound' image, the image to show in the List is specified in one of the fields in the record that is the data source for the List.
UXL_V12--8 List Control - Custom Control Columns Just as the Grid component allows you to define a 'Custom Control' control type, the List allows you to define 'Custom Controls' to compute values to be shown in the List.

The 'custom control' is defined by an Xbasic function that will return the HTML to show in the List. The Xbasic function takes as its input an object that allows the function to see all of the data in the current row of the List.

In this example, we define a very simple Custom Control field for the List that combines data from the 'firstname' and 'lastname' columns in the List.

Watch Video    Read Transcript   
UXL_V12--9 List Control - Computed Columns The List control allows you to define computed columns. A computed column displays a value that is computed from other data in the current row. Computed columns can be calculated server- side (in which case Xbasic functions can be used in the calculation), or they can be computed client-side (in which case Javascript functions can be used in the calculation).

To define a server-side computed column, you would actually define a 'Custom Control' as shown in the previous video.

In this video we show how a client-side computed column can be added to the List.

Watch Video      Read Transcript     
UXL_V12--10 List Control - Inserting Buttons into the List In addition to displaying data and images, each row in the List can include buttons. When clicked, these buttons execute Javascript code that you have defined.

When you define the Javascript that gets executed by the button, you can use Action Javascript or you can write you own Javascript code.

In this video, we show how you can place a button in the List and when the button is clicked, another UX component is opened, showing more data for the current row in the List.

View Video     Read Transcript   
UXL_V12--11 List Control - Working with Images - Data Bound Images The images that you display in a list can be 'data bound'. For example, if the List control is populated from a SQL query, the table that you are querying might have image fields. The data in the image fields can either be binary data (i.e. the jpg or png data for an image), or a character field that contains the filename of an image.

This video shows how you can include data bound images in a List.

When working with data bound images, you have the option of actually embedding the image data into the HTML (as base64 encoded data). You can also scale the image on the server before rendering it.

Watch Video 1       Read Transcript 
Watch Video 2       Read Transcript
Watch Video 3       Read Transcript
UXL_V12--12 List Control - Conditional Styling - Server Side and Client-side The data in the List can be conditionally styled at both the row level and the column level. For example, you might want to display a row in red if the 'AmountDue' is above a certain level. Or, you might want to display a particular field in bold if the value in some other field had a certain value.

Conditional styling can be computed either on the server or on the client. While the result of a server-side or client-side computation might be the same, the way in which it works is very different. In the case of server-side conditional styles, the computation is done on the server, and therefore the conditional expressions are Xbasic expressions. In the case of client-side conditional styles, the computation is done in the browser, using Javascript, and therefore you can use Javascript code in your expressions.

Another key difference between server-side and client-side conditional styles is that for server-side conditional styles, the style information is embedded into the data that is sent from the server to the browser. This makes server-side conditional styles slightly less 'efficient' than client-side conditional styles because the 'payload' (the amount of data sent from the server to the browser) is slightly larger.

Watch Video 1      Read Transcript  
Watch Video 2      Read Transcript

Download Component
UXL_V12--13 List Control - Client-side Conditional Styling - Using the onItemDraw Event Dynamic, conditional styling, of the data shown in a List can also be done using the onItemDraw event in the List control. This is the most flexible and powerful way for applying dynamic, conditional styling, to a List because you have the full power of Javascript to express your 'conditional styling rules'.

The onItemDraw event fires after each row in the List has been rendered, and you can use this event to make any modifications to the data show in the row.

In this video we show how the onItemDraw event can be used to set alternating row colors, set the background color of a button and set the text on a button.

Watch Video    Read Transcript    
Download Component
UXL_V12--14 List Control - Conditionally Showing Items in a Row The data in each row of the List can be conditionally shown or hidden. For example, in this video, we only show the button in the List row if the ContactTitle field is 'Owner'.

Watch Video    Read Transcript
UXL_V12--15 List Control - Pagination Methods When you display a List that is based on a SQL or .dbf table, you can choose how many rows of data to show in the List. You can efficiently display a much larger number of rows in a List than in a Grid component. However, when working with tables with a very large number of rows, you will want to paginate the List and then provide a means for fetching additional rows of data from the server.

In this video we show two different pagination methods: Navigation Buttons - which allow you to put First, Previous, Next and Last buttons on the UX component to control the navigation in the list, and a 'Fetch More' row which appears at the end of the List. When you click on the 'Fetch More' row, more data is retrieved from the server. (In the next video we should a third navigation method - 'AutoFetchMore').

Watch Video     Read Transcript 
UXL_V12--16 List Control - Pagination - Navigation Buttons When you turn on pagination for a List control and you set the Pagination Method to 'Navigation Buttons' you can define pagination buttons that operate 'page at a time' or 'record at a time' as shown in this video.

Watch Video   Read Transcript
UXL_V12--17 List Control - Continuous Scrolling - 'AutoFetchMore' Pagination Method In this video we demonstrate how the 'AutoFetchMore' pagination option can be used to give the illusion that the entire list has been loaded into memory.

In the video we show how even though only 20 rows of data are loaded into the list, it scrolls continuously as if the entire list has been loaded. That's because the 'AutoFetchMore' option automatically fires the Ajax callback to fetch more rows of data as you scroll toward the end of the data that is currently loaded.

Watch Video   Read Transcript
UXL_V12--18 List Control - Grouping You can insert group breaks into the data that is displayed in a List control. The text shown in the Group Headings can be completely customized and can include summary data (showing for example, the count of the number of records in the group, or the total sales for the customers in the group).

(Note: Summary data only available for lists based on SQL data).

In addition, if the List is paginated and you are using buttons to navigate from page to page, you can indicate in the Group Heading if the group is continued from the previous 'page' of data.

Watch Video - 1     Read Transcript
Watch Video - 2     Read Transcript
UXL_V12--19 List Control - Grouping - Lookup Dictionary for Break Value Often, when creating a List that has group breaks, the value in the break field is simply a code (e.g. 1, 2, 3) and is not really meaningful to display in the Group Header. Instead, you would like to display a meaningful value by 'looking' up the coded value in some 'dictionary'. In this video we show how this can be done.

Watch Video   Read Transcript
UXL_V12--20 List Control - Cascading Lists When you define multiple List controls on a UX component, you can specify that a List has a 'parent' List. If a List has a 'parent' List, the data shown in the List is automatically refreshed and filtered every time the current selection in the parent List is changed. There is no limit to the depth of cascading Lists that you can define.

In this video we show how you can define two Lists - one for Countries and one for Cities and how the data in the Cities list is automatically filtered when the selected Country changes. We then add a third list for Companies, showing the companies in the selected City.

Watch Video - Part 1  Read Transcript
Watch Video - Part 2  Read Transcript
UXL_V12--21 List Control - Methods - Populating List, Moving Data from One List to Another - Moving Rows Up and Down The List control in the UX component is highly programmable. It has methods that allow you to add rows, insert rows, delete rows, move rows and reorder rows. In this video we give an extensive tour of some of the method available to you for programming the List control.


Watch Video - 1   Read Transcript 
Watch Video - 2   Read Transcript
Watch Video - 3   Read Transcript    
Watch Video - 4
Watch Video - 5
Watch Video - 6

Download component used in this video.
UXL_V12--22 List Control - Server-side Searching - Search Part Style and Keyword Style When a List is populated from a SQL or DBF data source, or a custom data source, you can perform server-side searches on the List data source in much the same way that a Grid component can have a 'Search Part'.

To create a 'search form' for a List, you place controls on the UX where the user will enter search criteria and then you add a button that makes an Ajax callback to create a filter expression from the submitted data. This can all be done automatically using Action Javascript.

To help you debug your searches, you can display the filter expression computed by Alpha Anywhere from the data your submit in the search fields. You can also display the record count showing the number of records that satisfied the search condition.

In this video we show how server-side searching (filtering) is added to a List control.

Watch Video - Part 1
Watch Video - Part 2
UXL_V12--23 List Control - Server-side Searching -Specify an Explicit Filter In the previous videos, the user fills in search values into controls on the UX component and then when the search button is clicked, the data in those controls are submitted to the server where a filter expression is computed from the submitted data.

There may be situations where you would prefer to generate the filter expression yourself, rather than have Alpha Anywhere generate the filter expression from the submitted data. This video shows how you can filter the data in the List using an explicit filter expression.

Watch Video
UXL_V12--24 List Control - Client-side filtering Just as searching in the List can be done server-side, or client-side, filtering of the List data can also be performed client-side or server-side. In previous videos, we have demonstrated how server-side filtering can be done.

In this video we show how client-side filtering can be used to filter the data in the List.

In the case of Lists that are based on static data, client-side filtering is the only option. In the case of Lists that are based on a Custom data source, client-side filtering will be must easy to set up than server-side filtering.

Watch Video
UXL_V12--25 List Control - Sorting Data - Server-side vs. Client-side When you sort a List that is based on a SQL,  a DBF or a Custom data source, sort can be performed server-side or client-side. If you perform a client-side sort, no Ajax callback is required. However, for large lists, sorting the data client-side can actually be slower than sorting server-side.

There are several factors that you need to consider when configuring your List to use server-side or client-side sorting.

If you List is paginated, then you must use server-side sorting (because a client-side sort will only sort the currently visible page of data).

In this video we demonstrate the difference between client-side and server-side sorting and how server-side sorting is set up.

Watch video
UXL_V12--26 List Control - Horizontal Scrolling A List control is laid out vertically by default. However, in many applications, you might want a List control that is laid out horizontally. When you set a List control use horizontal layout, the list will scroll horizontally if there is more data than can be displayed in the List. All of the options for List pagination (e.g. FetchMore, AutoFetchMore, etc.) can still be used.

The 'Horizontal' scrolling option is only appropriate if the List layout is set to 'Freeform'. Horizontal layout is meaningless in the case of a Columnar List.

In this video we show how a List can be configured to scroll horizontally. We also show how the List can be paginated using both the FetchMore and AutoFetchMore pagination methods.


Watch Video
UXL_V12--27 List Control - Snaking Column Layouts 'Snaking' layout displays the List data in a 'grid' of cells that flow from left to right, then top to bottom. For example, consider the 'products' page on Amazon.com when you search for a product. The number of 'cells' per row in the List depends on the List width and the size of each 'cell'.

The 'Snaking' layout option is only appropriate if the List layout is set to 'Freeform'. Snaking layout is meaningless in the case of a Columnar List. If there is more data than can be displayed at once, the list will scroll vertically. All of the options for List pagination (e.g. FetchMore, AutoFetchMore, etc.) can still be used.

In this video we show how a List can be displayed using a 'snaking' layout.

Watch Video
UXL_V12--28 List Control - Snaking Column Layout using CSS and Media Queries Rather than using the built-in 'snaking' layout option (as shown in the previous video), it is possible to set the List control layout to 'snaking' by using a custom CSS class for the List data item.

In this video we show how CSS can be defined that uses CSS media queries to set the number of columns in the 'snaking grid' based on the width of the List control.

While the technique shown in this video is certainly more complex than simply setting the layout style to 'Snaking' (as shown in the previous video), you get more control over how the snaking Layout is defined.

Watch Video
Download component used in this video.
UXL_V12--29 List Control - 'RawData' Control Type The 'RawData' control type returns the data 'as-is' from the data source. No HTML mark up is automatically added, as is the case when you choose the 'Label' or 'Image' control type. Use the 'RawData' control type when you want complete control over how the HTML for the field should be created. When you use the 'RawData' control type, you must put the HTML markup in the template.

For example, say you have a field called 'MyImage' that contains an Image URL. If you set the control type to Image, then in the template, you would simply place this placeholder: {MyImage}.

But, if you set the control type to 'RawData', the template would then be: <img src="{MyImage}" />

Watch Video
UXL_V12--30 List Control - Populating Data Bound UX Component controls when the selection in the List is changed. A common use pattern is to put data bound controls on a UX component and a List control that is also bound to the same table. When the user makes a selection in the List you would like to populate the data bound controls with the selected record. Additionally, if the user makes an edit in one of the data bound controls and commits the change, you would want the corresponding row in the List to be refreshed.

(Contrast the techniques shown in this video with the build in behavior of the 'Primary Key Navigation List' as shown in video number FP11_DLGNAV1.)

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4

Download component used in video.
UXL_V12--31 List Control - Adding a 'Row Expander' to the List A common use case in a List is to be able to expand the current row to show additional information. The additional information can be pre-loaded, so that when the row is expanded, no callback is necessary to get the additional data, or the additional data can be fetched from the server using an Ajax callback.

In this video we show how a 'row expander' can be added to a List control to show some additional pre-loaded information for the current row.

Watch Video - Part 1
Watch Video - Part 2

Download component used in video.
UXL_V12--32 List Control - 'Row Expander' - Populating the row expander using an Ajax Callback In the previous video, we showed how a List control could have a 'row expander' that was populated with pre-loaded information. In this video we show how the List control's 'Row Expander' section can be populated with the results of an Ajax callback.

Watch Video - Part 1
Watch Video - Part 2

Download component used in video.
UXL_V12--33 List Control - Geography Searches If the List control is based on a SQL database that supports the Geography data type (SQL Server, MySQL, Oracle, DB2 all do), then you can perform 'geography' searches on the data in the List. For example, you can find all records that are within (say) 10 miles of your current location. The 'current location' can be automatically supplied by the device.

Alternatively, you might want to know which records are within a specified radius of a certain point (that you can specify by latitude/longitude value), or by address.

In addition, when the results of the search are displayed in the List you might want to group the data in 'logical' groups. For example, the first group might be 'Records within 1 mile of your current location', the next group might be 'Records between 1 and 5 miles from your current location' and so on.

In this video we show how this is easily done.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

Download Component
(This component uses the sample SQL Server Airports database. You can download this database.)
UXL_V12--34 List Control - Geography Searches - Mobile Searching data to show records that are near the current location of a mobile device is an extremely common need in mobile applications. For example, the well know iOS application, Yelp, shows all restaurants that are near you.

In this video we build on the example show in the previous video and we show how a simple mobile application can be build that does a 'geography' search on data in a List control.

Watch Video
UXL_V12--35 List Control - Freeform List Template - Pre-defined Templates The List control allows for a great deal of flexibility in how the data in the List is rendered. You can configure the List to use either 'tabular' or 'free-form' layouts. For mobile applications, the 'free-form' layout is most commonly used. When designing a free-form layout, you can select from a list of pre-defined templates.

In this video we show how you can create a great looking List by selecting one of the pre-defined templates.

Watch Video
Download component
UXL_V12--36 List Control - Understanding Event Propagation When Clicking on Elements in a List Row When you have items in a List control row that have onClick events defined (such as a button or an image), and you also have defined events at the row level (for example, onClick, or onSelect), you might want to suppress the row level events from firing if you click on an element in the row that has its own onClick event.

This video shows how this is easily done.

Watch Video
Download Component
UXL_V12--37 List Control - Free-form Layout - Conditionally Hide/Show a Div in the Free-form Template When you create a List control with a free-form template, you might want to use Javascript (typically in the onItemDraw event) to conditionally show/hide elements in the List. This is easily done by putting the elements you want to show/hide in a div, giving the div an id and then using Javascript to show/hide the div.

It is important, however, that in each instance of the row, the div has a unique ID.

In this video we show the div is given a unique ID for each row in the List and how the onItemDraw event is used to control the visibility of the div.

Watch Video
Download Component
UXL_V12--38 Using a Custom List Control to Navigate the Current Record in a Data Bound UX Component When a UX component has been 'Data Bound' you can navigate from record to record by clicking on navigation buttons, or (optionally) by moving the pointer in a slider control, or by clicking on a row in a special List control that shows the primary keys that were retrieved in the server-side 'Load Primary Keys' action.

When you configure the server-side action to load the primary keys for the table to which the UX has been bound, you can optionally specify that a List control should be shown where the user can see the primary key values and then click on a row in the list to fetch a particular record. This List control is a special 'system generated' list and it does not offer the full range of features that the standard List control offers.

In this video we show how a custom List control can be configured to act as a record navigator and how this custom List can be used in place of the system generated 'record navigation list'.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Download Component (Note: Before running the component you will need to edit the connection string and point to the sample Northwind database.)
 
UXL_V12--39 List Control - Populate controls on a UX Component with Data from Current Row in a List Control When working with a List control, a common requirement is to populate other controls on the UX component with data from the current row in the List. This is easily accomplished using a built in action in Action Javascript.

This video shows how this is done.

Watch Video
UXL_V12--40 Complex Example of Cascading List Controls This video shows a more complex example of using cascading List controls and dynamically populating controls on a UX component from a database when a user clicks on a row in a List.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Download Component
UXL_V12--41 Placing List Controls inside Panel Cards - Options To Fill or Not Fill the Panel Card When you place a List control in a Panel Card you can specify that the List should completely fill the Panel Card. In many cases this is likely to be the option that you want. But there are cases where you will want to place a List control on the Panel Card along with several other controls (including, possibly, other List controls). In this case you will not want the List control to completely fill the Panel Card that it is on. This video shows how this is easily done.

Watch Video
Download Component
UXL_V12--42 Getting Data from the Selected Row in a List and Finding out the Row Number of the Selected Row When you write Javascript code that goes against a List control you will often need to be able to get the value of columns in the selected row(s) of the List, or from arbitrary rows in the List.

In this video we look at the .selection and .selectionData properties of the List object and the List object's. getData() method, which are useful for getting information about the selected data in the List.

Watch Video - Part 1
Watch Video - Part 2
UXL_V12--43 Why Setting List Height to a Percentage Fails and How to Solve the Problem A common requirement in mobile applications is to design a Panel Card that contains a List control in addition to some other controls. The requirement is for the List control to grow and shrink in height as the orientation of the device changes. The other controls in the Panel have a fixed height.

One might think that the way to solve this problem is to assign a percentage height (e.g. 80%) to the List height property, but this will not work because a percentage height is meaningless in this context. The solution is to use a Panel Layout, as shown in this video.

Watch Video
UXL_V12--44 Using a List Control to select a PDF File to Display in a Panel Card In this video we show how PDF files can be displayed in a Panel card. The actual pdf to display is controlled by making a selection in a List control.

Watch Video - Part 1
Watch Video - Part 2
Download Component
UXL_V12--45 Custom Layout - Setting a List Item Size to Fill the Screen - Understanding the 'Fill' Option for List item size and Custom Scrolling Options. When you are working with a List control that uses a free-form layout for the List, you can set the height (and width in the case where the List is set to scroll horizontally) of each 'row' (i.e. 'item') in the List. In addition to setting an explicit size (say 200px) for an item height or width, you can also use the special 'fill' keyword to indicate that the item should fill the viewport.

When you use the 'fill' option, it is often desirable to customize the way in which the List scrolls, so that it scrolls in discrete amounts (for example the size of the viewport) rather than scrolling continuously.

By setting the item size to use the 'fill' keyword, and by customizing the List scrolling, it is possible to make a List behave much like a Panel Card in a Panel Navigator.

In this video we show how these options are used.

Watch Video - Part 1
Watch Video - Part 2
UXL_V12--46 Using the Server-side AfterQuery Event - Computing a Column Total For List controls that are based on a SQL query, the server-side AftterQuery event fires after the query to get the List data has been executed. This event is typically used to compute some Javascript code to return to the browser.

In this video we show how the event can be used to return the total for a column in the List. Since the List is paginated, all of the data in the List query is not currently shown in the List and therefore the calculation of the total must be done on the server.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

Download Components
UXL_V12--47 Adding Dynamic Bubble Help (tooltips) to a Field in a List In this video we show how you can add dynamic bubble help to a field in a List control using some Javascript in the onItemDraw event.

Watch Video
Download Component
UXL_V12--48 Server-side Summary Values For List controls that are based on SQL data, you can specify that summary data (e.g. total, avg, count, min and max) should be computed for certain columns in the List control. The summary computations are based on the List query (not on the rows actually visible in the List). In the case of a paginated List, there may be more rows in the query than are visible in the List. For example, the query might have 1,000,000 rows, but the list might show 20 rows at a time.

This video shows how a List control is configured to compute summary values, and then how the afterServerSideSummaryCompute event in the List is used to update a label on the UX component showing the summary values.

Watch Video
UXL_V12--49 Edit the Current Row in a List Control in another UX Component The Grid component has an option in Action Javascript to edit the current row in a Grid using a UX component (that is data bound to the same table that the Grid is based on). This option also allows you to add a new record to the Grid using a UX component. The action for the Grid is called:

"Open a UX component to Edit Current Record in Grid, or add a new Record"

Now an analogous action is available in Action Javascript to edit the current row in a List control (for Lists that are based on SQL or DBF data sources) using another UX component that is data bound to the same table that the List is based on. The action for the UX is called:

"Open a UX component to Edit Current Record in List Control in a UX, or add a new Record to a List Control in a UX"

Watch Video
UXL_V12--50 Vertically Justifying Data in a Row By default, data in a columnar List control is vertically top justified. In a Grid, on the other hand, data in a Grid row is vertically middle justified. In a Grid this is easily done because the generated HTML for a Grid uses an HTML table. The generated HTML for a List is not based on an HTML table, and so middle justifying the data is a little trickier.

In this video we show how you can vertically middle justify data in a List row.

Watch Video
Download Component
UXL_V12--51 Displaying Data From Twitter The Twitter API returns data in JSON format. The List control on a UX component is easily populated with JSON data. The Twitter API, however, is a little tricky to work with because it requires an OAuth authorization before you can call the API functions. Xbasic contains two built-in functions that simplify this.

In this example we show how you can easily build a List control that displays Tweets that are retrieved by making a REST API call to Twitter.

In the example we use built-in Xbasic functions to get a 'bearer token' from Twitter. Once we have this token, we can make calls to the Twitter API to get data in a JSON format that is used to populate the List control.

IMPORTANT: The video shows selecting the Twitter List from the 'Defined Controls' section of the UX builder toolbox. This has been changed. You should now select the 'Twitter_Display_Tweets_in_a_List_Control' sample UX Component template in the dialog that appears when you create a new UX component.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4
UXL_V12--52 Dialing a Phone Number Shown in the List When running on a phone, it is a common requirement to be able to dial a phone number that is displayed on screen. For example, you might have a List control showing contact names and for each name you have an associated phone number.

In this video we show how you can configure a hyperlink control in the List to dial a phone number.

Watch Video
UXL_V12--53 Displaying a Custom Message in the List if the List has No Records A common requirement in a List is to show a custom message if the List has no records.

The List control has built-in properties to make this easy. You can also automatically center the message horizontally and vertically in the List.

Watch Video
Number Category Description
AS_V12--1 Report Server When a long running report is run in a web application, it can affect the throughput for other users because the App Server resources are tied up printing the report.

The Report Server allows you to offload report printing to a separate process, thereby improving the throughput for all users of your application. This video shows how throughput is improved when a report is printed.

Watch Video
Number Category Description
TUI_V12--1 Integrated Login and Session Timeout Warning Many developers use the Tabbed UI as the 'home' page for their applications. It therefore makes sense to integrate Login/Logout functionality directly into the Tabbed UI components.

In this video we show how easily Login/Logout functionality can be integrated into the Tabbed UI, eliminating the need for a separate Login component.

Another common requirement is to provide a user advance warning that their session is about to expire - allowing the user to 'do something' to extend the session. This functionality is now also built into the Tabbed UI.
 
Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4
Watch Video - Part 5
TUI_V12--2 Integrating a 'Change Password' feature when Integrated Login is Used If you are using the integrated Login feature in the Tabbed UI, you can allow the user to change their password by designing a UX component that allows the user to change their password, and integrating this UX into the TabbedUI.

Watch video
TUI_V12--3 Center the Component on the Page (Horizontally) By default, the Tabbed UI consumes the full width of the browser window in which it is rendered. As the browser window is resized the Tab UI also resizes. But if you check the 'Center TabbedUI on page' property you can specify a width property.

Watch video
Number Category Description
UXM_V12--1 Plot My Position on a Map Integrating a mobile device's ability to return location information and a Map are common requirements in a mobile application. In this video we show how a button can be clicked to retrieve the current location of the device, and plot that location on a map control.

Watch Video - Part 1
Watch Video - Part 2
Download component used in video

Postscript: The actions shown in this video are now easier because the Action Javascript action to add a marker to a map now has a new option to use the device current location.

Watch Video
Download component
UXM_V12--2 Aligning Controls in a Panel Card - Using Containers and the Tab Stop Control. A common design requirement is to align control (for example buttons) in a Panel Card so that the control is always centered, left aligned, or right aligned, even after an orientation change.

If buttons are in a Header or Footer section, then the Tab Stop control can be used to align the buttons.

This video shows how this is easily done.

Watch Video
Download component
UXM_V12--3 List Control - Automatically Changing the List Layout on an Device Orientation Change Event The List control allows multiple layouts to be designed. For example, you might have one layout design that you would like to show when the device in in landscape mode and another when the device is in portrait mode.

In this video we show how you can automatically switch from one List layout to another when the device orientation is changed.

Watch Video
Download component
UXM_V12--4 Automatically Changing the Entire Layout of the UX Component on a Device Orientation Change Event A common design pattern in mobile applications is to have completely different screen layouts depending on the device orientation.

In this video we should how the Panel Navigator can be used to easily do this.

Watch Video
Download component
UXM_V12--5 Conditionally Showing Content Based on the Device Orientation A common design requirement in mobile applications is to automatically show or hide certain control based on the orientation of the device.

Typically in in the UX component, controls are shown or hidden automatically by defining client-side show/hide expression. In this video we show how the special system field - 'dialog.orientation' can be use to automatically show/hide controls when the device orientation is changes.

We also show how the onOrientationChange client side event can be used.


Watch Video
Download Component
UXM_V12--6 Adding Custom Swipe Events to Panels Swipe gestures are extremely common in mobile applications. The ability to add your own swipe events to the various Panels (Panel Cards, Navigators and Layouts) in your application is critical in order to create an authentic mobile experience.

In this video we show how you can add your own swipe events to the Panels in a UX components.

Watch Video
UXM_V12--7 Using Absolute Position to Control the Placement of Elements In previous videos we have shown how you can center and right align buttons in the header or footer of a Panel using either the [TabStop] control, or by putting controls into Containers.

In this video we show how a button can be right aligned in a Panel Header by placing the button in a container and then setting the Container position to be absolute.

Watch Video
Download Component
UXM_V12--8 Split View A common design pattern in mobile application is the 'split view'. The split view divides the screen into two logical sections: A left-hand Panel that contains a 'menu' and a right-hand panel that contains the 'detail view'.

If the screen is wide enough (for example, when the device is in landscape mode), the menu panel and the detail panel are both shown. But if the screen is not wide enough (for example, when the device is in portrait mode), the menu panel is automatically hidden (i.e. 'docked').

In this video we should how to create a UX component that is configured to show a 'split view'.

Watch Video
Download Component
UXM_V12--9 Using HTML Reporting in a Mobile Application HTML Reporting is ideal for Mobile Applications because the HTML report can easily be displayed in one of the 'Panels' in a UX component.

In this video we show how a UX component with a Panel Navigator is built. The Panel Navigator has two Panel Cards. The first Panel Card has buttons to print various reports. The second Panel Card is used to display the HTML report.

Watch Video
UXM_V12--10 Panel Layout - Understanding the Different Ways in Which a Docked Panel Can Be Shown - 'Over', 'Slide' and 'Push' Using Panel Layouts that contain multiple child Panels is common when building mobile applications. One or more of the child Panels that are shown in a Panel Layout can be 'docked' (i.e. hidden). Panels can either be explicitly docked, or conditionally docked (for example, on an orientation change).

Panels that have been docked can be shown (typically by clicking on a 'controller' button in a Panel Header). When a docked Panel is shown, you can specify the method use to show the Panel. This method discusses the various methods - Over, Slide and Push

Watch Video
UXM_V12--11 Overview of Different Methods for Specifying the Size of a Panel in a Panel Layout When using a Panel Layout you can optionally specify the size of each Panel that is displayed within the Panel Layout. When you specify the size of a Panel, you can use either an absolute, percentage or relative size. This video discusses the various options.

Watch Video
UXM_V12--12 Creating a 'Split-View' using the Pre-Defined 'Split-View' Template A common pattern in mobile application is the 'split-view' which shows a menu on the left and a work area on the right. On a phone, were space is limited, the menu is hidden and only shown on demand, but on a tablet, the menu is always shown. In this video we show how you can quickly create a UX component that implements a split-view by selecting one of the pre-defined 'split-view' templates. We then explain some of the concepts behind the component.
Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3

 
Number Category Description
UXPG_V12--1 Accessing the Camera A common requirement in Mobile applications is to access the camera or photo library so that a picture can be taken and then uploaded to the server, where the picture will be stored in a binary field in a table, or in a folder on the server.

This is easily done using the built-in 'Image Upload' action in Action Javascript. There are two methods for accessing the camera. You can use HTML5 (if the browser on the native device support HTML5 camera access), or Cordova/PhoneGap (if your application is running in a native shell that uses Cordova).

This video shows how the Image Upload action in Action Javascript can be used to create a button to access the camera.

Watch Video
UXPG_V12--2 How to Build PhoneGap Projects Introduction to using PhoneGap to create your own native shell for a mobile application.

Watch Video - iOS
Watch Video - Android
UXPG_V12--3 Displaying .PDF, .XLSX, .DOCX Files Unlike desktop browsers, the browsers on mobile devices typically do not have built-in handlers for displaying .pdf, .xlsx, .docx and certain other types of files.

If your mobile application is wrapped using PhoneGap you can easily use the built-in native document viewer on both Android and iOS devices.

In this video we show how to build a PhoneGap app that can display .pdf and Microsoft Office files.

Watch Video
UXPG_V12--4 Using Native Transitions If you wrap a UX component in a PhoneGap shell you can now use native transitions to animate certain Panel Cards in your app into view. This feature relies on the Native Transitions PhoneGap plugin (iOS only).

In this video we show how the Native Transitions plugin can be called.

Watch Video
Number Category Description
UXG_V12--1 Handling Missing Images When a UX or Grid component displays images, there is a possibility that an image referenced in an image tag is missing. A new onImageError client side event allows a developer to programmatically handle this situation and decide what image to display in place of the missing image.

Watch Video
UXG_V12--2 Understanding Component Aliases and the Use of Placeholders in Javascript Code When you write your own Javascript code in a Grid or UX component, you often use 'placeholders' (such as {Dialog.object} ) in your code. In this video we explain in depth how these placeholders work and we discuss the concepts of a component 'alias'.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Part 3
Watch Video - Part 4
Watch Video - Part 5
UXG_V12--3 Image Upload to a Character Field When you upload images in either the Grid or UX component, the target field can either be a binary field or a character field. In the case of a character field, the filename of the image is stored in the field and the image file itself is stored in a file in the specified 'upload folder'.

The filename of the image that is stored in the target character field can be a fully qualified filename, or more likely, you will store the 'shortfilename' (i.e. a relative filename).

If you choose to store the 'shortfilename', then you must configure an image path property so that the image filename can be resolved.

This video discusses this issue.

Watch video
UXG_V12--4 Overview of How to Localize a UX or Grid Component In this video we give a brief overview on how a Grid or UX component can be localized so that the same component can be used for different languages. The technique involves using either Language tags (<a5:r>) or Text Dictionary tag (<a5:t>) around text strings that need to be localized.

Watch Video - Part 1
Watch Video - Part 2

For certain languages, the text flow direction is 'right to left' (e.g. Hebrew, Arabic). In this video we show how you can execute Javascript to change the text flow direction for the whole page. The Javascript is added to the component's render complete event. It sets the text direction using this code: document.body.style.direction= 'rtl'

Watch Video - Part 3
UXG_V12--5 'NotInList' Event for Auto-Suggest and Edit-Combo Controls The 'NotInList' event fires when the user enters a value into an Auto-suggest or Edit-combo control and the value entered is not is the list of available choices for the control.

Watch Video
UXG_V12--6 Accordion Control - Changing the Background Color of the Pane Selector When you define the properties of an Accordion control you can specify class names to apply to the Title Band when the band is opened, closed, or disabled. This can be used to change the appearance of the title band depending on its state.

In this video we show how the background color and font title of the title band can be dynamically controlled through custom CSS classes.

Watch Video
UXG_V12--7 E-mailing a Report A common pattern in both the UX and Grid component is to place a button on the component to print a Report and display the Report in a window, div or TabbedUI pane. However, instead of displaying the Report, you might want to send it as an email.

The Action Javascript action to Print a Report has an option to call an Xbasic function when the Report has printed.

In this video we show how you can use this option to e-mail the report using the Mandrill e-mail service.

(Note: The sample function prototype shown in the video is only available in build 4241 or above.)

Watch Video - Part 1
Watch Video - Part 2
UXG_V12--8 Using CSS Icons from the Font-Awesome Icon Font Library The Font-Awesome CSS Icon library (http://fontawesome.io) is bundled with Alpha Anywhere and can be used in the UX, Grid and TabbedUI components.

In this video we show how to use the Font-Awesome font library and CSS icons in general.

Watch Videos - Part 1
Watch Videos - Part 2
Watch Videos - Part 3

 

UXG_V12--9 Using Chrome for Working Preview - Debugging Javascript using the Chrome Debugger; When you are in the Component builders, the Working Preview window now allows you to choose whether you want to use Internet Explorer or Chrome.

Using Chrome has several benefits, including the ability to 'detach' the Working Preview window so that it can be moved to a second monitor and be kept open while you continue to design your component. You can also use the Chrome Debugger to debug your Javascript or inspect elements on the page.

Watch Video - Part 1
Watch Video - Part 2
Number Category Description
IW_V12--1 Executing Shell Commands Directly from the Interactive Window You can now execute shell commands directly from the Interactive Window.  You no longer have to open a separate CMD window to execute shell commands. This can be a very useful time saver for developers.

For example, when building an application that uses REST APIs, it is common for the API documentation to show how you can use CURL to execute the REST command. Using the Interactive Shell, CURL commands can be executed directly from the Interactive Window.

Watch Video - Part 1
Watch Video - Part 2
Number Category Description
WS_V12--1 Alternative Logins - Logging into an Application using Google, Facebook, LinkedIn or Twitter When the Application Server Security Framework is turned on you can require that a user must log into an application before they can use it. A user will enter the userid and password associated with their account in the Security Framework in order to log into the application.

You can provide an option for a user to login to their account using the credentials from a social network as an alternative to their account userid/password.

You can also allow someone to log into an application using social network credentials and then automatically create a new account in the Application Server Security Framework for that user.

These videos demonstrate this functionality. If you have not yet read the documentation on Alternative Login, it is recommended that you read the documentation before watching the videos. Click here to read the documentation.

Video 1 - Setting up the Providers
Video 2 - Creating Named Providers
Video 3 - Configuring Web Security
Video 4 - Adding Alternative Login to a UX Component
Video 4 - Testing Alternative Login