Alpha Anywhere 4.5 Videos

 

This page contains a listing of all videos published for Alpha Anywhere 4.5.0 through Alpha Anywhere 4.5.5.0. Not all releases of 4.5 included videos. If you do not see a specific version of Alpha Anywhere 4.5 listed (e.g. 4.5.5.0), it means no videos were published with that release.

Alpha Anywhere 4.5.0

The videos below were published as part of the Alpha Anywhere 4.5.0 release on September 12, 2017.

Category Title Description
UX Component Multi-Lingual PhoneGap Applications Normally, UX components can be localized by wrapping the strings you want to translate in either language tags (<a5:r>...</a5:r>) or text dictionary tags (<a5:t>...</a5:t>). The string translation takes place on the server when the component is rendered. But in a PhoneGap application, the component is loaded from the file system on the device and so you can't use language or text dictionary tags. Instead, you must use a client-side approach (using Javascript) to translate the strings into the selected language.

In this video we show how you can implement client-side language translation.

Watch Video

Download component

Date added: 2017-08-04
UX Component - FormView Control Client-side Show/Hide and Enable Expressions that Reference External Data Typically, the client-side show/hide and enable expressions in a FormView layout reference field values that are in the data being displayed in the Form. For example, the Form might have a field called Country and you might want to show a container only when the Country field has a certain value.

However, there are also use cases where you want to reference external data (i.e. the value in some other control on the UX) in a client-side expression. This video shows how this is done using FormView state variables.

Watch Video

Download component

Date added: 2017-08-14
UX Component - ViewBox Control Client-side Show/Hide Expressions that Reference External Data When you define the layout for a ViewBox control, the template can use the {*if} directive to conditionally show/hide content in the ViewBox. Typically the expression in the {*if} directive will reference data in the ViewBox data. But in some cases you might want to reference data that is external to the ViewBox (for example, your UX might have a control whose value you want to reference in the {*if} directive's conditional expression). In order to do this, you must create a ViewBox state variable that is set to the value of the external data.

In this video we show how external data is used in a ViewBox conditional expression.

Watch Video

Download component

Date added: 2017-08-15
UX Component - List Control Displaying Data in a List using a StarRating Control Many applications allow you to rate something by tapping on a star in a StarRating control. The UX component has a stand-alone StarRating control (accessed by selecting [More...] in the UX Builder Controls toolbox), but in some cases you might want to display data in a List control using a StarRating control.

In this video we show how this is easily done.

Watch Video

Download component

Date added: 2017-08-18
UX Component - List Control Row Drag Actions A common user interface pattern seen in mobile apps that use a List is to allow the user to drag on a row in the List to invoke some type of action. For example in the iOS Email app a user can drag on a row to archive the row, mark is as unread/read, or move the row to another folder.

In this video we show how you can implementing row drag behavior an a List control.

Watch Video

Download component

Date added: 2017-08-25
UX Component - List Control Reorder List Rows by Dragging Row to New Position In certain applications where a List control is used, it is necessary to allow the user to reorder the rows in the List. A common user interface pattern used to reorder List rows is to allow the user to drag a row to its new position in the List.

In this video we show how you can add 'drag to move row' behavior to a List control.

Watch Video

Download component

Date added: 2017-08-28
UX Component - List Control Displaying Summary Values in Column Footers In some applications you might want to compute summary values (e.g. count, total, average, etc.) for data in a List column and then display that data below the last row of data in that column.

In this video we show how this is done.

Watch Video

Download component

Date added: 2017-09-02
UX Component Adding Keyboard Shortcuts to a Component In this video we show how you can add support for keyboard shortcuts to a UX component. Keyboard shortcuts can speed up a user's interaction with a component. For example, you could configure the Ctrl-S key as a shortcut for saving the data in the a UX.

Watch Video

Download component

Date added: 2017-09-02
UX Component Using the Enter key as a Keyboard Shortcut to Navigate to Next Control For users filling in a UX with many controls, pressing the Enter key to navigate from field to field, can be a useful productivity boost.

In this video we show how the Keyboard Shortcuts feature in the UX component can be used to map the Enter key to navigate between input controls.

Watch Video

Download component

Date added: 2017-09-02
UX Component - List Control Displaying Data in a List using Switch, Radio Button, Checkbox, Integer Increment and Map Controls The UX offers several different control types that can be used to display data in the List.

In this video we demonstrate several of the control types that can be used in a List.

Watch Video

Download component

Date added: 2017-09-02

Alpha Anywhere 4.5.1

The videos below were published as part of the Alpha Anywhere 4.5.1 release on October 12, 2017.

Category Title Description
UX Component - List Control Reorder List Rows by Dragging Row to a new Group when Client-side Grouping is Enabled When client-side grouping is enabled in a List, the order of the rows in the List is determined by the sort expression that is applied to the data so that the List data can be grouped correctly. That means that if you drag a row to a new position, and then drop, the row will immediately snap back to its original position (because the client-side sort will be re-applied to the List data).

However, you might want to use drag reorder to move a row from one group to another. This is done by changing data in the row that is moved so that in the onMoveEnd event, the data in the row is updated and then, when the client-side sort is applied to the List data, the row will continue to appear in the target group.

In this video we show how a list of customers, grouped by Country, can be re-arranged by dragging a customer from one country to another.

Watch Video

Download component

Date added: 2017-09-14
UX Component - Spreadsheet Input Control Using the Spreadsheet Input Control In certain applications where a user needs to input data quickly, a spreadsheet style data entry control can be very efficient.

In this video we show how you can add a Spreadsheet Input control to a UX component.

Watch Video

Download component

Date added: 2017-10-02

Alpha Anywhere 4.5.2

The videos below were published as part of the Alpha Anywhere 4.5.2 release on December 14, 2017.

Category Title Description
UX Component - Tree Control Populating a Tree Control using a SQL Query and Defining a Javascript Event for Each Tree Leaf Node The Tree control can be automatically populated with data derived from a SQL query. When doing this it is common to want to execute some Javascript code when the user selects a leaf node in the tree.

In this video we show how this is done.


Watch Video

Download component

Date added: 2017-11-02
UX Component Selecting Multiple Values in an Auto-suggest or Edit Combo Control The Auto-suggest and Edit Combo controls have always allowed you to set a mode where multiple selections can be made. However, each time you make a selection the pick list is closed and you must reopen the pick list before you can make your next selection.

Now, a new property in these controls allows you to specify that the pick list should stay open after each selection, allowing you to make multiple selections more easily.


Watch Video


Date added: 2017-11-15
UX Component - ControlBars Using the Built-in ControlBar Templates The ControlBar is highly configurable. This allows you to create solutions for many different use cases. There are several common patterns that developers use and for many of these patterns you can get a quick start by selecting one of the pre-defined ControlBar templates. For example, common patterns addressed by the pre-defined templates are:ControlBar with a menu button that animates in a menu from the left or right side of the Panel, ControlBar with buttons that reveal animated drop-down menus, ControlBar with buttons that allow you to create a tabbed user interface.

In this video we show how you can create a new ControlBar from a template and then continue to modify the resulting ControlBar.

Watch Video

Date added: 2017-11-28
UX Component Sample UX Component - Amazon Mobile Shopping Look Alike Example The Amazon mobile shopping App is one of the most recognizable mobile Apps. In this video we show how the look and feel of this App can be recreated using the UX component.

Open the App in a Browser

Watch Video - Overview

How the Products List is Populated
Watch Video
How the Back Button in the ControlBar is Implemented
Watch Video
How the Badge on the Shopping Cart Icon is Implemented
Watch Video
How the Search Box is Implemented
Watch Video
How the Product List Layout is Implemented
Watch Video
How the Detail View is Implemented using a ViewBox Control
Watch Video

Date added: 2017-12-13

Alpha Anywhere 4.5.3

The videos below were published as part of the Alpha Anywhere 4.5.3, which was released on April 9, 2018.

Category Title Description
UX Component - PhoneGap Using the Instant Update Feature in a PhoneGap Application After you have created a PhoneGap application from a UX component, if you subsequently want to update the application you need to go through the entire release cycle again (i.e. submit to PhoneGap Build, then submit to the appropriate App Store). However, if you enable the Instant Update feature when you build your application in the first place, you can make certain types of updates to your application without having to go through the release cycle again.

Instant Update can be used as long as you are not changing the PhoneGap plugins used by your application, or the splash screens, etc. You can perform an Instant Update on an application as long as the changes to the application are limited to changes in the application's UX component.

In this video we show how the Instant Update feature operates.

Watch Video

Date added: 2017-12-24
Grid Component - Alphabet Button Search Adding Bubble Help with Record Counts to Buttons in Alphabet Button Search Bar The Alphabet Button search bar in a grid is a convenient way for searching for all records where a field starts with a particular letter. It can be useful for the user to know how many records are in each group before they actually press the button to execute the query.

In this video we show how bubble help is added to each button in the Alphabet button search bar. When the user hovers the mouse over the button, the bubble help shows how many records are in the group.

Watch Video

Download component

Date added: 2017-12-31
Reports Alternating Background Colors for Records in the Detail Section It is common in reports to print alternating rows in the report's Detail section with different background colors.

This video shows how this is done.

Watch Video

Date added: 2018-02-01
UX and Grid Components Display Date and DateTime Values using Formatted Text Date and datetime values are easier to comprehend when they are formatted in a 'friendly' manner (e.g. today, in 1 hour, tomorrow).

In this video we show how you can display date and datetime values using 'friendly text' in a Grid and UX component.

Watch Video

Date added: 2018-02-04
UX Component ViewBox - Client Side Reporting Using the ViewBox control, it is possible to create highly stylized client-side reports. In this video we build on a previous view in which a sample Invoice report is created. The video shows how you can configure the report to allow the invoice line-items to be collapsed (i.e. hidden) or expanded. The video also shows how you can add a button to the report to generate a PDF file for the report.

Watch Video

Date added: 2018-02-10
UX Component Mobile Date Picker In a mobile app, the standard date picker control that the UX uses may be too big for the screen. In this case, it might be desirable to use a date picker that is more tuned to a mobile application, such as a control that uses Spin Lists to select the month, day and year.

In this video we show how to use Spin List controls to edit the value in a date field.

Watch Video

Download component

Date added: 2018-02-23
UX Component - List Control Displaying Friendly Dates in a List Control The data picker control allows you to display dates in a friendly format (i.e. todayif the date is today's date).

In this video we show how date values displayed in a List control can be displayed in a friendly format.

Watch Video

Download component

Date added: 2018-02-23
UX Component - ViewBox Control Using a ViewBox to Create Nice Looking Email Messages The ViewBox component can create beautifully styled HTML by merging data into a template to create a customized, styled HTML document. You might want to email the contents of the ViewBox to someone as an HTML message.

In this video we show how a ViewBox can be used to create some nice looking HTML output (by merging JSON data for a customer's order into an HTML template) and then sending the resulting output as an HTML email.

Watch Video

Download component

Date added: 2018-03-02
UX Component - ControlBar Control Scrolling disclosure menus A common practice when building ControlBars is to have a button on a ControlBar that displays a menu that slides in from the left or right. The menu can be implemented using a List (which is inherently scrollable), but can also be implemented using a disclosure (which is a much simply solution).

In this video we show how the disclose menu can be made to scroll.

Watch Video

Date added: 2018-03-27
Salesforce Creating a Salesforce Connected Application Before you can work with Salesforce data in an Alpha Anywhere application, you must first define a new Connected Application in your Salesforce account and a Named Resource in your Alpha Anywhere Web Project.

This video walks through the process of creating a Salesforce Connected Application

Watch Video

Date added: 2018-04-06
Salesforce Creating a Named Resource Provider Before you can work with Salesforce data in an Alpha Anywhere application, you must first define a new Connected Application in your Salesforce account and a Named Resource in your Alpha Anywhere Web Project.

This video walks through the process of creating a new Named Resource Provider in your Alpha Anywhere web project.

Watch Video - Part 1
Watch Video - Part 2


Date added: 2018-04-06
Salesforce Making REST API Calls Then SalesforceAPIRequest() function makes it easy to make REST API requests to the Salesforce API. You can either make a request directly against an endpoint documented in the Salesforce API documentation, or you can use the Salesforce SQL like query language, SOQL, to execute queries.

In this video we show both uses of the SaleforceAPIRequest() function.

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

Date added: 2018-04-06
Salesforce Creating a Connection String You can create a Salesforce connection string (just as you create connection strings to point to SQL databases) that then allows you to treat Salesforce as a data source for a component, or a control.

In this video we show how a Salesforce connection string can be defined and then used to create a Grid component.
Watch Video - Part 1
Watch Video - Part 2

Date added: 2018-04-06
Salesforce Building a UX Component That Uses the Salesforce API In this video we show how a UX component can be built to display Salesforce data. The UX component does a query to retrieve the a list of accounts from Salesforce and it displays the result in a List control. When the user clicks on a row in the List, details for the selected account are shown by making another API request to Salesforce.


Watch Video

Download component

Date added: 2018-04-06
Creating a REST API Creating a simple REST API You can create REST APIs in Alpha Anywhere to expose functionality defined in an Xbasic class or a Node API.

In this video we show how a simple API is defined.

Watch Video

Date added: 2018-04-06
Creating a REST API Passing parameters to a method In the previous video we showed how to expose a very simple method in a REST API. The method did not take any arguments. Typically most of the methods you expose in your API will take arguments. These arguments can be supplied to the method being called in various ways (as part of the request URL, in query parameters, in the request header, or in a POST body).

In this video we show how a method that takes a single parameter can be exposed in a REST API.

Watch Video

Date added: 2018-04-06
Creating a REST API Authenticating a method in a REST API When you create a REST API that exposes one or more methods, you might want to require that some (or all) of the methods exposed by the API should require some type of authentication before the call can be made.

In this video we show how to require authentication for certain methods in your API.

Watch Video

Date added: 2018-04-06
Creating a REST API Auditing an API You can use the audit feature when you create a REST API to keep track information such as how often a particular endpoint is called, how long each method takes to execute. You might want this information so you can implement some type of rate limiting for you API to ensure that it is not being abused.

In this video we show how you can define methods to audit the use of your API.

Watch Video

Date added: 2018-04-06
Creating a REST API Defining the Encoding for the Body Data A common use case for an API is to create a new record in a database or to update an existing record in a database. In these cases, the request will typically be a POST and the data for the new or updated record will be in the request body. The data in the body can either be FORM or JSON encoded.

Watch Video

In this video we will show the difference between FORM and JSON encoding the body data.

Date added: 2018-04-06
Creating a REST API Returning Complex JSON Data In this video we show how to create a REST API that returns complex JSON data for a customer. The API will return data about a particular customer, including all of the orders placed by that customer, and for each order, all of the line items in that order. The data will come from querying the sample Northwind database. The video shows an example of the type of complex data that a REST API is often designed to return.

Watch Video

Download files

Date added: 2018-04-06
Creating a REST API Importing a Swagger Definition When you create a REST API you can either start by defining an Xbasic Class that defines the methods you want to expose in your API, or you can start by importing a Swagger definition for the API. Swagger is an open source standard for describing REST APIs. When you import a Swagger API definition, Alpha Anywhere will create a stub Xbasic class that you can then edit.

In this video we show how you can import a Swagger definition.

Watch Video

Date added: 2018-04-06

Alpha Anywhere 4.5.4

The videos below were published as part of the Alpha Anywhere 4.5.4, which was released on April 19, 2018.

Category Title Description
Auditing Auditing Table Edits In many applications it is desirable to keep track of every edit made to a SQL table so you can know what fields were changed, who made the edit and when the edit was made. This is often achieved by added update, insert and delete triggers to the SQL database. But in cases where it is not possible to modify the database, you can use the built-in auditing feature in Alpha Anywhere.

In this video we show how the auditing feature is set up and used.

Watch Video

In cases where updates to SQL tables are made in your own Xbasic code (as opposed to from UX and Grid components), it is necessary to manually update the audit log. In this video we show how this is done.

Watch Video

Date added: 2018-15-06

Alpha Anywhere 4.5.4.1

The videos below were published as part of the Alpha Anywhere 4.5.4.1 on June 18, 2018.

Category Title Description
UX Component Cascading DropdownBoxes Using the Client-side Data Cache Cascading dropdown boxes allow you to dynamically change the choices in a child dropdown box based on the selection in the parent dropdownbox. The UX component makes it very easy to define cascading dropdownboxes. However, in applications that are designed to work offline, you cannot use the standard way of creating cascading dropdownboxes because if you are offline you cannot make the Ajax callback to populate the child dropdownboxes when the parent dropdownbox value is changed. However, you can still implement cascading dropdown boxes in offline applications by populating the dropdownboxes from data in the client-side data cache.

In this video we show how data in the client-side data cache is used to create cascading dropdownboxes.

Watch Video

Download files

Date added: 2018-04-30
UX Component - Map Control Computing Distance and Travel Time Between Points A common requirement in mapping applications is to compute a route (showing driving directions, distance and travel time) between points.

In this video we show how a route, defined by addresses in a List control is used to compute driving directions, distance and travel times between points on the route. The code is all generated automatically by Action Javascript.


Watch Video

Download files

Date added: 2018-04-30
SOAP Services Using the Sample WCF Service You can easily consume SOAP services from your Xbasic code. But it can be difficult to find publicly available SOAP services to test your code with. Using the sample WCF SOAP service that ships with Alpha Anywhere, you can easily create test code that shows how to consume methods in a SOAP service.

In this video we show how the sample WCF service can be used.

Watch Video

Date added: 2018-05-06
UX Component - List Control Running Totals This video shows how you can compute a column of running totals.

Watch Video

Download files

Date added: 2018-05-31
UX Component - ExpandingMenu Control Collapsing Menu When Selecting an Action When you select the action on a leaf node in an Expanding Menu control, you might want to collapse the menu so that some or all of the expanded nodes are collapsed.

In this video we show how an expanded node in an Expanding Menu control can be collapsed.

Watch Video

Download files

Date added: 2018-06-02

Alpha Anywhere 4.5.4.6

The videos below were published as part of the Alpha Anywhere 4.5.4.6 on November 7, 2018.

Category Title Description
UX Component - List Control Consuming Complex (Hierarchical) JSON Data in a List The JSON data you display in a List control may contain nested arrays of data. In this video we show two different ways in which the nested arrays of data can be displayed.


Watch Video

Download files

Date added: 2018-07-30
UX Component Understanding the screen.height Property When setting the height of a container you cannot use percentages. However, you use the special screen.height variable to represent 100% of the available height.

In this video we show how a container's height can be set using the screen.height property.

Watch Video

Date added: 2018-07-30
UX Component Ad-hoc SQL Query Builder This video shows a sample UX component that allows users to perform ad hoc SQL Select queries against any table in a database. The results can be viewed in a tabular format or exported to Excel.

Watch Video

Date added: 2018-08-03
UX Component - ExpandingMenu Control Dynamically Populating an Expanding Menu with Ajax Callbacks This video shows how you can dynamically populate an Expanding Menu control with data computed in an Ajax callback.


Watch Video

Download files

Date added: 2018-08-09
UX Component Displaying an 'Action Sheet' A common user-interface technique in iOS applications is an Action Sheet - a popup menu with a series of options. In this video we show how easy it is to add an Action Sheet style menu to a UX component.

Watch Video

Date added: 2018-08-29
UX Component - Advanced Search Control Using the AdvancedListSearch Control to Search in a List Based on SQL Database For UX Components that contain List controls that are based on SQL databases, the Advanced Search control exposes powerful features for users to search for specific records in a List. The Advanced Search Control allows users to define complex queries and to save these queries to a repository for future reuse.

In this video we show how the Advanced Search Control is added to a UX component and how it is configured.

Watch Video

Date added: 2018-09-08
Grid Component - Advanced Search Control Adding an Advanced Search Control to a Grid Component The Advanced Search Control provides an alternative to the Grid Search Part for enabling users to search for data in a Grid. The Advanced Search Control has advantages over the Grid Search Part in that it allows the user to search on all of the fields in the Grid, not just the fields selected for the Search Part.

In this video we show how the Advanced Search Part is added to a Grid component and how it is configured.

P.S. You may find it helpful to watch the videos for using the Advanced Search Control in a UX component before watching the videos on using the Advanced Search Control in a Grid.

Using the Advanced Search Control in a Grid
Watch Video

Using the Advanced Search Control in a UX Component
Watch Video

Date added: 2018-09-08
UX Component - Transient Messages Displaying Transient Messages A common design pattern in Web and Mobile application is to display 'transient' messages to the user. The messages typically confirm that an action was done or display progress to the user. The GMail web application, and also the GMail mobile applications make extensive use of transient messages.

In this video we show how you can easily add transient messages to the UX component using Action Javascript (transient messages are also available in the Grid component).

Watch Video

Date added: 2018-09-21
UX Component - Kanban Layout Introduction to Kanban List Layouts Kanban Lists display data organized by category. Users can move List rows from one category to another using drag and drop. Users can also re-order the data within a category using drag and drop.

In this video we show a List control with both a columnar and a Kanban layout.

Watch Video
Download files

Date added: 2018-10-03
UX Component - Kanban Layout Creating a List with a Kanban Layout In this video we show how a Kanban layout can be defined for a List.

Watch Video

Download files

Date added: 2018-10-03
UX- Component - Kanban Layout Adding Color Coding and Summary Values to a Kanban Layout In this video we show some advanced features of a Kanban layout. We show how you can add color coding to the layout (so that List rows in different categories are colored differently and how you can summary data to each category.

Watch Video

Download files

Date added: 2018-10-03
UX Component Persisting Edit in a Kanban List to a SQL Database In this video we show how a Kanban List can be based on a SQL database and how edits to the List can be saved in the database.

Watch Video

Download files

Date added: 2018-10-03
UX Component - List Control Responsive Columns In this video we show how to make a responsive List control where columns in the List are automatically hidden when the List width falls below a specified value.

Watch Video

Download files

Date added: 2018-10-17
UX Component - List Control Horizontal Scrolling When a List has a large number of columns, you may prefer to enable horizontal scrolling for the List rather than trying to dynamically adjust the width of each List column so that all columns are visible.

Watch Video

Date added: 2018-10-17
AlphaDAO - Multi-tenant Applications How to Create a Multi-tenant Connection String When you build multi-tenant SASS applications that use a shared database, each table in the database must have a tenant id field and all of your SQL queries must include the tenent Id. When you use a multi-tenant connection string, the tenant id is automatically injected into all SQL statements before the statement is sent to the database. This makes it easier to build multi-tenant SASS applications, or to convert an existing application to a multi-tenant application because you do not have to manually adjust all of your SQL statements.

In this video we show how a multi-tenant connection string is defined and then we show the results when a SQL SELECT and INSERT statement are executed.

Watch Video - Part 1
Watch Video - Part 2
Watch Video - Behind the scenes


Date added: 2018-10-21
UX Component Defining Manifest for On-Device Data When you build PhoneGap applications for offline usage, you may want to store files on a mobile device so that these files can be accessed when the device is offline. The UX builder has an action in Action Javascript that allows you to download all of the files defined in a 'manifest'. This video shows how this manifest can be created.

Watch Video

Date added: 2018-10-27
Xbasic Audit-trail Driver This video shows how you can create a custom AlphaDAO connection string to create an audit trail every time a CRUD operation is performed.


Watch Video

Date added: 2018-10-28
UX Component - List Control Page Navigation Bar In a Grid component you can add a Navigation Bar to allow the user to navigate from one 'page' or records to another. In a List control (that is based on a SQL database, has pagination tuned on and has the pagination method set to Navigation Buttons), you can also add a Navigation Bar to allow the user to navigate from one 'page' or records to another.

In this video we show how to configure a List control to display a Navigation Bar.

Watch Video

Date added: 2018-11-05

Alpha Anywhere 4.5.4.9

The videos below were published as part of the Alpha Anywhere 4.5.4.9 on February 14, 2019.

Category Title Description
UX Component - List Control Setting the order and visibility of columns in a List Layout

You can allows users to dynamically show/hide List columns at run-time and also to change the order in which the columns appear in the List by adding a List column show/hide button to a UX component.

In this video, we show how a List column show/hide button can be added to a UX and we show how it can be used to change the columns in the List are run-time.

Watch Video

In the video, we show how an event is fired when the List layout is changed. This event is defined in the List builder - onListColumnSelectorChanged event.

Date added: 2018-02-13