Alpha Anywhere 4.6 Videos

IN THIS PAGE

The videos below were published for Alpha Anywhere 4.6.

Alpha Anywhere 4.6.0

Alternating Row Colors in a List Control

In this video, we show how you can configure a List control to show alternating colors for even and odd rows.

List Control Map Layout

A List control can have multiple Layouts. The most common Layouts are columnar and freeform. But a List can also have a Kanban layout and a Map layout. The Map layout displays a Map control in the List and shows markers on the map for each row of data in the List.

In this video, we show how the Map layout is configured.

Two-factor Authentication

Demonstration

Two-factor authentication is more secure than single-factor authentication because even if a user's password is stolen, the user account is still protected because the person who stole the password will likely not be able to get the authentication code to complete the login to the application.

In this video, we demonstrate a login component that utilizes two-factor authentication.

Configuring the Extended User Information Table

Before you configure a web project to use two-factor authentication, you first have to create an Extended User Information table for your web project.

This video shows how to create an Extended User Information table.

Configuring a Web Project to use Two-factor Authentication

In order to use two-factor authentication in a web project you must configure settings in the application Project Settings.

In this video, we show how two-factor authentication settings are defined.

Setting User Preferences for Two-factor Authentication

Two-factor authentication is a preference setting for each user in your application. Some users may elect to turn two-factor authentication on, while others may prefer single factor authentication. If a user turns two-factor authentication on, they must specify which option they wish to use - SMS, Email or Google Authenticator.

A sample UX component is provided to allow users to set their two-factor authentication preferences. In this video, we show how to use this sample UX component.

Chunked Responses - Sending Intermediate Responses to the Client

Normally, when you make an Ajax callback from a UX component, the Xbasic function that handles the callback completes its processing and then returns Javascript to the client. In some uses cases where your Xbasic function takes a "long" time to execute, you might want to send some type of intermediate message to the client telling them that the function is still processing and perhaps letting the user know what stage the function is at.

In order to send back intermediate responses to the client while the Xbasic function is still processing, you can set the Ajax callback to allow chunked responses.

In this video we show how you can configure an Xbasic function to do chunked responses.

Saving and Restoring List Column Layouts

The Show/hide list columns Defined Control can be used to give the user the ability to show, hide, and reorder columns in a List's layout. The layout can be saved, allowing you to later restore the layout the user created when they return to the application.

When the user changes the layout of the List columns, the onListColumnSelectorChanged event is triggered. This event can be used to persist the List's modified layout.

In this video, we show how to use the UX component's .persistListColumnLayout() and .restoreListColumnLayout() methods to save and restore the Column layout for a List control.

Working with Git Repositories

The Web Control Panel is tightly integrated with Git and GitHub. You can make any Web project into a Git repository and you can connect this repository to a remote GitHub repo. You can perform many of the basic Git commands (such a committing files, pushing to a GitHub repository and pulling from a GitHub repository directly from menus on the Web Control Panel.

In this video, we show how to make a Web Project into a Git repository, how to connect this repository with a remote GitHub repository, how to push files to the remote Git repository and how to create a new Web project that is cloned from a remote GitHub repository.

Submitting TransForm Data Directly to a SQL Database

Alpha TransForm is a cloud service running on AWS with its own database back-end to store forms and their associated data. If you would prefer to also store submitted form data in another database, you can use the onSubmit event to save form data to your SQL database.

In this video, we show how to create a TransForm onSubmit event to store form data in your own SQL database using the TransForm onSubmit Genie in Alpha Anywhere.

Alpha Anywhere 4.6.1

Debugging Javascript Code

Alpha Anywhere has an embedded version of Chrome, which means you can use the Chrome debugger to debug your client-side Javascript code.

In this video, we show how you can step through client-side Javascript code in the Chrome debugger and how you can use the debugging Console window to watch the value in different variables in your Javascript code.

Using a Genie to Expose Tables in a SQL Database

Alpha Anywhere has a powerful REST API feature that allows you to create REST APIs for many different tasks. A common use case for a REST API is to expose data that is stored in a SQL database. The REST API Genie makes it easy to create an API that allows data to be retrieved from a SQL database and also to be updated/inserted.

In this video, we show how you can use the Genie to create a REST API that exposes data in selected tables in a SQL database.

Using HTML Templates in the List, ViewBox and Free-form HTML Layout Control

The UX builder comes with several attractively designed HTML templates than can be used when designing List controls, ViewBox controls and Free-form HTML Layout controls. In this video we show how to use the pre-defined HTML templates to create some very attractive UX components.

Alpha Anywhere 4.6.1.1

No videos were released with Alpha Anywhere 4.6.1.1

Alpha Anywhere 4.6.1.2

Debugging Server-side Javascript

You can run Javascript code from Xbasic using the xbasic_execute_javascript() function. You can also debug into the Javascript code while it is executing as shown in this video.

Step Indicator Control - Repopulating and setting Direction

The Step Indicator control is a convenient way for showing progress through a task. In this video, we show how the list of steps can be dynamically changed at run-time and how the direction of the steps can be changed to support right-to-left languages such as Hebrew and Arabic.

Alpha Anywhere 4.6.1.3

Weather Control

The UX Component comes with a pre-build control for displaying weather for a particular city. The weather data comes from Accuweather.com and you are required to get an API key from Accuweather.com in order to use the control.

In this video we demonstrate how you can add a weather control to a UX component.

In-place Editing in a List Control

Overview

By default, a List control is used to display data, not to edit data. It is possible to edit the data in a List using either a List Detail View, or using in-place editing.

In this video, we show how you can configure a List to use in-place editing.

Dropdown Control

In this video, we show how a dropdownbox can be defined for in-place editing of data in a List.

Dynamically changing choices in a dropdownbox at runtime

In this video, we show how the choices in a dropdown box used for in-place editing can have the choices shown in the dropdown box dynamically changed at run-time.

Putting all rows into edit mode

A common pattern when using Lists that allow in-place editing is to configure the List so that all rows in the List are in edit mode (rather than requiring the user to put individual rows into edit mode before making edits).

In this video, we show how you can execute Javascript to put all of the rows in the List into edit mode.

Free-form Layouts

In place-editing in a List control can also be used in free-form List Layouts.

In this video, we show a List that has a free-form layout and how in-place editing can be used.

Using in-place editing to edit data in a List based on a SQL table

To edit data in a List that is based on a SQL database, the List/Detail View pattern is typically used. However, it is also possible to use in-place editing in a List and then persist the edits made to the List back to the SQL database.

In this video, we show how a List that is based on a SQL database is configured to allow edits to the SQL database to be made using in-place editing in the List.

Data validation for in-place editing

When you use in-place editing to edit data in List row you can use Javascript code to validate the edited data before it is saved.

In this video, we show how a validation rule is added to check that the user enters a value into the City field.

Auto-suggest

You can define an auto-suggest control for in-place editing. You can also dynamically filter the choices in the auto-suggest based on other data entered into the List row being edited.

In this video, we show how an auto-suggest control that shows choices from a SQL database is defined. We then add a dynamic filter to the auto-suggest so that it only shows choices that are filtered by some previously entered data in the List row.

Displaying images in a pick-list for Edit-combo or Auto-suggest

When you define the data to be shown in the pick-list for an edit-combo or auto-suggest control, you can include images. In this video, we show how the pick-list for an edit-combo is configured to display images

Displaying multiple columns in a pick-list for Edit-combo or Auto-suggest

When you define the data to be shown in the pick-list for an edit-combo or auto-suggest control, you can specify that multiple columns of data should be shown in the pick-list. You can also specify that when the user makes a selection from the pick-list that other fields in the List row you are editing should be filled in. In this video, we show how this is done.

Enable/Disable controls

When you are editing the data in a List row using in-place editing, you may want to dynamically enable/disable controls in the row.

In this video, we show how you can define an enable event to dynamically disable controls in the List row you are editing.

Decode coded Values

It is common when designing databases to use coded values for certain fields (i.e. a category field might have values of 1, 2, 3, etc. rather than Beverages, Condiments, Confectionary, etc.). When displaying the data in the List you might like to display the decoded value for each coded value. In this video, we show how this is easily done.

Dropdown Menu

A common pattern when designing a ControlBar is to include buttons on the ControlBar that display dropdown menus. These can either be cascading or expanding menus. In this video, we show how you can add a dropdown menu to a ControlBar.

Alpha Anywhere 4.6.1.4

No videos were released with Alpha Anywhere 4.6.1.4

Alpha Anywhere 4.6.1.5

No videos were released with Alpha Anywhere 4.6.1.5

Alpha Anywhere 4.6.1.6

File Upload using Drag and Drop

You can upload files to either Amazon S3 or to your Alpha Anywhere server by dragging and dropping files onto a 'drag drop area' on your UX component.

This video shows how to configure drag and drop file upload.

Generate a File in an Ajax Callback and then Download it

In UX and Grid components you might want to make an Ajax callback to the server and then generate a file on the server which the user can then download. The file that you generate on the server might be an Excel file, a PDF document, a Word document, etc.

In this video, we show how you can create the Xbasic function that handles the Ajax callback, creates the file and then generates the necessary Javascript to send back to the browser in order to download the file.

Alpha Anywhere 4.6.1.7

Keyboard Friendly Edit-Combo

In order to make a UX component that is "keyboard friendly" (i.e. minimizes the need for the user to use the mouse to tap on a button to open a pick-list), the edit-combo control can be configured to open automatically as soon as the user tabs into the control, and then once the user makes a selection from the pick-list, you can set focus to the next control.

in this video, we show how you can configure the edit-combo to behave in this "keyboard friendly" manner.

Real-time Messaging using the Pusher Service

Real-time applications are typically built using web-sockets. However, it can be tricky to set up web-socket applications, especially if your application is behind a load balancer. The 3rd party Pusher service (www.pusher.com) makes it very easy to build real-time applications that allow you to broadcast messages on a 'channel'. All clients that subscribe to that channel will receive the message.

In this video, we show how the UX component can be configured for real-time applications using the Pusher service.

Real-time Location Reporting using the Pusher Service

In this video, we show how you can build a real-time location reporting application. When a user 'reports' their location, a marker is automatically added to a map control showing the location of the user.

Alpha Anywhere 4.6.1.8

In-place editing - Capturing Edited Rows and Old Values

(Advanced Users) When you are editing the data in a List row using in-place editing, and you have the List Detail View turned on, and the List is based on a SQL table, Alpha Anywhere generates the SQL statements to perform the CRUD operations automatically. However, there may be situations where you want to generate your own SQL CRUD. To do this, you will need to know which rows have been edited, and for each edited row you will need to know the current values in each List row as well as the original values.

In this video, we show how this can be done.

Adding Tokens to a SQL Database

The Multi-select Tokens control allows you to select tokens from a pick-list and (optionally) type tokens into the control. You can configure the control to only allow tokens that are in the pick list or to allow the user to type in any token value. If the user types in a token value that is not in the pick list you can fire a notInList event and add the token to the pick list (and to the database table that backs the pick list).

In this video, we show how a token value that a user enters is added to a SQL table.

Alpha Anywhere 4.6.1.9

Reading Information (such as record count) from the List's state Object

A common requirement with a List control on a UX is to know how many records are in the List (and in the case where the List is paginated, how many pages of data the List has and what page you are currently on). For Lists based on SQL tables, you might also want to know what the current filter and order for the List are. All of this information is available in the List's state object.

In this video, we show how the record count can be read from the List's state object.