Abstract

As you know that nowadays Dynamic UI generation has become more common. Most of the e-commerce applications such as Flipkart, Amazon, etc. are using this concept. This requires creating UI dynamically on a mobile client device. With such approach, there is no need to update your apps for UI changes and this is controlled from the backend server through APIs. This also helps to avoid going through the app store for each app upgrade. This article walks you through the technical tips and tricks on how to implement it.

Introduction

This article describes how you can generate UI with the help of JSON received from API. The field labels, field types such as Editors, Entries, Check-Boxes, Radio Buttons, etc. will be received from the server side in the form of JSON. The mobile app will capture it and according to those field labels and field types, the mobile app will generate that particular form at runtime. In this approach, UI will not be generated using XAML (static predefined forms design approach) but it will be generated with the help of C#. So this should be handy in generating dynamic UI Forms using C#.

Creating dynamic forms in Xamarin.forms is to compete with a native mobile app technology which offers a similar capability. Hence, with growing demands of Xamarin app development why a xamarin app development company  won’t like to leverage this capability.

Generating Dynamic Forms

Generating UI with the help of JSON is of simple complexity but the main challenge comes when we will post data to the server after entering fields in dynamic form. This is the most tedious task as far as dynamic forms are concerned. This functionality can be achieved in Xamarin applications with help of proper utilization of technical resources. This article will solve such a problem in a very simple way. So get ready for creating dynamic forms, then entering data and posting this data back to the server. First of all, create templates of various layouts i.e. Entries, Buttons, Labels, Editor Box, Radio Buttons, Check-Boxes, etc.

For Example


public void SetEntriesLayout()
{
StackLayout stack = new StackLayout{Orientation=StackOrientation.Vertical };
Entry entry1=new Entry{HorizontalOptions=LayoutOptions.FillAndExpand}
Entry entry2=new Entry{HorizontalOptions=LayoutOptions.FillAndExpand}
stack.Children.Add(entry1, entry2)
}


Similarly, you can add various Layouts in a separate file or within that file.

You can call such layouts depending on JSON received in API from the server and thus these layouts will get/set according to that JSON. You can repeatedly set such layouts by calling these layout templates as everything will be intact in JSON. The JSON will contain all information regarding what to show, in a very organized manner. It will be actually an array of JSON and it will also contain the corresponding values to different field types.

Value to a particular element or field type will also be supplied to that particular JSON. Here is the sample of code on how it can be achieved.

Here is an example:
Suppose you get the following JSON from server:


{
"id" : 1,
"numberOfStudents":4,
"numberOfFields": 3,
" fields" : [
{
"fieldName" : "Name",
"fieldType" : "entry",
"value": null,
},
{
"fieldName" :"Course",
"fieldType" : "entry",
"value": null,
},
{
"fieldName" : "DOB",
"fieldType" : "DatePicker",
"value": null,
}
]
}


Assign above received JSON to a model and with the help of this model, we are going to generate a form.


var ModelData = GetModelData(); //Declare this globally
var OuterLayout = new StackLayout();
for (int i = 0; i < ModelData.numberOfFields; i++)
{
var fieldDetail = ModelData.fields[i];
var innerLayout = new StackLayout();
if(fieldDetail.fieldType=="entry")
{
innerLayout = SetEntryLayout(fieldDetail);
//To make such control layouts, it is described in Posting Data
}
else if(fieldDetail.fieldType == "DatePicker")
{
innerLayout = SetDatePickerLayout(fieldDetail);
}
OuterLayout.Children.Add(innerLayout);
this.Content = OuterLayout;
}


The above method will generate UI as provided by the server. Now we will send the data by filling the form back to server in the following way.

First make a bind-able property in the custom entry to recognize field name as it will help in setting the data to that particular model.


public static BindableProperty FieldNameProperty = BindableProperty.Create("FieldName",
typeof(string), typeof(ExtendedEntry), null);
public string FieldName
{
get { return (string)GetValue(FieldNameProperty); }
set { SetValue(FieldNameProperty, value); }
}
public void SetEntryLayout(FieldDetail data)
{
StackLayout stack = new StackLayout{Orientation=StackOrientation.Vertical };
ExtendedEntry entry1=new ExtendedEntry{HorizontalOptions=LayoutOptions.FillAndExpand}
entry1.FieldName = data.fieldName;
fieldEntry.Unfocused += (object sender, FocusEventArgs e) =>
{
string field = ((ExtendedEntry)sender).FieldName;
string value = fieldEntry.Text;
SetData(field, value);
};
stack.Children.Add(entry1)
}


In above method, get the field name and value and send it to the original model by calling SetData().FieldName property which helps in recognizing the corresponding value to a particular entry. As there might be many number of entries in the form.


public void SetData(string field, string value)
{
for (int i = 0; i < ModelData.numberOfFields; i++)
{
if(ModelData.fields[i].fieldName==field)
{
ModelData.fields[i].value = value;
}
}
}


While submitting the form, you can send this data model back to server. Hope, these set of example might help you creating your first sample dynamic UI form in Xamarin.

The custom development of generating dynamic forms using xamarin.forms always give an edge to best xamarin app development companies to provide these runtime features for customer’s specific requirements.