1

I have a requirement that the user may choose different templates for his page say for example for user profile page, our web app should give multiple types of templates to show the profile, user might pick any one template. In future we may enhance the same feature by giving more freedom to user over templates, he can customise the template the way he wish to,

Example for customising a template is : he can move his profile pic from Left side to right side , he may change background colour etc.

What are the best possible approach for this kind of UI ? Do I need to keep meta data of whole page and then create it at client side ? Do I need to create the whole html at server side and just load it at client side ?

Are there any frameworks for JADE/Node.js for this kind of UI development ? I am totally new to this kind of development so suggest me the proper way.

YakovL
  • 7,557
  • 12
  • 62
  • 102
Sadanand
  • 1,080
  • 3
  • 13
  • 30

1 Answers1

1

You easily quite easily accomplish this as follows:

  1. Present the user with a form and a select box (or alternative) listing the theming options. Save this to the database under their user, or alternatively if your app has no real backend to speak of then you could save it to local storage (though in this case the setting will probably be reset before too long on the user's end).

  2. With JS, on page load, determine their chosen value (AJAX call or check local storage) and append a class to a wrapper around their profile page dynamically, e.g. profile--colorful, profile--thin, etc.

  3. Style each profile differently in CSS using those classes.

Sam A. Horvath-Hunt
  • 931
  • 1
  • 7
  • 20
  • My question is whether Do you store the whole form to database ? or you will store meta data of each element ? which is the right approach ? are there any available libraries ? if u store meta data then we might need library to generate html content using meta data – Sadanand Jul 19 '17 at 09:57
  • Do you have a user/auth system yet? If not, then that's the first thing you'll need to do. Once you have that just add a new key to the user model called something like `profileTheme` and store it there. Then load that back in via an AJAX call. – Sam A. Horvath-Hunt Jul 19 '17 at 10:07