Dynamically configure layout

How-to Discussions
1

Is there a way to dynamically inject a .ux description for a page and instantiate it? or edit an already loaded .ux instance like how the fuse-preview app does?..
This would really help in easily editing a layout from javascript.

I have an application whose pages ( for navigation ) change according to a JSON file that’s returned, but we can’t hardcode the pages in the application, what would best would be for us to dynamically instantiate a page and manually push it into a router.

2

Hi!

There are several ways of instantiating components dynamically based on data from JavaScript like
Match/Case - https://www.fusetools.com/docs/fuse/reactive/match
using triggers like <WhileTrue Value="{showThisComponent}">...
or Each - https://www.fusetools.com/docs/fuse/reactive/each

Even though you can’t fully design each page beforehand, i’m sure you base your app on a set of predefined components which you then stitch together based on some data you receive from your backend. If you could be a bit more specific about what you want, i could provide some more concrete help :), but i hope this points you in the right direction.

3

Heyo,

Actual reply :

So to make things simpler, i’ve just dumped an edited version of the requirements set affected by this.

  1. We have a form with a bunch of questions defined in a JSON string returned from the server.
  2. Each question should be displayed individually in full screen.
  3. Tap a next button to go to next question, back button ( both software and hardware ) to go to previous question
  4. Should be able to specify transition animations between questions inorder to enable certain effects.
  5. Should support pre and post transition processing routines.
  6. Should be able to dynamically update a question/transition list even while user is actively navigating a form. ( As you can tell, this is what makes it particularly challenging ).

Extras :

A little background info :

In the small tech startup I work with( read run ), we want to migrate non critical mobile applications to FUSE so as to encourage junior devs to contribute to active projects.

The senior devs already implemented this in JAVA with activities ( even getting them to use fragments is a headache :confused: ) but the code is old and pre tdd, git, design patterns… basically legacy stuff a pro soft. eng can’t deal with.

So i saw this as an opportunity to rebuild from the ground up! ( with FUSE!!! )

Btw, this is now officially the longest reply i have ever posted in a thread… :)))

EDIT 1:
Just found this class https://www.fusetools.com/docs/fuse/reactive/instance, will pick it apart later and see what it’s about

4

Should the layout of each question/page be the same? meaning only the question text changes? Or should they have completely different layout based on the data?

5

They should have a completely different layout because:

  1. The question might contain text, images, video, audio, markdown or some wacky combination of all the above.
  2. The input widget ( What the user actually uses to answer ) differs according to the type of question asked( or technically what is defined in the JSON string )…

So it ain’t just text.

6

This sounds like something Match/Case would be good for. Part of your data could be the “type” of view for each question, and Match/Case would be able to show/hide different UX subtrees based on that. In those subtrees you could databind as normal to the things needed in each case. I believe Kristian already supplied the relevant links here :slight_smile: