This is how you can create a Dynamic Form using Xamarin.Forms

XamarinForm

From a couple of years, a technology is ruling over the IT world and is well popular in the IT industry as a name of Xamarin App Development Platform. This is easy to adopt and cross-platform stage towards the development of a bugless mobile application which is compatible on each browser and screen size, easy to operate, decent in look wise with amazing UI along with several advanced features of usage. Delivering the best UI is the best feature of Xamarin.

When to use any other application development platform, developers may get stuck creating dynamic forms, but with proper knowledge and use of all the resources of xamarin technology, a developer can easily achieve the success in the creation of a dynamic form. Let’s see how:

At first, just create a template layout for the form with the fields, like, buttons, radio buttons, labels, text boxes, check boxes etc. For this concern, use the below code:

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)
}

If you wnat to add a different layout in each separate file you are free to do that in Xamarin Technology. You can call that layouts through JSON from the serven in the form of API and then the layout will set according to that JSON. It will grab all the information that will be shown in the form in a well arranged way. Use the mentioned code to achieve the result:

Assure that, you get the below JSON from the 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,
}
]
}

By assigining the receivedJSON to a model we will 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;
}

This method will generate a UI automatically as delivered by the server. Now, its time to revert the data to the server by filling the form. Apply the code for this purpose:

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)
}

From the above method get the field name and value of the data and then again send it to the real model by calling a function SetData() Field Name property, it will recognize the corresponding value of each entry, if there are wide 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;
}
}
}

All set now. Hopefull this article will help you in the build up of a dynamic form using xamarin technology.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>