TL;DR: Need to create UI pages dynamically from user provided custom templates. These templates should contain enough information so that front-end as well as back-end can be created dynamically, for all user cases.
Keeping the TLDR on top. Also, I am not sure if this has been asked here before, so sorry if this is a duplicate question.
A little background, I am trying to create a Angular 7 based web application that will serve as a single interface for users to configure network devices (routers, switches, etc.). To cover as many different devices and vendors as possible, I cannot make my UI pages static. They should have the capability to change based on user requirements and specifications.
To achieve something like this, common logic states that we should let users create custom templates for their data and data attributes, and then let them upload it to the portal, so that the UI can be rendered dynamically from there.
For example, user A might need a form with 2 input parameters(device name and IP address), while user B in the same organization might need a form with N input parameters, M dropdowns, etc., for some complex configurations.
So coming to the question finally, What is the best way to generate UI pages in case your pages cannot be static and have to change based on user's requirements? In case we go with user uploaded templates, what information should these templates contain?
I am right now using Angular 7 to build my app but I am flexible in this regard. Here for ideas and brainstorming.
The answer is to implement a Data Driven UI. For beginners such as myself, NPM - Data Driven UI is a good starting point.
To satisfy my use case, I implemented a Java platform to generate my UI metadata based on user-input, which is then fed to UI to generate web-pages revolving around a central schema/theme.
Related
I'm brand new to web development with no experience with javascript but experience with HTML/CSS so bear with me here. I'm attempting to create a static website without the use of a website builder by using some sort of front-end framework (leaning towards bootstrap but open to just about anything). One part of this website is going to require a data structure to hold information about multiple objects. For a very close analogy, let's say that I want to store all fruits and vegetables in my data structure. Each fruit/vegetable is going to have multiple attributes associated with it such as color, size, etc. I don't know what the recommended way to store this information would be. Would this require a database created with something like SQL? Should I use a different back-end framework like Django? Any help would be appreciated.
Reaching out to Angular experts here, as i am pretty new with it.
What i am trying to accomplish is to build a very large app that will actually consist of multiple apps and login areas.
There will be different login areas for different types of users that have different functionality, but they will also share many sections that will be shared through all the accounts. Also some users will have custom functionalities developed just for them.
How could i build it so that the code for the shared parts is in one place only so that i don't have to update all installations mannually when there is an update and also at the same time for a user avoid loading unnecessary code that doesn't belong to them or their user type?
Note that i am building this in Angular for frontend and Laravel for the backend and they will communicate via an API.
I have a hard time figuring out how to do the Angular part, the Laravel backend will be easy to manage since it will be an API.
Thanks!
I'm developing a web application where I need to allow to the users to select one or more values I'm usig Jquery 1.11 I was think to use a picklist and not an autocomplete mainly for the following reason: it's not sure that users know what they want to add; they may want to select what to add by seeing a list The problem I'm facing is that in my database I can have thousands of values and a picklist showing all these elements is not comfortable to use I was wondering is there is some kind of Javascript library who can offer to me a paged picklist Otherwise.... what is the best way to show this huge size of data? By taking care that users often don't know what they can add
My situation is the following one: in my project i'm using a WCM (Liferay) and I'm doing some extension to the redactional side of contents. I must provide to the user to fill a field by selecting 1 or N (with N>1) other web contents taken from WCM DB
Often redactors don't use tags and/or categories when they write web contents and some web contents can be written from some user groups and others web content can be written by others user groups; virtually each user group don't know/communicate with other user groups and this means that each user don't know what other user adds so I can't use some autocomplete solution
At the beginning I'll have few Web Contente, but after some time, by seeing the old web site, i can reach huge values (around 4000/5000 web contents and also more)
I already used select2 and I like it, but I have only two option for select2:
full load all data from DB but this means to kill performances and
show users all the data in a combobox
offer a search to users but users may not know what to search and so
they can do a lot of research without finding what they are looking
for
Now I was seeing also this JQuery plugin: https://github.com/yanickrochon/jquery.uix.multiselect but this plugin doesn't offer pagination options so I should always load all data from DB
I'm wondering if I can use some kind of Javascript utility to solve my issue or if I should take another kind of solution
If I should use another kind of solution.. what would be the best one?
I premise that this form will be only used on the redactional side and so I don't need a multi-device solution
https://github.com/lucknerjb/PaginationSelect
Couldn't find a verified project, however this one seems legit.
If you download zip and run index.html you will see this widget at work.
However personally I would rather implement some sort of server side user cart and download items range from a database dynamically instead of serving entire list of items to the user at once.
Intro
I know this has been asked before but the questions I found were either to specific or to general to provoke the kind of answer I was looking for. The best possible answer I can imagine would be an example using backbone and the least amount of server-side logic possible (no preferred language/framework there).
Problem
I am planning an javascript/ajax-heavy (backbone + mostly-json backend) application that implements a facetted search. Take for example a facetted search of a simple shoe shop application that lets you filter color, brand and type of shoes and sort by price and size or whatever else.
Assume I am using backbone or a similar framework on the client and a json service as a backend.
What would be a good (tradeoff between effort and result) strategy to achieve seo-friendliness as well as a snappy interface?
Resources
A solution that came to my attention is Hijax by reusing client-sided templates on the server-side, as described here: http://duganchen.ca/single-page-web-app-architecture-done-right
Resources that I digested without final conclusion
http://code.google.com/intl/de-DE/web/ajaxcrawling/
https://stackoverflow.com/a/6194427/818846
http://www.quora.com/Search-Engine-Optimization-SEO/If-I-have-data-that-loads-using-json-JavaScript-will-it-get-indexed-by-Google?q=seo+javascript
The general point in SEO friendliness: It should work without JavaScript.
It's also good for accessibility, so you should do it like this, if the user does not have JavaScript enabled (like the search engine does), it will work.
If he has JavaScript enabled, (like any sane human being does), it will work with all the nifty JavaScript features you've added.
As a general usability rule of thumb: If it works, it should also work without JavaScript!
The solution of your first link sounds right. The main issue of a single page app is that you have to render your templates on both sides, the backend and the frontend. Using the Mustache or google closures template will be good solution for this.
The same solution that was used for google+, where initially the side will be rendered on the server and you load a static html page, after that the page will be rendered on the client side but with the same templates as on the server.
Also remember that the search engines follow links much more often than they (ever?) complete forms.
This problem of enabling the crawlers to see your db contents is called the "dark web," "invisible web", "deep web" or "hidden web". Blog post
So re your problem statement:
a facetted search of a simple shoe shop application that lets you filter color, brand and type of shoes and sort by price and size or whatever else.
I'd suggest that you include searches via a hierarchy of links in addition to searching via forms with select fields.
Eg, on a secondary menu include all the different brands as individual links. Then each link should lead to a list of the products sold by that brand. The trick is arrange things so that the link to an individual shoe will take you back to the first page (the rich one page app) but showing the specific shoe. -- And the page should implement the Google Ajax-crawling recommendations that you reference in the OP.
I would like to offer viewers a contact form that is modified according to the user's input. An example of such a form is on the Ext JS site.
I have not looked into the product, but I would like to know if there are any other programs/functions that generate such a form dynamically? I found only samples on adding other input elements to existing forms.
Here are some other implementations:
http://neyeon.com/p/jquery.dform/ (depends on jQuery)
http://neyric.github.com/inputex/ (depends on YUI)
http://robla.net/jsonwidget/
I also plan to add this functionality to my own js-forms library, which would also handle validation.
You can always create whatever DOM structure you like using JavaScript. Be it additional inputs or even additional FORM elements. It then depends of course what you use on the server side to process form data and how you do that.
Maybe I haven't understood the nature of your problem because you haven't explained yourself too good.
ExtJS is a JavaScript library that does everything on the client side. It also provides the ability to rapidly create user interface by providing Javascript configuration objects that will result in rich widget creation.
You can do lots with jQuery (and jQueryUI) as well, but it's up to you how to do it. ExtJS just has these very functionally rich and visually consistent set of client controls/widgets that you can use out of the box without much additional development (not to mention bug killing that comes along custom development).
For instance: When writing an Asp.net MVC application it's very easy to issue an Ajax call that would return HTML of so called partial view with complete HTML of your form that you can then easily display in a modal dialog for instance.
If you do need all that functionality to create a desktop-like application I suggest you do take a plunge into ExtJS because it is definitely a very good product. I've used it about 3 years ago (version 2) on some project and I was amazed by the work they've done with it. It's very feature rich product that makes it really easy to create desktop like web applications.
But if you're after a usual web site then a desktop-like experience is probably not what you should give to your visitors.