Parent | Child | Previous | Next
 

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.

Alpha Anywhere 4.6.2.0

Enabling and disabling PanelCards in a PanelNavigator

The PanelNavigator is commonly used in building mobile applications. This control, when in Carousel mode allows you to swipe through a series of PanelCards in the order in which the PanelCards were defined. However, in certain applications you might want to dynamically turn a PanelCard off or on so that it is skipped when swiping through the PanelCards in a PanelNavigator.

In this video, we show how this is done.

Rotating an Image with Animation

A common UI technique is to rotate an icon (such as a 'hamburger' menu icon) when the icon is clicked. Typically, animation is used when the icon is rotated.

In this video, we show how you can rotate an image using animation.

Displaying Logical Values using a CheckBox

It is common to display logical values in a List. You can use a switch control, a checkbox style control, or HTML text to indicate if the logical value is true (on) or false (off).

In this video, we show how a Switch control can be configured to behave like a logical checkbox with custom images for the on and off states.

Selecting Active ControlBar Layout Based on Current PanelCard in a PanelNavigator

In mobile applications it is common to have a PanelNavigator with multiple PanelCards. Each PanelCard should have its own ControlBar. An efficient way to design this is to define a single ControlBar for the PanelNavigator and then to select the active Layout in the ControlBar depending on which PanelCard is currently visible.

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

Alpha Anywhere 4.6.2.1

There were no videos were released with Alpha Anywhere 4.6.2.1.

Alpha Anywhere 4.6.2.2

GraphQL

Building a Service

In this video, we show how you can build a GraphQL API to expose data in a SQL database.

Testing your Service

Once you have defined a GraphQL API you can use the built-in tester to test your GraphQL API.

Testing your Service - Using Variables

You can use variables in your query parameters rather than using hard coded literal values.

Testing your Service - Getting Multiple Records

You can use a GetMany query to return multiple records. When you return multiple records, you can specify a page size, number of records to skip over etc.

Paginated Queries

When you use a GetMany query, you can do paginated queries.

Update Mutations

Using an Update mutation you can perform Updates on any of the tables exposed in the API.

Add Mutations

Using an Add mutation you can add records to a table.

Delete Mutations

Using a Delete mutation you can delete records to a table.

Executing a GraphQL Query Directly from the Browser

When you execute a GraphQL query, you can either do the query in server-side code or client-side code.

In this video, we show how you can make a request to a GraphQL endpoint directly from the browser and then populate a List control with the data returned by the query.

Two-sided Card Layout

You can created two sided card layouts in a UX. You can add various controls to the "front" of the card and other controls to the "back" of the card. When the user clicks an icon, the card flips from front to back (or back to front) using a 3D animated transition. The two-sided card layout can be added to the ViewBox, List and Free-form HTML Container controls.

In this video, we show how to add a two-sided card Layout to each of these control types.

Enabling the User to Select a Style at Runtime

When you build an Alpha Anywhere application, you typically select the style for the application (e.g. Alpha, Alpha-Red, etc.) at design-time. However, you might want to allow the user to select a preferred style a run-time.

In this video, we show how you can allow the user to select the style at run-time.

Building Apps using Ionic Appflow

Ionic AppFlow is a service offered by Ionic for building iOS and Android PhoneGap application. It is tightly integrated in the Alpha Anywhere PhoneGap Genie.

Setting Up a Cloud SQL Database

Alpha Software provides a free cloud SQL database for use during development.

In this video, we show how to set up a MariaDB cloud SQL database server and how to install the sample Northwind database.

Creating a Named Connection String for your Alpha Cloud SQL Database

In this video we show how to create a Named Connection string that points to your Alpha Cloud SQL database so that you can use the database in your Alpha Anywhere applications.

Using 3rd Party Tools (e.g. Navicat) with your Alpha Cloud SQL Database

It is common for developers to maintain the SQL databases used in their Alpha Anywhere applications using 3rd party tools (such as Navicat, SQL Server Management Studio, pgAdmin, etc.)

In this video, we show how you can connect Navicat to an Alpha Cloud MariaDB server.

Creating Signing Certificates for iOS

In order to build a PhoneGap application for an iOS device you will first need to create a code-signing certificate. You will also need to have an Apple Developer account. Creating this certificate can be tricky, especially if you do not have a Mac.

In this video we show how the iOS Certificate Genie in Alpha Anywhere makes it easy to create the necessary certificate, without requiring that you have a Mac.

List Control Column Actions

When you turn on Column Actions for a columnar Layout in a List control, an filter icon is shown in the column header for each column in the List. The column actions provide a very powerful and convenient way for filtering the data in a List.

Window Width - Match

When you add an edit-combo or auto-suggest control to a UX, you might want the width of the window that displays the pick-list to be the same as the width of the control itself. (Much like the width of the dropdown window matches the width of a select control). This is easily achieved by setting the width of the window in the edit-combo or auto-suggest builder to 'match'.

The width of dropdown windows can also be set to 'match'.

In this video we show how the 'match' window width setting is used.

Floating Textbox Labels

A popular design pattern (for example the Gmail login screen) displays the label for a textbox as a watermark in the field. When the user clicks in the field to begin typing, the watermark animates into position above the textbox.

In this video we show how animated textbox labels can be specified.

Creating Sub-themes for Inherited Styles

Sub-themes allow you to define different appearances for different classes of controls on a UX (for example an input control has a 'base' and 'primary' sub-theme by default).

In this video, we show how you can create a new sub-theme called 'primaryRounded' for an input control on a UX that uses the Alpha-Dark-Green style (a style that is inherited from the 'Alpha' style). The new sub-theme will have a rounded border around the input control.

Alpha Anywhere 4.6.2.3

Encrypting Data in a SQL Table

You can use a List control with a Detail View to display data from a SQL table and to update the data in the table. You might want to encrypt certain fields in the SQL table.

In this video, we show how you can encrypt the data in a field in a SQL table when updating the table from a List control with a detail view.

It is also possible to encrypt data in certain fields when using the Grid component.

Encrypting/decrypting existing data in a Table

You may have an existing table that is being used by a List control in one of your UX components, Say that the table has field and you would like to encrypt the data in that field. In a previous video we have shown how you can enable encryption for a field in a List, but this only affects edits going forward. You might want to encrypt all of the existing data in that field in your table.

In this video, we show how the a5_encrypt_table_field() function can be used to encrypt (or decrypt) existing data in a field in a SQL table.

Alpha Anywhere 4.6.2.4

How to Add a Badge to a Button

A common UI pattern in applications is to add a badge to buttons to convey some information. For example, you might have a button that shows orders and a badge shown over the button would show how many orders have been received. You can add badges to stand-alone buttons and also to buttons that are shown in a Control Bar.

In this video, we show ho you can add a badge to a button and also how you can dynamically set the badge value.

How to Display PDF Files using the PDFViewer Control

In this video, we show how you can display the contents of a PDF file in a UX component using the PDFViewer control.

Alpha Anywhere 4.6.2.5

Styling Buttons when the Render as ButtonList Property is checked

When you add radio button or checkbox controls to a UX you can choose to render the controls as a Button List. In this video we show how the buttons can be styled.

Alpha Anywhere 4.6.2.7

Single click on a column in a row to enable in-place editing

By default a List with in-place editing is toggled into edit mode by tapping on an edit icon in the row, or by double clicking on the row. However, you might want to toggle edit mode on with a single click on the row and simultaneously select the field that the user clicked on.

In this video we show how you do this.

Filtering choices in an edit-combo pick list

When you are editing data in a List row using in-place editing, you might have configured some of the columns to be edited using an edit-combo control. When you open the edit-combo to display the pick list, there could be a very large number of rows in the pick list, making it difficult to find the row in the pick list that you want to select. You can add a filter box to the pick list to make it easier to find the row you want to select.

In this video we show how you can add a user filter box to the edit-combo pick list.

Creating Custom Display Formats for Client-side Templates

Client side templating is used in many different places in a UX to display data. For example, it is used in Lists, ViewBoxes, ControlBars, FormViews, etc.

In this video we show how you can create custom format directives.

Advanced Image Styling

A common requirement when displaying images is to style the image in advanced ways, such as cropped to a circle, etc.

In this video we show various advanced styling options that can be applied to images.

Free-form Layout for Detail View

When creating a List with a Detail View, you might need to display the Detail View data in a highly styled manner. This can be done using a Detail View template.

In this video, we show how Detail View templates can be defined.

Displaying List Values in ControlBars

A common pattern when using Lists and Control Bars is to display data from the currently selected List row in the ControlBar. This is easily done by using special placeholders in the templates used in the ControlBar.

In this video we show an example of using a List field placeholder in a ControlBar template.

Creating a Custom UX Control

When you are building a UX component, you add controls to the UX by selecting controls from the toolbox on the left edge of the UX Builder. The Data section has an item called [More...] which allows you to select from several additional control types. These additional control types are created by Alpha Software. Now, you can create your own controls and when you click the [More...] item, your user-defined controls will be listed. The controls that you create are all based on the ViewBox control.

In this video we show how to create a Custom UX Data Control and then how to add a new control to your UX that is based on this custom control.

Editing a Custom UX Control

Once you have created a Custom UX Data Control you might want to change its definition in some way.

In this video we show how you can edit a previously created Custom UX Data Control.

Two-state images

A common design pattern when building user interfaces is to add icons that change with animation when the icon is clicked. For example, you might have a 'hamburger' icon that when clicked shows a menu. When the icon is clicked you might want it to animate into an different icon (say the 'X' icon) to indicate that clicking the icon will close the menu.

In this video we show how you can define two-state images.

Embedding the Detail View in the List

When you build a List with a Detail View, you might want to embed the Detail View in the List so that it is only shown when the user taps on a row in the List.

In this video we show how this can be done.

Embedding Child Lists in the Top-most Parent List

It is quite common to build UX components with a series of related lists. For example, you might have lists for Customers, Orders and OrderDetails. When you select a row in the Custom list, the Orders list is repopulated showing he orders for the selected Customer, and so on. You might want to embed these child lists inside the top-most parent list (i.e. the Customer list in this example). so that the child Lists are only shown when the user taps on a row in the parent list.

In this video we show how this can be done.

Copy tables from one SQL database to another and mask selected fields

You might need to share a copy of your database with a 3rd party and if your database contains sensitive information (e.g. credit card numbers, social security numbers, etc.) you might want to mask the data in these columns.

In this video we show how you can copy the tables in one SQL database to another and also mask the data in selected fields.

Alpha Anywhere 4.6.3.0

Checking connectivity before making an Ajax callback

If the user makes an Ajax callback and there is no internet connection, the Ajax failed event will fire after the Ajax callback times out. It can take quite a few seconds before the Ajax callback times out. It would be preferable to let the user know that Ajax callbacks are not possible before they try to make a callback. Also, in disconnected mobile applications, you might want to prevent the user from tying to synchronize data if the connection is poor.

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

Populating the choices in a DropdownBox Control Using Javascript

Typically, the choices in a Dropdown box control are either static or the result of a database query. However, you might want to dynamically populate the choices in a Dropdown box control using JavaScript.

In this video, we show how this can be done. We also show how you can implement cascading choices in a dropdown that is populated using JavaScript. The advantage of implementing cascading dropdownboxes using JavaScript is that the child dropdown boxes are populated without having to make an Ajax callback. So this technique will work in disconnected applications.

Synchronizing Data in a List with Detail View - Advanced Synchronization Options

When you synchronize data in an offline application, you might want to let the user know immediately if synchronization is currently not possible - because the server is not available, or because there is no internet connection rather than waiting for the Ajax callback to fail after it times out. Also, if there is an available internet connection, but the connection is slow, you might want to prevent the user from synchronizing and you might want to display a message telling the user to try again later when there is a faster connection.

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

Filtering a List to Show only Checked Rows

In this video we show how a server-side filter can be applied to a List to show only the rows that have been checked.

Executing "long-running" Xbasic Code Asynchronously in an Ajax Callback

When an Ajax callback is made from a Grid or UX component, the server-side code executes synchronously. The client will wait for a response from the server. This response is typically sent when the server-side code completes. However, the browser will only wait a certain amount of time for the server to send a response. If the server-side code takes a long time to execute, the browser will likely have stopped listening (i.e. the Ajax request will time out) for a response. Furthermore on IIS (which includes Alpha Cloud), as soon as the browser stops listening for a response the server will stop executing the server-side code.

Because of all of the above, it is not appropriate to execute 'long-running' server-side code in an Ajax callback, unless the code can be run asynchronously.

In this video we show how you can run Xbasic code asynchronously in an Ajax callback. We also show how you can make periodic callbacks to the server to get the status of the asynchronous Xbasic.

Using the PhoneGap Shell - V3 Component

The PhoneGap Shell - V3 component makes it easy to test PhoneGap/Cordova mobile apps on a real mobile device without having to go through the build process to turn your component into a Cordova application.

Publishing an App to Alpha Launch

Alpha Launch is a great way to publish mobile applications to iOS or Android devices because it allows you to install native apps on the device without having to first submit the app to the Apple App Store or Android Play Store.

In this video we show how an App can be published to Alpha Cloud and then installed in Alpha Launch so that it can be run on the mobile device as a true native application.

Momentum Scrolling

In a mobile application, a List is scrolled by dragging on the List. If the user swipes on the List, then momentum scrolling is initiated. You can control the amount of 'friction' required to initiate momentum scrolling and how long the momentum scrolling should continue.

NOTE: Also applies to ViewBoxes.

In this video we show how you can control these settings.

Displaying the SQL Trace Log on the UX Component

When you define a connection string to a SQL database, you have the option of turning tracing on. This allows you to see the actual SQL commands that are sent to the SQL database. But the SQL logs are written to the standard location for all log files, which means it can be tricky to find the log files and in the case of Alpha Cloud, there is a small delay before the log files are available. Now, you can write the SQL trace logs directly to the UX component.

In this video we show how the SQL Trace log is written to the UX component.

Importing Users from an Excel File

When you are setting up the users and groups in an Application that uses the Security Framework, it might be convenient to import users and groups from an Excel file.

In this video we show how this can be done.

Drag Scrolling in a Panel Card

In this video we show how drag-scrolling in a Panel Card can be enabled in the vertical direction for the Panel Card itself, but in the horizontal direction for a List that is contained within the Panel Card.

Pull to Refresh - Animation Duration

When you turn on the pull to refresh feature in a List you can control the duration of the animation as the List returns to its default position after it has been dragged past the end to initiate a refresh action.

Alpha Anywhere 4.6.3.2

Using the Security Quick Setup Genie

When you create a new project, it is quite common to turn on the Security Framework to enable login to your application. There are quite a few steps to set up the Security Framework and it can be quite tedious. The Quick Setup Genie configures the Security Framework and creates sample users and groups to get you started very quickly.

In this video we show how the Quick Setup Genie works.

Using a UX Component as your Login Dialog

When you enable the Security Framework for your project you will need a login dialog where users will log into your application. A UX component can be used as the Login component and can be configured to allow password reset and new account creation.

In this video we show how to use a UX component as your Login dialog.

Reset Password

A common requirement in any Security Framework is the ability for the user to reset their password if they have forgotten it. The typical pattern for this is to send an email to the user. The email has a link that the user can click to bring up a dialog where they can change their password.

In this video we show how this is done.

Create new account

A common requirement in any Security Framework is the ability for a user to create a new account.

In this video we show how the user can create a new account.

In addition, if the Web Project has defined an Extended User-information table, then at the same time that the user creates their new account, they can choose to enable two-factor authentication.

In this video we show how this is done.

After Login Behavior

After the user has logged into your application using a UX component, configured as a Login dialog, the "after login behavior" can either redirect the user to another page in your application, or to another Panel in the UX component.

In this video we show how the "after login behavior" is configured.

Persistent Login

A common requirement when building an application with the Security Framework is to enable 'persistent login'. With 'persistent login' a user will not need to log into the app again after they have successfully logged in once.

In this video we show how 'persistent login' is enabled.

Alpha Anywhere 4.6.3.7

Password reset when userid is a value (not an email address)

The password reset feature can be used when the userid in the security framework is a value (rather than an email address).

This video shows how this is done and how the extended user-information table must be configured.

Using the password reset feature in a Cordova mobile application.

The password reset feature can be used in Cordova applications running on mobile devices. The behavior of the component is slightly different than when running in a browser.

In this video we show how password reset work in a Cordova application.

Using the CheckboxList control to select rows in a List

The CheckboxList control allows you to quickly select multiple items, much list a multi-select Select control, a checkbox control, a multi-select List control, or any other control that allows multiple selections, but it presents a very intuitive interface to the user.

In this video we show how the CheckboxList control is configured and is used to select records in a List.

Alpha Anywhere 4.6.3.8

SQL Database Explorer

The SQL Database Explorer allows you to perform CRUD operations against any table in any SQL database for which you have a connection string.

This video gives a quick overview of the tool.

In-row charts

In this video we show how you can display charts in a List. Each row in the List can have a line, bar, pie or gauge chart and the data shown in the chart can come from other data in the List row.

Alpha Anywhere 4.6.3.9

Pre-load Embedded Components in Panel Cards

A common design pattern when building Web Applications is to use a UX Component with a Panel Navigator and child Panel Cards as the main controller for your application. Each of the Panel Cards might contain an embedded component. The embedded components are typically set to delay render till visible so as not to slow down the loading of the main controller UX. However, when the user gives focus to one of the Panel Cards, which causes the embedded component to load, you might want the embedded component to load instantly. This is now easily done by pre-loading the embedded components when the main controller component is loaded.

Calling Python Functions in Server-side Code

Typically, all server-side code in a UX or Grid is written using Xbasic. But if you are already familiar with Python, you might prefer to write server-side code using Python.

In this video, we show how you can write server-side code using Python.

Using the Enter Code Control

A common design pattern when building applications that must prompt the user to enter a code (for example a login screen) is to provide data entry boxes for the user to type in the code. As the user types the code focus is automatically moved to the next box. Once the user has typed in all of the characters in the code, an Ajax callback is made to the server to validate the code. If the code is not valid, the control shakes (thus giving feedback to the user that they have not entered a valid code).

In this video we show how an Enter Code control can be added to an UX component.

Creating Complex Responsive Layouts using the CSSGrid Container

The CSS grid specification allows you to create complex responsive layouts. In this video we show how you can use a CCSGrid container type to create a complex, responsive layout.

Alpha Anywhere 4.6.4.0

Tabbed UI Smart Search

It is not uncommon for the TabbedUI component to have many buttons in the menu pane. The search feature allows the user to quickly find a particular button. The Smart Search feature allows the user to combine filtering the list of buttons and also applying a filter to the component once it has been opened in a Tab Pane.

Dynamically Filtered Dropdown box Control

By default, the choices in a dropdown box control are computed at the time the UX component is rendered. But you might want to filter the choices shown in a dropdown box control dynamically based on the value another control.

In this video, we show how to dynamically filter the choices in a dropdown box control.

Enabling drag and drop on an element in a ViewBox layout

In this video, we show how to make elements in a ViewBox layout draggable.

Dropbox Storage Connection

In this video, we show how to create a named connection string for Dropbox.

Google Drive Storage Connection

In this video, we show how to create a named connection string for Google Drive and read and write files to Google Drive.

Using Xcode CLI Tools to Automate Application Creation

When you use the CLI option to build a Cordova iOS application you will need to have a Mac with Xcode installed. You can use the Xcode CLI tools, as shown in this video, to automatic the process so that it not necessary top manually launch Xcode and initiate the build.

Backing up and Restoring Files in a Web Project

In this video, we show how to use the integrated Backup/Restore feature to backup your Web Project files. Backups can be stored on disk on in a storage location (such as Amazon S3, etc.)

Managing Users and Groups at Run-time

This video shows how you can add an ability to manage Users and Groups at run-time in your Web Application by adding a sample template UX component (SecurityFramework-Admin_MaintainUsersAndGroups) to your Web Project.

Dynamically setting the choices in the pick list for an edit-combo control

When you configure an edit-combo for a field in a List that uses in-place editing, you can specify that the pick list should be computed by an ajax callback every time the pick list is opened. But this could be slow because an ajax callback if made every time the pick list is opened. You might prefer to dynamically repopulate the pick list when some event occurs and then when the pick list in a row is ultimately shown, no ajax callback would be needed.

In this video, we show how this is done.

Login using Google

When you configure a UX component as a Login component, you can use Login with Google to allow users to log in to your application using their Google credentials.