Videos outlining what is new in 

Alpha Anywhere powered by Alpha Five v12

UX Component	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 Component	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 Component	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 Component	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 Component	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 Component	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
Grid Component	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
UX Component	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 Component	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 Component	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 Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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.
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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.
UX Component - List Control	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 Five 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
UX Component - List Control	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 Five 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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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.
UX Component - List Control	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
UX Component - List Control	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.
UX Component - List Control	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.
UX Component - List Control	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.
UX Component - List Control	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.)
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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.)
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
UX Component - List Control	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
Application Server	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
UX Component	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 Component	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 Component	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 Component	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 Component	'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 Component	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 Component	Understanding the 'Injectible Content' Container Type - Moving Controls To A Different Location on the Screen Placing a search box in a List Header	By placing controls in container and then setting the container type to 'Injectible Content', you can easily move controls in a UX component from the location where they would normally render to a completely different location on the screen. This technique is very useful when you want to put controls in the 'Data Header' section of a List control, as shown in this video. Watch Video Download components
UX Component	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 Component	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 Component	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 Component	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 Component	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 Component	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 Component	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 Component	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 Component	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 Component	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.
Tabbed UI Component	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
Tabbed UI Component	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
Tabbed UI Component	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
UX Component	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 Component	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 Component	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 Component	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 Component	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 Component	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 Component	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 Component	Quick Panel Genie	The Quick Panel Genie allows you to quickly create complex Panel Layouts. Watch Video
Reports	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.
Reports	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.
Reports	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.
Reports	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
UX Component	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 Component	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 Component	Advanced Export - Using Report Definition	Prior versions of Alpha Five 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 Component - Mobile	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
UX Component - Mobile	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
UX Component - Mobile	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
UX Component - Mobile	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
UX Component - Mobile	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
UX Component	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 Component	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 Component	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 Component	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 Component	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 Component	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
Grid Component	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
UX Component - Mobile	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
UX Component - Mobile	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
UX Component	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 Component	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 Component	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 Component	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 Component - Mobile	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
UX Component - Mobile	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
UX Component	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 Component	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
Reports	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
UX Component	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 Component	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 Component - Mobile	How to Build PhoneGap Projects	Introduction to using PhoneGap to create you own native shell for a mobile application. Watch Video - iOS Watch Video - Android
UX Component	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 Component	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 Component	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 Component	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
Reports	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.
Grid Component	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
Reports	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
Grid Component	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
Grid Component	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
Grid Component	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
Grid Component	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
Grid Component	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
Grid Component	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
Grid Component	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
Grid Component	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
Grid Component	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
Grid Component	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 Component	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 Component - Mobile	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
Reports	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 Component	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
Grid Component	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
Grid Component	Advanced Export - Using Report Definition	Prior versions of Alpha Five 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
UX Component	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)