Data Form View Items only from API response

[Emad Afaq]

I have the treeview setup, in that when an item is selected it should pass that ID to my rest service and navigate to the details page where i will get the details of that selected item. for that details page I want to use your data form in View Mode only. 

I was confused on what will be the best practice to implement this. 

Code Behind of Tree View:

                var ID = TappedNode.ID.ToString();

                var data = await restServiceWorkItemDetail.GetWorkItemDetailAsync(ID);

                App.workDetail = data;

                await Navigation.PushAsync(new PBIDetailsPage());

My rest Service is:

 try

            {

                var response = await _client.GetAsync("https://dev.azure.com/"+ App.Account +"/"+App.Project+"/_apis/wit/workitems/" +id);

                if (response.IsSuccessStatusCode)

                {

                    var content = await response.Content.ReadAsStringAsync();

                    var workItemModel = WorkItemModel.FromJson(content);

                    return workItemModel;                    

                }

            }

            catch (Exception ex)

            {

                Debug.WriteLine(@"\tERROR {0}", ex.Message);

            }

            return null;

and my model is:

    public partial class WorkItemModel

    {

        [J("id")] public long Id { get; set; }

        [J("rev")] public long Rev { get; set; }

        [J("fields")] public FieldsClass Fields { get; set; }

        [J("_links")] public WorkItemModelLinks Links { get; set; }

        [J("url")] public Uri Url { get; set; }

    }  // My model is very big, didnt add here

The current approach is where I store the response in a public class and refer to that variable to set values in my view. Here I am not using the MVVM approach.

I want to use the MVVM Approach with SFDataForm in readonly mode.

Please advise and any sample will be really helpfull

[Karthikraja Arumugam]

Hi Emad, 

 

Thank you for contacting Syncfusion support. 

 

Based on the shared information we have checked your requirement of “Loading DataForm with API response on a node tapped in TreeView”, your requirement can be achieved by using the behavior class for TreeView and DataForm, in TreeView ItemTapped event set DataObject for DataForm based on the tapped node of TreeView. 

 

We have prepared a sample for the same, 

Link: DataFormSample 

 

We hope this helps, kindly revert us if you have any concern. 

 

Regards, 

Karthik Raja A 

[Emad Afaq]

I am trying to implement this. Should be fine. Thank you.

I ahve one more question. When data form is set to read-only mode, can I change the text color and make it a bit more black because its a bit hard to read when its grayed out. Or maybe if I can not show the grayed out part and just normal text to make it more readable. 

[Karthikraja Arumugam]

Hi Emad, 

 

Thank you for the update. 

 

We have checked your requirement of “Changing editor text color while DataForm is in ReadOnly mode”, and this can be achieved by customizing existing DataForm editors. In custom editor class, override OnInitializeView method and change TextColor and ReadOnly property of editor view. Here, there is no need to set DataForm’s IsReadOnly property. 

 

Please refer the following code example for the same, 

 

[C#] 

dataForm.RegisterEditor("Text", new CustomDataFormTextEditor(dataForm)); 

 

  public class CustomDataFormTextEditor : DataFormTextEditor 

  { 

        public CustomDataFormTextEditor(SfDataForm dataForm) : base(dataForm) 

        { 

        } 

        protected override void OnInitializeView(DataFormItem dataFormItem, Entry view) 

        { 

            base.OnInitializeView(dataFormItem, view); 

            view.TextColor = Color.Black; 

            view.IsReadOnly = true; 

        } 

  } 

 

If you want to set DataForm IsReadOnly property then in custom editor class OnUpdateReadOnly method, directly map IsReadOnly property of view with DataFormItem ReadOnly. 

 

Please refer the following code example for the same, 

 

[C#] 

dataForm.RegisterEditor("Text", new CustomDataFormTextEditor(dataForm)); 

 

  public class CustomDataFormTextEditor : DataFormTextEditor 

  { 

        public CustomDataFormTextEditor(SfDataForm dataForm) : base(dataForm) 

        { 

        } 

        protected override void OnInitializeView(DataFormItem dataFormItem, Entry view) 

        { 

            base.OnInitializeView(dataFormItem, view); 

            view.TextColor = Color.Black; 

        } 

        protected override void OnUpdateReadOnly(DataFormItem dataFormItem, Entry view) 

        { 

             view.IsReadOnly = dataFormItem.IsReadOnly; 

        } 

  } 

 

We have prepared a sample based on your requirements, 

Sample link: DataFormSample 

 

You can also refer our UG documentations to know more about customizing existing editor in dataform, 

UG link: https://help.syncfusion.com/xamarin/sfdataform/editing#customizing-existing-editor 

 

We hope this helps. Kindly revert us if you have any concerns. 

 

Regards, 

Karthik Raja A