Best Approach for Populating Picker with API Calls

[Emad Afaq]

I have this SFDataForm sample from Syncfusion, where some fields are Text inputs and others are Pickers.

I want to populate my pickers with three different API calls. Then a user can make selection and create an item. What is the best approach as in the sample, there are hard coded enum values. Please advise. and a sample with API Call will be really helpful. 

[Karthikraja Arumugam]

Hi Emad, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your requirement of “Loading ItemsSource for picker using API in DataForm”, you can provide ItemsSource for picker using SourceProvider class. DataForm SourceProvider class is used to get values for Picker, DropDown, AutoComplete, RadioGroup and Segment editors. 

 

Please refer the following code example for the same, 

 

[C#] 

dataForm.SourceProvider = new SourceProviderExt(); 

 

public class SourceProviderExt : SourceProvider 

{ 

      public override IList GetSource(string sourceName) 

      { 

                var list = new List<string>(); 

                if (sourceName == "Gender") 

                { 

                    list.Add("Male"); 

                    list.Add("Female"); 

                } 

                return list; 

       } 

} 

 

Kindly refer our UG documentation for the same, 

Link: https://help.syncfusion.com/xamarin/dataform/editors#using-sourceprovider-1 

 

You can also use ItemsSource property of DataFormPickerItem in AutoGeneratingDataFormItemEvent to provide ItemsSource, 

 

Please refer the following code example for the same, 

 

[C#] 

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem; 

 

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e) 

{ 

            if(e.DataFormItem != null && e.DataFormItem.Name == "MaritalStatus") 

            { 

                var list = new List<string>(); 

                list.Add("Married"); 

                list.Add("UnMarried"); 

 

                (e.DataFormItem as DataFormPickerItem).ItemsSource = list; 

            } 

} 

 

Kindly refer our UG documentation for the same, 

Link: https://help.syncfusion.com/xamarin/dataform/editors#using-event 

 

We have prepared a sample including your requirements, 

Link: DataFormPicker 

 

You can also refer our KB documentation to know about loading picker ItemsSource asynchronously, 

Link: https://www.syncfusion.com/kb/9748/how-to-load-the-picker-editor-itemssource-asynchronously-in-xamarin-dataform 

 

We hope this helps. Please revert us if you need any further assistance. 

 

Regards, 

Karthik Raja A 

[Emad Afaq]

I ahve attached my code. It does not reflect data from api call. Please Advise

I am suing this end point. 
https://dev.azure.com/{}/{}/_apis/work/teamsettings/iterations?$timeframe=current&api-version=5.1

Attachment: Query_Syncfusion_Picker_e44339fc.zip

[Karthikraja Arumugam]

Hi Emad, 

 

Thank you for the update. 

 

As we have mentioned in our previous update, you can provide ItemsSource for Picker using SourceProvider class, in which get values from your database and assign it to the ItemsSource. So here DataForm working fine, kindly check the data received from the database has value and convert it into the required data.  

 

Kindly refer our KB documentation to load Picker ItemsSOurce from SQLite offline database, 

Link: https://www.syncfusion.com/kb/9771/how-to-load-the-picker-editor-itemssource-from-sqlite-offline-database-in-xamarin-forms 

 

You can also refer our KB documentation to know more about loading picker ItemsSource asynchronously, 

Link: https://www.syncfusion.com/kb/9748/how-to-load-the-picker-editor-itemssource-asynchronously-in-xamarin-dataform 

 

Please revert us if you need any further assistance on SfDataForm, we are always happy to assist you. 

 

Regards, 

Karthik Raja A 

[Emad Afaq]

Hi,

I am retrieving it directly from an api http request. The data travels properly but data form does not update it. 

Please check the attached file I gave. 

I feel the navigation takes place and doesnt wait for my call to complete although I am using async await. 

Please see the code

[Emad Afaq]

It navigates and doesn't wait for the call to compete. 

[Karthikraja Arumugam]

Hi Emad, 

 

Thank you for the update. 

 

We are checking the mentioned requirment in source and sample level, we will validate and update you further details on January 15, 2020. We appreciate your patience until then. 

 

Regards, 

Karthik Raja A 

[Karthikraja Arumugam]

Hi Emad, 

 

Thank you for your patience. 

 

We have checked the mentioned issue and since GetSource method completes the process before API response from database hence picker ItemsSource doesn’t update. You can achieve your requirement by assigning ItemsSource from API response in the DataFormAutoGeneratingItem event. Since ItemsSource is bindable property it will take the value once response completed. 

 

Please refer the following code example for the same, 

 

   

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem; 

 

if (e.DataFormItem != null && e.DataFormItem.Name == "Iteration") 

{ 

                var sprints = await App.Database.GetItemsAsync(); 

 

                List<string> items = new List<string>(); 

                foreach(var k in sprints) 

                { 

                    if(k.Name != null) 

                    { 

                        items.Add(k.Name); 

                    } 

                } 

                (e.DataFormItem as DataFormPickerItem).ItemsSource = items; 

 } 

 

We have prepared a sample for your requirement, 

Sample link: DataFormSample 

 

We hope this helps. Please let us know if you need any further assistance. 

 

Regards, 

Karthik Raja A