Skip to main content

Context based Data Driven Dynamic UI / ListView Problem and Solution

All we need is the good dynamic UI with the minimal code and the efficient one. We face several issues when such requirements like dynamically based on the context of what the user see on the screen, I need to get the data handler and network handler or some or all the components in my system or app should respond back with the actions and data with respect to the context.

Being said this, setting the context to the reader about the problem in short and would go through on solution to solve the same.

Problem:

Few problems that comes into picture while developing an UI based applications like Mobile apps or the Web apps etc., we come across following problems,
  • User is free to navigate to any screen.
  • User is free to do any operation that might change the state of the data and if the data change its state the UI may take a state change. 
  • Today the app may have few states what if tomorrow the state are huge.
  • Should I handle all the states manually with switch case or if else ?
  • Should I have my data fetching and networking components customized for each and every context ?
  • What if there are dynamic addition and deletion of UI elements on the screen based on the state of the data / context ?

Scenario Examples:

If you are in any one of these scenarios this design solution is right for you. For the purpose of understanding rather than dealing this at the abstract level, lets dive into the example of the patient health record maintenance app may be used by the hospital to track the patient health. Imagine if you are the doctor and you open the patient profile, you get all his/her medication report, Health status report and the records of his previous treatments. The UI is going to be dynamic that the each and every screen fetch the data from the API based on what the user is currently seeing on the screen and also the list view actions buttons provided in the swipe to action buttons change based on the status of the data.

  • We may need to search the data in the various screens as per the context the screen is for. If Previous Treatments screen same search component should search for the search term that the user ask for.
  • Dynamically get the data loaded from the API based on what the user is viewing on the screen rather than writing all the code hard-coded for each and every state.
  • Add the buttons dynamically on the listView of the records. Example - Modify & delete button if the record is 10 weeks old data. (UI based on the data/state driven rules)

Fig : Shows various dynamic screens

Hope that this scenario would have explained the context of the problem that we are trying to solve.

Solution:

Name: Context Based Dynamic Components

Participants :

  • Context Handler
  • Context
  • Screens (Example - Health status screen, Medications screen, History treatment screen)
  • Network Manager
  • List View Helper
Lets get the hands wet looking at the implementation,




  1. Any screen that have the dynamic UI based on the data that we get or the scenario, they contact the Context Handler to get the context object created for that screen and the same will be stored by the Context Handler with the screen context value (Semantically meaning key).
  2. At point of time, Imagine the screen 2 that is dealing with the History records of medication then also assume that the user uses that screen to add or modify or delete the records then the respective API url that is needed to be consumed for the actions should be loaded by the network manager. 
    1. To do this screen first contact the context handler and ask its respective context object.
    2. Invokes context.getNetworkingManager() to get the instance of the network manager.
    3. Imagine that the current Screen context is "History-records" then the network manager will be automatically applied with the url as "http://api.service/v1/patient/<name>/History-records/" which helps in doing rest of the actions without manually writing all the code for modifying the URL of the scenario.
  3. In the same way as discussed in the above point lets assume the next scenario as "Records are getting rendered on the screen in the list View and each list view item shows a item layout that shows the record name and in the side it also shows the action buttons which is dynamic based on the status of the record (Means there may be only two buttons visible or the three buttons visible .etc).
    1. This design helps us in doing this too, in each and every screen we provide the record status and the mapping to the control objects as shown in the code snippet below and this object is registered to the respective screen context object.
    2. After setting the actions object to the context the screen asks for the list view instance from the context object as same as we got the network manager.
    3. After getting the list view customized for the current screen context, the we set the data that need to rendered as list to the list view helper and then ask the list view helper to provide the render-able items on the screen with the action buttons also added.
Hope that the idea is clear and this idea can be adopted for various purposes, the demo was on the networking and the Dynamic UI using the List View. 

Also sure that you might have enjoyed this, there are also many posts on the chat-bot and other interesting stuffs, Subscribe and keep watching !!



Comments

Post a Comment

Popular posts from this blog

How to access the each view of item by position in Recycler View in android ?

How to access the each view of item by position in Recycler View in android ? There are some methods to access the view of each item view to change or update the view during the run time. To access the view of the item view , consider the Recycler view as below, RecyclerView mainRecyclerView = (RecyclerView)view.findViewById(R.id.main_recycler_view); RecyclerAdapter adapter = new RecyclerAdapter(mContext); mainRecyclerView.setAdapter(adapter); main.setLayoutManager(new LinearLayoutManager(mContext));  To access the itemView of each position the following functions can be used,  1. View itemView = mainRecyclerView.getChildAt(positionOfItem);  2. View itemView = mainRecyclerView.findViewHolderForAdapterPosition(Position).itemView;  3. View itemView = mainRecyclerView.findViewHolderForPosition(Position).itemView;  4. Long itemId = mainRecyclerView.getAdapter().getItemId(position);       View itemView = mainRecyclerView.findViewHolderForItemId(itemId);  5. View

A.P.I call or async await not working in Array forEach ?

H ello Readers, Welcome back. You would have wondered why does forEach function on the array does not wait for any asynchronous function even if we provide the async await in the node js. If you are the person, wondered about this ever, this post is right for you. Non working example : Lets consider the below snippet, this will not wait for the asynchronous process to wait. I am making a setTimeout to mock the API call async process. This will result the count as, Output : count = 0 OMG !! Why it doesn't work ? Answer probably might be lying inside the Array prototype from JavaScript. Lets take a look inside the "Array.prototype.forEach" function. From the snippet its clear that, the for loop in which they call the callback function does not wait for the asynchronous process to run in the callback. So this forEach is not build for asynchronous process itself. So can't I use forEach any more for running a asynchronous function ? Answer g