Pre-Release Notes for Alpha Anywhere (Alpha Five Version 12)

IMPORTANT: The pre-release builds are only available to customers with a valid Alpha Anywhere subscription. If your subscription has expired you will not be able to use the pre-release build.

If your subscription is valid and you download and use the pre-release build please keep in mind that if you do not renew your subscription after it expires your eligibility to use pre-release builds will end.

 

 

 

 

 


 

Build 5348-5177 21-SEP-2018 - 7:51 AM

 

The Features and Bugs Listed Below are for the current pre-release build. These features/fixes will be included in the next official Version 12 Update. These notes are for users who are testing the pre-release update.
 

This is not an official patch, so you should not deploy this update to a production environment.

 

This pre-release build is our internal, nightly build and it is made available to you for the sole purpose of testing the new features that have been added and the bug fixes that have been made since the last official release. We are making this pre-release available to you so that you can provide us with feedback on whether the changes we are making are working correctly and have not introduced new issues.

 

If you encounter any type of bug while using this pre-release build, please send information about the bug (including full instructions on how to duplicate the issue, and a test case that we can run on our own machines) to a5v12bugs@alphasoftware.com.

 

Please do NOT post bug reports concerning the pre-release build on the message board. Alpha Software engineers do NOT routinely monitor the message board and there is a good chance that your posting will be overlooked. Also, since your posting will be referencing unreleased code, it will only serve to confuse other users.

 

This pre-release build is not intended to be used in a production environment.

 

You can download the pre-release update using these links:

https://aapatches.s3.amazonaws.com/build5348/a5v12_build5348_full_patch.exe

https://aapatches.s3.amazonaws.com/build5348/a5v12_build5348_full_DL.exe

https://aapatches.s3.amazonaws.com/build5348/a5v12_build5348_AppServer.exe

https://aapatches.s3.amazonaws.com/build5348/a5v12_build5348_AppServer_patch.exe

https://aapatches.s3.amazonaws.com/build5348/a5v12_build5348_RTPLUS_patch.exe

 

https://aapatches.s3.amazonaws.com/build5348/a5v12_build5348_ApplicationServerIIS.exe

https://aapatches.s3.amazonaws.com/build5348/a5v12_build5348_ApplicationServerIIS_Patch.exe

 

 

https://msgboard.alphasoftware.com/alphaforum/showthread.php?112148-New-OpenSSL-and-SSLv3-Vulnerabilities

 

 

 

Videos

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

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

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

Using the Advanced Search Control in a UX Component
Watch Video - Part 1
Watch Video - Part 2

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 - Part 1
Watch Video - Part 2
Watch Video - Part 3

Date added: 2018-21-08
     

 

 

 

 






 

 

Features

Build 5348

UX and Grid Components - Transient Messages - A new action is available in Action Javascript to display transient messages.

A transient message is a message that is displayed for a short time and then automatically is hidden (unless the user dismisses the message early, by clicking a close button).

Transient messages are used extensively by Google in their applications (for example in the GMail web and mobile applications). In the two images below, the transient messages in the Gmail web and mobile application are shown.

 

Transient Message in the GMail Web Application

 

Transient Message in the GMail iOS Application

 

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

 

To create a Transient Message in the UX or Grid, define a new Action using Action Javascript and select the Message box - Transient action

 

The builder is then shown:

 

 

 

Properties that can be set in the builder include:

 

A transient message can have the following positions:

 

The images below show a transient messages in the UX component using the Google and Default appearance:

Transient message using the Default Appearance (the component style is Alpha)

 

Same as above message, but using the Google Appearance

 

The minimum amount of Javascript to display a transient message (using the Default Appearance) is shown below:

{dialog.object}.transientMessage('center','Record was deleted.',

    {
        buttons: [{html: 'Undo', onClick: function(){alert('undo')}}]
    }

)

Build 5334

UX Component - List Control - Client-Side Grouping - Default Groups - By default, the group breaks shown in a List when client-side grouping is turned on, are dynamically computed from the actual data in the List. However, you might want certain groups to appear in the List regardless of whether the List contains any data for that group. You can now specify a list of default groups that should always appear in the List.

In the image shown below, default groups for the Country group have been defined. These default groups are 'South Africa' and 'Zimbabwe'.

 

 

The image shown below shows how a List that does not have any data for either South Africa or Zimbabwe would be rendered. Notice that the actual HTML shown for these two empty groups is defined by the Javascript specified in the Javascript for HTML for default group property.

 

 

 

 

 

 

 

UX Component - List and ViewBox Controls - .focus() Method - These controls now have a .focus() method to set focus to the control.

Example

var lObj = {dialog.object}.getControl('my_list_control')

lObj.focus()

 


 

Build 5332

Xbasic - JSON_flatten_default() Function - Takes JSON with nested arrays and "flattens" the JSON so that there are no nested array. This is same as the JSON_flatten() function, but the template required by the JSON_flatten() function is automatically generated from the input JSON.

 

Syntax

C jsonOut = json_flatten_default(c JsonIn)

 

Example:

dim json as c 
json = <<%str%
[
	{"name": "John", "Lastname" : "Smith", "City" : "Boston", "State" : "MA", "Children": [
			{"Name" : "Callie", "Age" : 5},
			{"Name" : "Griffin", "Age" :3},
			{"Name" : "Luke", "Age" : 1}
		]
	}, 
	{"name": "Henry", "Lastname" : "Rhodes", "City" : "New York", "State" : "NY", "Children": [
			{"Name" : "Howard", "Age" : 15},
			{"Name" : "Robert", "Age" : 11}
		]
	}, 
	{"name": "Allison", "Lastname" : "Berman", "City" : "Los Angeles", "State" : "CA", "Children": [
			{"Name" : "Jeff", "Age" : 35},
			{"Name" : "Roxanne", "Age" :33},
			{"Name" : "Claudia", "Age" : 31},
			{"Name" : "Denzel", "Age" : 11}
		]
	}
]		
%str%
dim json2 as c
json2 = json_flatten_default(json)
?json2

= [
{"name": "John","Lastname": "Smith","City": "Boston","State": "MA","Children_Name": "Callie","Children_Age": 5},
{"name": "John","Lastname": "Smith","City": "Boston","State": "MA","Children_Name": "Griffin","Children_Age": 3},
{"name": "John","Lastname": "Smith","City": "Boston","State": "MA","Children_Name": "Luke","Children_Age": 1},
{"name": "Henry","Lastname": "Rhodes","City": "New York","State": "NY","Children_Name": "Howard","Children_Age": 15},
{"name": "Henry","Lastname": "Rhodes","City": "New York","State": "NY","Children_Name": "Robert","Children_Age": 11},
{"name": "Allison","Lastname": "Berman","City": "Los Angeles","State": "CA","Children_Name": "Jeff","Children_Age": 35},
{"name": "Allison","Lastname": "Berman","City": "Los Angeles","State": "CA","Children_Name": "Roxanne","Children_Age": 33},
{"name": "Allison","Lastname": "Berman","City": "Los Angeles","State": "CA","Children_Name": "Claudia","Children_Age": 31},
{"name": "Allison","Lastname": "Berman","City": "Los Angeles","State": "CA","Children_Name": "Denzel","Children_Age": 11}
]

Notice that each parent record is repeated for each record in the nested array.

 

Xbasic - JSON_flatten_single() Function - Takes JSON with nested arrays and "flattens" the JSON so that there are no nested array. Data from the nested arrays is represented in the parent data as a set of repeating fields.

 

Syntax

C jsonOut = json_flatten_single(c JsonIn[, depth])

 

Where

The function will only operate on one level of nested arrays. For example if a row in a nested array has another nested array, this array will be ignored.

 

Example:

dim json as c 
json = <<%str%
[
	{"name": "John", "Lastname" : "Smith", "City" : "Boston", "State" : "MA", "Children": [
			{"Name" : "Callie", "Age" : 5},
			{"Name" : "Griffin", "Age" :3},
			{"Name" : "Luke", "Age" : 1}
		]
	}, 
	{"name": "Henry", "Lastname" : "Rhodes", "City" : "New York", "State" : "NY", "Children": [
			{"Name" : "Howard", "Age" : 15},
			{"Name" : "Robert", "Age" : 11}
		]
	}, 
	{"name": "Allison", "Lastname" : "Berman", "City" : "Los Angeles", "State" : "CA", "Children": [
			{"Name" : "Jeff", "Age" : 35},
			{"Name" : "Roxanne", "Age" :33},
			{"Name" : "Claudia", "Age" : 31},
			{"Name" : "Denzel", "Age" : 11}
		]
	}
]		
%str%
dim json2 as c
json2 = json_flatten_single(json)
?json2

= [
{"name": "John","Lastname": "Smith","City": "Boston","State": "MA","Children_1_Name": "Callie","Children_1_Age": 5,"Children_2_Name": "Griffin","Children_2_Age": 3,"Children_3_Name": "Luke","Children_3_Age": 1},
{"name": "Henry","Lastname": "Rhodes","City": "New York","State": "NY","Children_1_Name": "Howard","Children_1_Age": 15,"Children_2_Name": "Robert","Children_2_Age": 11},
{"name": "Allison","Lastname": "Berman","City": "Los Angeles","State": "CA","Children_1_Name": "Jeff","Children_1_Age": 35,"Children_2_Name": "Roxanne","Children_2_Age": 33,"Children_3_Name": "Claudia","Children_3_Age": 31,"Children_4_Name": "Denzel","Children_4_Age": 11}
]

Notice that data from the nested arrays is represented in the parent record as a set of repeating fields. For example, Children_1_Name, Children_2_Name, etc.

 

 

 

WCF and SOAP Services - Xbasic - IMPORTANT! – If you are creating and using Web References or generating Web Service Clients in Alpha Anywhere to use with WCF or SOAP services, please test the generation and execution of your service client under the most recent pre-release. We have made changes to accommodate some web services, and want to be sure that no one is adversely affected by these changes before we release the next version of Alpha Anywhere.

Build 5330

 

Grid Component - Textbox - Readonly  - Textbox controls in the Grid and Detail View parts now have a readonly property.

Build 5324

UX and Grid Components - Advanced Search - A new option has been added to both Grid and UX components.

The Advanced Search feature can be used to search for records in a Grid component, or for records in a List control in a UX component. The List control must be based on a SQL database.

 

Using the Advanced Search Control in a UX Component

Watch Video - Part 1
Watch Video - Part 2

Using the Advanced Search Control in a Grid Component

Watch Video - Part 1
Watch Video - Part 2

 

 

When you define a Grid component with a Search Part, you (the developer), pick the fields that you want the user to be able to search in at run-time. Similarly with defining a search feature for a List control.

With the Advanced Search control, however, you let the user pick the fields that the want to search in (the fields from which the user is allowed to pick is controlled by you - the developer).

The searches that are entered into the Advanced Search feature can be saved and then later retrieved.

The controls that the Advanced Search feature can display are:

 

When the Grid or UX is initially displayed, the Advanced Search control is rendered as follows:

 

 

If the Allow Saved Query Load option is enabled, the Advanced Search control is rendered as follows:

 

 

NOTE: All text in the buttons shown in the Advanced Search control, and the icons are fully customizable. You can also use language tags or text dictionary tags to translate strings into other languages.

 

To start defining a new search, the user will click the Add new search field button. This will display a drop down menu of the fields from which the user can select. This list of fields (and the corresponding control type to use for the field) is defined when the Advanced Search is configured.

For example:

 

The user will select one of the available fields and a new search control is added to the screen.

At this point, the Advanced Search control will look like this:

 

(In this example, the City field was defined as a combolist list control, so it has a button to open a picklist of choices. In addition, since the Save query button is shown if the Allow save query option is enabled.)

 

 

The user can continue adding as many additional search fields as needed. When a second or subsequent search field is added, the Advanced Search control shows AND/OR buttonsl for each search field (except the last selected field). This allows you to specify if the search items are joined with an AND operator or an OR operator. In the example shown below, the search is for City = 'London' OR Country = 'France'.

 

 

Each new item added to the Advanced Search control will have these two icons:

The trash can icon is used to delete the item from the Advanced Search control.

The funnel icon is used to set search options for the field. When the user taps this icon, a menu with these options is shown:

 

For Date and Time fields (Time is actually a Date-time field), an additional button (with 3 vertical dots) is shown.  This is the date menu button.

 

When the user clicks the date menu button, a menu of pre-defined date ranges is shown. For a datepicker control, the choices in the menu are:

For a daterangepicker control, the choices in the menu are:

 

 

 

When the user clicks on the Calendar icon for a daterangepicker control, the dropdown window shows two calendars so the user can select the start date and the end date for the date range.

 

 

The menu options determine the type of search that is performed. For example, say you have added an item to the Advanced Search control to search in the LastName field and you have entered JO into the input control. If you set the menu to Starts with then records where Lastname is Jones or Johnson will be selected.

The QBF Syntax allows the user to use the standard QBF syntax supported by Grid and UX searches. This syntax is summarized below:

The QBF Syntax allows you to enter multiple search commands, separated by comma. For example

2018/9/1..2018/9/15,2017/9/1..2017/9/15

will find records where the search field value is between September 1 and September 15 in either 2017 or 2018.

 

 

Adding an Advanced Search Control to a Grid Component

To add an Advanced Search control to a Grid component, go to the Grid Properties pane in the Grid Builder and check the Has 'Advanced Search' feature property. This will then show the Advanced Search definition property. Click the smart field for this property to open the dialog where you can configure the control. (See below for details).

 

NOTE: If it possible, although unusual, to have both a standard Search Part in the Grid and also turn on the  Advanced Search feature.

 

 

 

Adding an Advanced Search Control to a List Component

You can add the Advanced Search control to a UX by selecting the [More..] item in the Data Controls section.

 

 

Then select AdvancedListSearch from the dialog.

 

 

This will add an AdvancedListSearch control to the List. You can configure the control by clicking the smart field for the Control properties property. This will open a dialog where you can configure the Advanced Search control. (See below for details).

 

 

 

 

NOTES:

 

 

Configuring the Advanced Search Control

 

The configuration dialog for the Advanced Search control in a Grid is shown below. The left hand list shows the fields that the user can select from when adding a new field to the search at run-time. You can add new fields to this list by clicking on the Add new search field... button. The Property Grid control on the right shows the properties for the selected item in the list on the left.

 

 

 

When you click on the the Add Field button a dialog is shown that allows you to pick one of the available fields in the Grid or the List control.

For each field you select, you must also select the corresponding control type for that field.

For example, if you pick a logical field, you will likely want to select the switch control for that field. On the other hand, say  you pick a field called Lastname, you might want to select the suggest control for that field. This will display an auto-suggest list as the user starts typing values into the search field.

 

 

 

 

You can customize all of the icons and prompts shown in the Auto Suggest control. To do so, click the Customize Buttons and Strings for the Advanced Search Control button. This will display the dialog shown below. You can use language and text dictionary tags in the strings (e.g. <a5:r>...</a5:r> or <a5:t>..</a5:t> )

 

 

You can customize certain aspects of the Advanced Search control by clicking the Customize Search Options button.

This will display the dialog shown below:

 

 

You can enable/disable the ability to save and load previously defined advance searches. You can also specify if debugging information should be shown. If you turn on debugging information, the WHERE clause computed from the search definition is shown, as well as the argument values for the arguments referenced in the WHERE clause.

If you turn on debugging information, you must specify where this information should be shown. In the case of a UX component, place a Placeholder control on the UX. The dialog will prompt for the name of the placeholder.

In the case of a Grid component, specify the id of a DIV control where you want the debugging information to appear. You must add the appropriate DIV to your component. A convenient place to add this DIV is in the Before HTML property, in the Additional Customization Options dialog (see below).

 

For example, in the image above, the DIV for the debugging information is specified as:

{grid.componentname}.SEARCHDEBUGGING

 

NOTE: By including the {grid.componentname} placeholder in the DIV id, we ensure that there will not be any conflict with the ID should more than one instance of this Grid be displayed at the same time.

The Unique key property is show if either the load or save query options is enabled. This property is added to the name of the saved query in the Repository table where queries are saved (see below for more information on Loading and Saving queries). This property allows you to ensure that when you click the Load Query button, only saved queries that match the Unique key are shown.

 

In the case of the Grid component, the configuration dialog displays an additional button with customization options specific to the Grid component. When you click the Additional Customization Options button the following dialog is shown.

 

 

 

In the case of the UX component, the builder will display a prompt where you can set the name of the List that the Advanced Search will operate on.

 

 

 

Loading and Saving Queries

In order to save queries you must define a Repository table in the Project Properties dialog. To open the Project Properties dialog, click the Project Properties button in the Web Control Panel.

 

 

You can define the connection string to the database where the Repository table will be stored. You can link to an existing table or create a new table. Click the smart field for any of the properties to open a builder.

 

 

Configuring the Grid to Show Debugging Information

When you run a query in the Advanced Search control you can display the WHERE clause that Alpha Anywhere computed from your query definition.

To turn on debugging information check the Display debugging information property when the Customize Search Options dialog is shown.

In the case of the UX you can specify a Placeholder control where the debugging information will be shown. In the case of the Grid component you specify the ID of a DIV element. You must manually add this DIV to the component. For example, say you specify the ID or the DIV as {grid.componentname}.ADVANCEDSEARCHDEBUGINFO then you would need to add the following HTML markup to your Grid component:

<div id="{grid.componentname}.SEARCHDEBUGGING"></div>

This markup can be added in several possible places. For example in a Freeform Edit Region, in the HTML that displays above or below the Advanced Search control (see the  Additional Customization Options button on the configuration dialog ) , etc.

 

 

 

Property Grid - International Characters in Strings - The Property Grid will now display international characters, rather than the HTML encoded strings. For Example:

 

 

Build 5318

All Components - Property Grid - Right Click Menu - The Property Grid right-click menu (shown when you right-click on the left hand border bar in the Property Grid) now has additional options. Most useful is the Find option that allows you to search for a property in the Property Grid.

 

 

UX Component - List Controls - Open UX as an alternate editing view for current record - You can now use this action in Action Scripting to edit the currently selected row in a List control in another UX component.

 

Build 5313

Xbasic - Read data from the Extended User-Information Table - a5w_getExtendedUserInfo() Function - Reads data from the Extended User-Information table.

Syntax

p Result = a5w_getExtendedUserInfo(userid as c )

Where

 

Example

dim p as p

p = a5w_getExtendedUserInfo('john.smith@acme.com')

?p.error

= .f.

?p.json = <<%txt%

{

    "FIRSTNAME" : "John",

    "LASTNAME" : "Smith",

    "COMPANY" : "Acme Corp"

}

 

 

Xbasic - Save data to the Extended User-Information Table - a5w_saveToExtenedUserInfo() Function - Saves data to the Extended User-Information Table. If a record for the specified userid does not exist, a new record is created. If a record already exist, the existing record is updated.

Syntax

p Result =  a5w_saveToExtendedUserInfo(c userId,c json)

Where


Example:

dim json as c

json = <<%txt%

{

    "FIRSTNAME" : "John",

    "LASTNAME" : "Smith",

    "COMPANY" : "Acme Corp"

}

%txt%

dim p as p

p = a5w_savetoExtendedUserInfo("john.smith@acme.com",json)

 

 

Xbasic - Get Fields in Extended User-Information Table - a5wcb_extendedUserInfoTableFields() - Returns a list of fields in the Extended User-Information Table.

Syntax

c Fields = a5wcb_extendedUserInfoTableFields()

 

UX Sample Component - Editing Data in the Extended User-Information Table - A sample template component is available to edit data in the Extended User-Information Table for the currently logged in user.

When you create a new UX component, select the SecurityFramework-Edit_ExtendedUserInformation template.

The template automatically generates a form based on the fields you have defined in the Extended User-Information table for your web project.

 

 

Build 5307

 

UX and Grid Components - Security Framework - Arguments - When you define Arguments for a UX or Grid component, you can now bind an argument to the the id of the currently logged in user, or to the security groups of the currently logged in user.

If you have defined an Extended User Information Table, (see below for more information), you can also bind the argument to any value from the  Extended User Information Table.

In the case where you bind an argument to the security groups for the logged in user, you can define an array argument. A user can be a member of multiple groups. By defining an array argument (the argument name must start with ARRAY_) you can use the argument in a SQL IN clause. For example

select * from tasklist where group IN (:ARRAY_USERSECURITYGROUPS)

 

NOTE: If you are using Active Directory, or IIS (with the Alpha Anywhere plugin), the Security Groups are the actual names of the security groups. In the case of the classic Alpha Anywhere server, the security groups are the GUIDS for each group.

To specify that an argument gets its value from the currently logged in user, set the Get argument value from property to Get value for current logged in user. Then set the Value property.

 

 

When you click the smart field for the Value property you will get a dialog allowing you to select which attribute of the currently logged in user you wish to set the argument to.

If you have defined an  Extended User Information Table, for the current project, the pick list includes fields in the  Extended User Information Table.

 

 

Example

Filtering records in a Grid to only show records that are assigned to the currently logged in user. Assume that the table that the Grid is based on has a field called userid. The Grid should only show the records where the value in the userid field matches the userid of the currently logged in user.

Click the Define Arguments button to define an argument and bind that argument to the userid for the currently logged in user.

Define a filter for the Grid (assume that the argument you defined was called ARGUMENT_USERID).

userid = :ARGUMENT_USERID

 

 

 

 

 

UX and Grid Components - Security Framework - Arguments - Xbasic - You can now set an argument to the result of an Xbasic function.

When the component is initially rendered and the argument values are set, the Xbasic function will be called and the argument's value will be set to the value returned by the Xbasic function.

To specify that an argument gets set by an Xbasic function, set the Get argument value from property to Xbasic, and then specify the name of the Xbasic function to call. The Xbasic function can be defined in the component, or in a linked Xbasic Function Library.

 

 

Security Framework - Extended User Information Table - When you use the Security Framework in an Alpha Anywhere application, the table that contains the list of users and their passwords (or password hashes) is a system table and you cannot modify its structure to add additional fields to store additional information about each user.

In order to store additional information about each user in your system it is necessary to create another table in a SQL database. This table is called the Extended User Information Table. If can have any structure that you like, but it must have a primary key field that contains the user id of the user. This field should be indexed.

To create the  Extended User Information Table open the Web Security dialog by clicking the Web Security button on the Web Projects Control Panel. Then launch the Security Settings dialog and click the Extended user-info table hyperlink at the bottom of the dialog.

 

 

This will bring up a dialog that will allow you to specify an existing table, or create a new table in the target SQL database.

 

 

 

 

If the user logs in from a UX or Tabbed UI (i.e. not the Login component), a client-side Javascript object will be created with values for each of the fields in the Extended User Information Table.
This object is called A5.extendedUserInformation 

 

TIP If your Extended User Information Table has a specially named field called ActiveLanguage then the value in this field can be used to set the active language for the app. Normally the active language is set by specifying the language in the session.__protected__activeLanguage variable.

 

Build5303

UX Component - Action Sheets - A common user interface design in iOS mobile applications is the Action Sheet. An action sheet is a series of menu options that animates into display from the bottom of the screen. The menu can be divided into logical sections, as shown in the image below.


 

 

 

The {dialog.object}.actionSheet() method is used to display an Action Sheet. This syntax for this method is:

 

{dialog.object}.actionSheet(menu [, width]);

 

Where:

 

 

Example:

The following Javascript produces the Action Sheet shown in the image above

			
var menu = [
	[
		{html: 'This is the help text above the Action Sheet. It does not have an action'},
		{html: 'Save', action: function(){alert('save')} },
		{html: 'Save As...', action: function(){alert('saveas')} }
	],
	[
		{html: 'New', action: function(){alert('new')}},
		{html: 'Open...', action: function(){alert('open')}}
	],
	[
		{html: 'Cancel', action: function(){alert('cancel')}}
	]
]

;
{dialog.object}.actionSheet(menu);
			
			

UX Component - Action Javascript - Action Sheets - A new action in Action Javascript allows you to create Action Sheets.

 

Build 5298

Grid and UX Component - Dropdown Messages - Action Javascript - A new action in Action Javascript makes it easy to create Dropdown Messages. The Message box - DropDown Style action can be selected.

 

 

 

Build 5290

 

Grid and UX Component - Dropdown Messages - A new Javascript method has been added to both the Grid and UX component to make it easy to display dropdown messages.

Three styles of dropdown message are available:

 

'Wait' Style Dropdown Message

 

'Confirm' Style Dropdown Message

 

'Message' Style Dropdown Message

 

 

 

 

Syntax

{dialog.object}.dropDownMessage(type,title,body,width,okButtonLabel,cancelButtonLabel,onOK,onCancel,location,animationStyle)

{grid.object}.dropDownMessage(type,title,body,width,okButtonLabel,cancelButtonLabel,onOK,onCancel,location,animationStyle)

 

Where

 

 

 

 

Example:

var dropDownType = 'confirm';

var title = 'Message Title';

var msgBody = 'Message body text';

var width = '400px';

var oKButtonLabel = 'OK';

var cancelButtonLabel = 'Cancel';

var onOK = function() { alert('pressed ok'); };

var onCancel = function() { };

{grid.object}.dropDownMessage(dropDownType,title,msgBody,width,oKButtonLabel,cancelButtonLabel,onOK,onCancel);
 

Build 5288

New Property Grid Control - The new Property Grid control still has some edge case issues. If you run into any issues, please report to Alpha and revert to the old Property Grid by executing this command from the Interactive Window:

a5.System_Mode_set("new_propgrid","off")

 

Build 5286

Property Grid Control - The Property Grid control is ubiquitous throughout the Alpha Anywhere IDE. It is used extensively in the UX and Grid builder, and in the List, ViewBox, FormView, ControlBar etc. builders in the UX builder. Previously, the Property Grid control was based on a 3rd party ActiveX control licensed from CodeJock. Unfortunately, this CodeJock control had a resource leak that resulted in the Alpha Anywhere IDE having to be shut down and restarted after extended periods of use. While a later version of the CodeJock control has addressed this issue, we were not able to switch to this newer version as it introduced other issues.

Therefore, Alpha has built its own Property Grid control. The benefits of the Alpha Property Grid control are:

If you come across any issues with the new Property Grid control, you can revert to the old CodeJock control by executing this Xbasic command from the Interactive window:

a5.System_Mode_set("new_propgrid","off")

Build 5271

Xbasic - A5_sqlToJSONExpandingMenu() Function - A new helper function has been added to generate the JSON needed to populate an Expanding Menu control in a UX component from data returned by a SQL query.

Syntax

c JSON = a5_sqlToJSONExpandingMenu(C connectionString ,C table ,C fieldList [,C endPointFieldName [,C filter [,C order [,P argsIn [,C endpointfunctionname ]]]]])

 

Where:

 

Watch Video - Part 1
Watch Video - Part 2

 

Download files

 

Example:

 

dim cs as c = "::name::AADemo-Northwind"

dim table as c = "customers"

dim fieldlist as c = "country,city,contactname"

dim endpointfield as c = "customerId"

dim filter as c = "country <> ''"

dim order as c = "country"

dim endpointfunctionname as c = "selectCustomer"

dim json as c

json = a5_sqlToJSONExpandingMenu(cs,table,fieldlist,endpointfield,filter,order,null_value(),endpointfunctionname)

'now use this JSON to generate the Javascript to populate an Expanding Menu control on a UX component

 

dim js as c

js = "var data = " + json + ";" + crlf()

js = js + <<%str%

var obj = {dialog.object}.getControl('expandingmenu_1');

obj.data.items = data.items

obj.data.actions = data.actions

obj.refresh()

%str%

 

 

Xbasic - a5wcb_convertFriendlyMenuToExpandingMenuJSONData() Function - A new helper function has been added to generate the JSON needed to populate an Expanding Menu control from a menu definition that uses a CRLF list of menu entries, with tab indentation to indicate menu hierarchy.

The menu definition allows you to assign a optional server-side show/hide expression and/or a set of security groups to any menu branch or leaf item. The JSON that is generated will honor the server-side show/hide expressions and security groups. For example, if a menu branch should only be available to someone who is a member of the Administrators group, the generated JSON will not include that branch if the currently logged in user is not in the Administrators group.

The example below shows a "friendly" menu definition

Alpha

    Alpha1

    Alpha2

        Alpha21

        Alpha22

Beta

    Beta1

Gamma

    Gamma1

Each item in the menu can be followed by an optional JSON definition. This JSON definition can have these properties (all of which are optional)

The above "friendly" menu definition, using the optional JSON settings string for some of the menu items:

Alpha{serverSideShowHideExpn: 'session.var1 = "alpha"'}

    Alpha1

    Alpha2

        Alpha21{securityGroups: 'Administrator,Sales'}

        Alpha22

Beta

    Beta1

Gamma{icon: 'svgIcon=#alpha-icon-bandAidCrossed:icon,24'}

    Gamma1

 

 

 

Syntax

C json =  a5wcb_convertFriendlyMenuToExpandingMenuJSONData(C menu )
 

Where:

 

 

UX Component - Expanding Menu - Dynamically Populating - Ajax - Two new helper functions have been added that make it easy to dynamically populate an Expanding Menu control with data computed in an Ajax callback.

 

Watch Video - Part 1
Watch Video - Part 2

 

Download files

 


 

TabbedUI Component - Expanding Menus - TabbedUI Component - You can now use Expanding Menus to render Tree Controls in the TabbedUI Menu. This allows for a more modern look for your TabbedUI components.

NOTE Expanding Menus are a standard UX control type. To add an Expanding Menu to a UX component, go to the Data Controls section in the UX toolbox and select [More...].

In the two images below, a TabbUI is rendered with a Tree Control in the first image and an Expanding Menu in the second image. Notice that when the Expanding Menu is used, various parts of the TabbedUI (e.g. the Menu header, the Tab bar, etc.) inherit the color used for the Expanding Menu.

 

 

 

 

To render a Tree container as an Expanding Menu, check the Display as Expanding Menu property in the Tree Control Begin Properties section.

 

 

 

 

When you render a Tree Control as an Expanding Menu you can set the Menu prefix icon for tree branches. This is an icon that will display to the left of the branch text.

 

 

In the image below a tree branch is shown with an icon prefix.

 

 

When you use Expanding Menus in a TabbedUI you will generally want to set the colors of various TabbedUI parts to match the menu color of the Expanding Menu. This is easily done by clicking on the smart field for the CSS to customize TabbedUI appearance property.

 

 

 

When this dialog opens, click the Set all TabbedUI part background colors to match the Expanding Menu color property. This will match the color in the first Expanding Menu control in the TabbedUI. (A TabbedUI might have multiple Expanding Menu controls, each of which may have a different menu color.)

NOTE: If you do not check the box to set the color of various TabbedUI parts to match the Expanding menu color (or if your TabbedUI does not have any Expanding Menu controls), this dialog also allows you to tweak the appearance of different parts of the TabbedUI by defining a set of custom CSS classes that are applied to different TabbedUI parts.

 

 

TabbedUI Component - Customizing Appearance - By modifying the style sheet used for a TabbedUI you can customize the appearance of the TabbedUI component. However, as an alternative to editing the style sheet, you can define custom CSS classes that get applied to various parts of the TabbedUI.

The parts of the TabbedUI interface that you can modify with your own custom CSS classes are:

To define the CSS classes to modify the appearance of these TabbedUI parts, click the smart field for the CSS to customize TabbedUI appearance property in the CSS/SVG section in the property sheet.

 

 

This will open a dialog where you can specify the CSS classes you want to define to customize the various TabbedUI parts.

NOTE The custom CSS classes you define are applied in addition to the built-in CSS classes for the various TabbedUI parts. For example, if you are using the MobBlue style sheet, the CSS class applied to the Menu Panel Header is MobBlueGridHeader. If you define a custom CSS class (called (say) MenuPanelHeader) the CSS classes applied to the Menu Panel Header will be MobBlueGridHeader  and MenuPanelHeader.

 

TabbedUI - Tab Pane Buttons - You can now customize the appearance of individual tab pane buttons (these are the buttons that appear in the tab band after you open a component by clicking on a button in the TabbedUI menu area).

NOTE Previously, you could only customize the appearance of all of the tab pane buttons, but not individual tab pane buttons. To customize the appearance of all tab pane buttons, set the Tab button off and Tab button on properties in the Class names section of the TabbedUI property sheet.

To customize the appearance of a particular tab pane button, select the TabbedUI button in the property sheet and then set the Tab class name and Tab selected class name properties in the Tab CSS section.

 

 

 

 

UX Component - Methods - .setCSS() method - The {dialog.object}.setCSS() method allows you to dynamically add CSS classes at run-time.

 

Syntax:

id = {dialog.Object}.setCSS(css [,id])

 

Where:

If you do not pass in an id a new DOM 'style' node is created. The method returns the id of the node that was created. You can use this id to update the CSS.

 

Example:

var css = '.css1 {color:red;} .css2 {color:blue;}';

var id = {dialog.object}.setCSS(css)l

//now update the definition<br>
css = '.css1 {color:blue;}';

{dialog.object}.setCSS(css,id);


 

 

 

 

Xbasic - showvarhtml() Function - Display Formatted HTML - The showvarhtml() function can be used to display a string of HTML text. The HTML is formatted for readability before it is displayed.

Build 5251

UX Component  Sample Template - Ad-hoc SQL Query Builder - An updated version of this template is now available. The update makes some changes to the UI exposed by the component.

UX Component - List Control - Columnar Layout - Columns - Sort - Initial Sort Direction - When you define the sort action for a column in a List control you can now set the initial sort direction. If the column is unsorted when the user clicks on the column heading the Initial sort direction is defined by the Initial sort direction property.

NOTE: The Grid component as a similar capability to set the initial sort direction.

To set the initial sort direction, set the Initial sort direction property in the List Builder for the selected column.

Build 5244

UX Component - Sample Template - Ad-hoc SQL Query Builder - A new sample template is now available when you build a new UX component. The purpose of the component is to allow a user to perform arbitrary queries against any table in a database and then export the data to Excel.

Watch Video

 

The image below shows the component when it is running. As the image shows the user can

 

Once the user execute the query focus is automatically given to the Results pane (second image) which shows the query results.

The use can choose to

 

In order to save and load queries you must configure a Repository table. This is done by going to the Project Properties dialog when the Web Control Panel has focus and setting properties for Repository Settings.

The list of connection strings that the user can select from is controlled by the choices you define for the ConnectionString dropdown box control on the UX.

 

 

 

 

 

Build 5241

UX Component - Containers - Height - Screen.Height - When setting the height of a container control on a UX you cannot use percentages. For example, you cannot set the height of a container to 100%. (You CAN set the width to 100%). Now you can use a special variable screen.height when setting a container's height property.

NOTE: You cannot use screen.height when defining the in-line style for the container. You can only use screen.height in the Height property.

 

Watch Video

 

You can define arithmetic expressions using screen.height.

For example, to set a container's height to half of the screen height set the Height property to

screen.height/2

 

To set a container's height to 50px less than the screen height:

screen.height - 50

 

NOTE: Numeric constants in an expression are always pixels.

 

 

 

NOTE: If you use an Alignment container and you set the Container vertical alignment property to Middle and you do NOT set the container height property, Alpha Anywhere will automatically set the container height property to screen.height.

Build 5235

UX Component - List Control - Detail View - Synchronization Log Table - When you edit a List control in the List Control Builder, when you save your edits, if your List is configured with an updateable Detail View and you do not have the 'server-side synchronization log table' feature turned on, a warning dialog is now displayed recommending that you turn this feature on.

If you have not configured the synchronization log table (normally done by opening the Project Properties dialog), the warning dialog will automatically configure the synchronization  log table if you turn on the synchronization log feature.

 

UX Component - List Control - Detail View - .saveListEdits() Method - The .saveListEdits() method is used to synchronize edits made to the List. The method can now take additional optional properties to specify:

These additional properties are passed in the optional settings object  that the .saveListEdits() method takes.

 

Syntax:

{dialog.object}.saveListEdits('listName',

{

    rows: 'all' or 'current',

    ajax: {

        timeOut: 15000,

        onAjaxFail: function() { } ,

        onDeviceOffline: function() { }

        }

}

);

Build 5227

 

UX Component - PhoneGap Applications - Downloading Files to a Device - A new action has been added to Action Javascript that makes it easy to download multiple files (including SQLite database files) to a device so that these files can be accessed while the application is offline.

 

To select the action choose PhoneGap - Manifest from the list of available actions.

 

 

 

 

 

 

HTML Reporting - Window Toolbar - Close Button - When you use Action Javascript to define an action that prints a report as HTML you can define buttons that appear in the toolbar of the window in which the report is shown. In some cases, developers will choose to turn off the display of the window title bar in order to create a nicer looking window. However, if you turn off the title bar, there is no way to close the window. There a new option is available to add a close button to the window toolbar.

 

To select this option uncheck the option to show the window title and then set the Has window close button property

 

 

Here is how the window toolbar will appear:

 

Bugs

UX Component - List Control - Reports - Fixed an issue with the currentListFilter() psuedo function.

Build 5298

Geocode_address() Function - Was not passing in the API Key value correctly

UX Component - Web Sockets - Fixed an issue where the WebSockets code was not getting published when a web project that used WebSockets was published. As a result, the components that used Web Sockets would not work. 

SQLite Database - Indexes - When you create a SQLite database, Alpha Anywhere allows you to define indexes for the SQLite database. If a table was based on a custom SQL statement, the Index Builder genie did not show you the fields in the SQL query.

 

Application Server - Security Framework - Active Directory - IIS - A regression was introduced in the last release build in Application Server for IIS where groups are not found for a user. This leads to users not being authorized to access pages after the user has successfully logged in.

This problem occurs when the users and groups are in separate branches of the Active Directory hierarchy. Given this example Active Directory structure:

Company (OU)
    Employees (OU)
        Location1 (OU)
        Location2 (OU)
            Users (OU)
                User1 (User)
                User2 (User)
                User3 (User)
    Security Groups (OU)
        Applications (OU)
            Manufacturing (OU)
               Administrators (Group)
               Assemblers (Group)
               Foreman (Group)
		

the problem would occur when using the Users OU to authenticate users and the Manufacturing OU for groups. This is now fixed.

 

Action Javascript - Email a Report - Fixed an issue when the Internal option was selected to email the report. (The Mandrill and Sparkpost options did not have any issues).

Web Applications - Security Framework - Active Directory - Fixed an issue where you would occasionally get an error message stating:

 

Cannot access a disposed object.

 

Build 5227

UX Ccomponent - Semi-circular Number Display - Dynamic Color - The dynamic color option was broken as a result of an upgrade to a new version of the RGraph open source Javascript library bundled with Alpha Anywhere

Tips