Skip to end of metadata
Go to start of metadata

Crosslight ships with a powerful form builder capabilities, allowing you to create forms in minutes, not days. Based on the form metadata defined in the shared application layer, Crosslight automatically creates a beautiful data form complete with the layout and editing controls. Crosslight for Android includes support to all editor types defined in the Crosslight foundation – from basic editors such as text field, multi-line text field, check box, date time picker to advanced control such as image picker, selection controls and seekbar controls.

This section explains the features and the desired behaviors of each editor type found on the Android platform. For more information on the basics of form metadata and the available editor types, see Building Rich Data Entry Form – Part 6.

Introducing Form Activity and Form Fragment

On this page:

Creating simple yet elegant data forms in Android with Crosslight could never be easier. With a powerful class that is designed to simplify form construction, you can build data forms that feature pixel-perfect layout rendering with rich editing controls. Introducing FormActivity, the class that will automatically reads the form metadata defined from the shared application layer. The following example shows the usage of FormActivity.

 

In addition, if you want to implement a more advanced layout with fragments, you can take advantage of the FormFragment that allows you to use the Form Builder with Fragment layout. In addition to FormActivity, since Crosslight 2.0 Update 5, Crosslight for Android has been upgraded with the ability to use the Form Builder in a fragment using the FormFragment. To take advantage of the FormFragment, simply change the FormActivity definition to FormFragment. Of course, this is not all. You will have to host the Fragment inside a FragmentActivity or a MasterDetailFragment. Check out the following code. To learn more about the Crosslight navigation pattern, check out Understanding Crosslight Navigation Patterns

Crosslight Android Form Builder Features

In general, Crosslight Form Builder for Android includes the following key features:

  • Versatile data editing form based on list view user interface pattern.
  • Conforms to the Google design standards and guidelines.
  • Supports both plain and grouped style.
  • Include pre-built layouts such as left detail, right detail, and row detail.
  • Advanced composite section style rendered in pixel-perfect fashion, supports image and fields to be positioned side-by-side.
  • Automatic rotation handling.
  • Thoughtfully-designed user experiences, for instance, opened picker will be re-opened after rotation – all in smooth animation.
  • Includes an advanced multi-line text view feature that enables auto-shrink and auto-grow based on dynamic content size and specified min/max height.
  • Includes a sophisticated image picker supporting take photo from camera, choosing from existing library, image editing (move, scale and crop), as well as delete photo which binds directly to the model.
  • High performance and memory-efficient image processing allows you to obtain both full size thumbnail image in the ViewModel.
  • Supports advanced image picker features that let you add your own custom commands and intercept the image results in the ViewModel.
  • Supports runtime interactivity such as expanding/hiding and enabling/disabling certain controls based on certain conditions.

For details, see the following illustration.

The date picker on Android that conforms to Android UI standards and automatically supports rotation handling.

Image picker control lets you specify a placeholder which will appear when the image property of the model is empty.

When users tap on the image, the image picker will smartly show actions that users can perform. All actions are handled automatically with the result automatically set to the property of the model. In addition, you can add your own custom commands via command in the view model.

 

The form builder is also equipped with data validation feature in the view model and display presenters to show error messages to the user.

 

Whether it's a phone or tablet, the form builder delivers pixel-perfect layout and fully-functional editing experiences that are optimized for each device kind.


Keep in mind that the editors and their behaviors are not controlled in the Android application layer. Instead, they are defined in the form metadata at the shared application layer which enable other platforms to consume the same metadata and the consistent user experience across different platforms.

For more information about form metadata, see Form Builder Overview section. 

For more information about data validation, see Validating Data section.

Customizing Editor Features Programmatically

In the previous sections, you have learnt about Crosslight Form Builder and how it enables you to build beautiful, fully-functional data form in minutes with the form metadata attributes. The form metadata is specifically designed for cross-platform compatibility in mind. In general, it does not focus on the platform-specific features. 

The best practices and most recommended guidelines to build cross-platform data form with Crosslight is to use the Form Builder to define behaviors that work consistently in all platforms. If platform-specific editor customization is needed, then perform additional customization only for the particular platform in its own layer.

Crosslight lets you elegantly customize the platform-specific features and behaviors for every editor generated by the Form Builder. In Android, you can access the generated editor views from the Form property provided in FormActivity, the invoke the GetProperties method to get all property definitions across all sections defined in the form definition.

The Following code example shows to access the Quantity property definition, and then customize the background color of the content view. Note that the View conforms to IComponentView interface.

This illustration is the result of code above,