I'm about to create a web application that requires a lot of different web forms where the user needs to be able to input a lot of different types of information. What I mean is that one of those forms may require some text input fields, some integer input fields, some decimal input fields, some date input fields, some datetime input fields, etc.
I would like to have a, maybe JavaScript-based, control library that I can simple provide with some text labels, input types and default values. The control library would then somehow render the form in HTML without me having to create an HTML table, select the appropriate standard web controls and all that.
I have used dhtmlxGrid to create quite a lot of tables and that works well for me. What I need now is something that can help me in a similar way when creating something like card forms.
I have also found ActiveWidgets, but it looks like it will require a lot of work on my behalf. I'm not only looking for individual web controls, but rather something like a library that can help me with the overall card.
I'm guessing many of you have had this problem before. Looking forward to hearing what solutions you have found to be the best. BTW: I'm working in VisualStudio with ASP.NET.
I would be tempted to look at Ext JS for this.
Ext JS
have you had a look at InputEx
I know it doesn't answer the question, but I have always written my own, or rather written it once and tweaked it for other apps. When I store the questions in the DB I store what input type it is, then on the form I dynamically create the appropriate control depending on which input type the question needs and add that control to a dynamically created table cell as I go.
If you choose to do that just remember when processing the form that the controls don't exist on postback, you need to recreate them.
It is not too bad to write it, if you have the time. My current form module is running a few dozen forms from the one module.
Related
I am starting to build an app, using Meteor, that includes user-populated company profiles (including both financial data and text). I will be looking into a datafeed for public company information but much of the information for private companies will be user-populated.
I know I will need to create a form for the user to fill in so that the company information will be captured by the database. However, can I make this same form available to the user to both display the data and to allow them to edit the data in the future? Or do I need to build a separate view using tables for this purpose? My preference is the former, just one screen to create and edit as needed.
Any examples of similar instances would be very appreciated.
Thank you.
This is less of a meteor specific question, rather a general web technology question. Meteor can provide the data in the template of course, and it can offer events to process data and insert/update this to a database. This is the same as any underlying architecture. The question is really how to approach the problem with HTML & JavaScript.
A couple of potential methods:
Write your HTML to display the content in its non-editable form. Then provide an edit button to switch mode. When clicking this button switch on 'contenteditable' for the elements you wish to be edited: http://html5doctor.com/the-contenteditable-attribute/
Also reveal a save button, then process the event through meteor. Use selectors to extract the fields by referencing either designated class names, data attributes or name attributes. It would also be a good idea to alter the appearance of editable elements with a background or outline. The disadvantage here is that it's slightly non-standard and you may have the need for more complex data-types like dropdowns or checkboxes etc.
Create view with a standard form HTML. Style it in a way that shapes the information primarily for display rather than editing, eg. hide form field borders. Provide an edit button that when clicked alters the CSS and reveals form field borders, also reveal/replace elements which need more complex controls like dropdowns, perhaps turn on field labels too and of course a save button. The disadvantage is slightly more complex CSS and JavaScript.
I'm currently designing a rather complex InfoPath form for a client. In the future, the client is going to need to be able update the form themselves, but the complexity of dealing with all the rules and conditional formatting is too much for them.
Is there any way for me to automate a routine design task in InfoPath designer, such as adding a few new fields and linking them to controls on the form?
Ultimately, it would be nice if my client could just type something in a text box and hit a button, then all the predictable and tedious design work to update the form would be done automatically.
Thanks
Use template parts. They can be created in InfoPath and are used for repetitive tasks where the same controls, data fields, etc are used over multiple forms. I believe they even include data validation, rules, and formatting. It is basically like inserting a mini InfoPath form into another one as a section. The help file in IP explains the steps but no code is involved and it is fairly easy.
Can some one please tell me if I should use user controls in my project as much as I can? Ff so why and if not why not?
It's an interesting question; but think of it this way.
You've just written a table, listing all of your users. You show this on the List Users page of your website.
On the "Find User" page, you might want to be able to show a list of users. Do you rewrite the same HTML, code, javascript, CSS as before? Or do you reuse the control, this time adding the ability to filter by a user name or other attributes?
Essentially, user controls are there to package up reusable bits of your website. Rather than repeating the same code everywhere, you can package it up in a user control, and simply add it to any page you want just by adding the appropriate tag.
Also, you have just made ONE control in your project responsible for dealing with some functionality - all of the logic for it is in one place and separated from other code. This is an important concept too, as it stops all of your code being jumbled together. In the users example, you can interact with a list of users through an interface, rather than mixing it with other code that might do different things. This is called SRP and can be a good thing.
As a practical example, we have a control that shows a list of our products. We can reuse the same control on the Find screen, the Admin screen, the "Products Like this" screen, and on the "Products you have chosen" screen. This code contains a lot of logic that is all in one place so it can be maintained easily, and it can be reused very simply too.
User Controls can be a very good thing. So you should use them when you feel like you can package up a group of existing controls, HTML etc. It makes them reusable, and much easier to maintain.
There is also the concept of custom controls - these are usually reimplementations of existing controls - you might have an ExtendedTextBox, for example, that validates the text as someone types it.
You can read more about both kinds of controls here
User controls are good for the same reasons that subroutines/functions/methods are good: code (and markup) re-use.
Like subroutines, controls can be a problem if they do things like modify global state, make lots of DB or other off-box calls that aren't always needed, introduce unavoidable synchronous blocking, etc. They can also add an unnecessary layer of complexity if they are never re-used.
I would use the controls that the VS IDE Toolbox provides as much as possible. I would only roll my own control if something that the environment supplied, didn't quite do what I wanted it to do.
I am creating a form that needs to have 30 or more fields either disabled or set to be read only. They need to be marked as such if the based on the value of a drop-down box.
This is something that I can do using conditional formating that I know, what I want to know is there a way to either add conditional formatting to multiple controls at once or a rule that I can set that will accomplish the same thing?
One requirement is that I can't use programming code to do this. I realize it would probably be far easier to do that way but that is a requirement given to me by my manager.
EDIT: Forgot to add this there are fields that still need to be edited when the other fields are read only.
One feature in InfoPath 2010 (can't remember if it was in 2007) that reduces the pain of this sort of repetitive work is the ability to copy-and-paste rules. With this you can create your read-only rule once and then just paste it onto each of the 30 controls that need it.
You could put it all in a section but your only option for sections is hide/show (not disable or read only). Otherwise you have to setup all the fields against that one dropdown. Huge pain but at least you only have to do it once.
An alternative, which is just about as much work, is to setup two views. One that is readonly and one that is normal. When the user changes the dropdown just flip the view. This method has a bunch of display nuances but does work.
I am working on a multilingual web application. I'm wondering how do i design the best user interface that the user can localize data for various languages? for instance, in making a page which its title is different in every lang, do i put a textbox for every one? it's not a suitable way to do(in case of 10 lang, the user has 10 textbox!!! too silly)
what is your idea about this?
Edit: i have no problem with globalization in my system. in fact, i'm looking for a good way for my interface design which user can enter his data to my forms in various langs.
thanks in advance
What about only one textfield and a dropdown containing the languages. After selecting the language and filling out the textfield the field gets submitted and the chosen language disappears from the dropdown list.
the entered value and language then appears beneath the dropdown and textbox with a way to edit/delete it. this way it's always clear to the user which languages are already covered and which values are assigned to them. furthermore it's a nicer way if not all 10 languages have to be mandatorily filled in, if the user e.g. just knows english and french.
Hope you know what I mean, otherwise I'll have to create an example screenshot :-)
You could have 3 text boxes, and that's fine...get to 10, and it starts getting a bit crazy. Beyond that it starts looking pretty bad.
Maybe you could put up to say 5 text boxes up...but if it goes beyond 5 (because the user desires localization for more than 5 places) it places a single textbox with a dropdown next to it, and the dropdown would contain the current language.
Textbox would auto-populate with the current value for the language selected in the dropdown. Should work well in asp.net, and it can be done both client side, or server side on a post back pretty easily, so you don't need to do anything crazy for people not running javascript.
You have one text box.
On load you populate the text box depending on language.
The content will be populated from some kind of resource file. If there isn't much text it could even go in your config file.
Be aware of the following:
Different content length depending on language.
Right to Left alphabets screwing up your alignment
This is a classic project for using NUNIT or similar to promve that things work after new translations are added!
What language do you use in development? If this is something like PHP, then you definitely should use templates and load text strings into them from configuration files for every language. In Smarty, for example, I use configuration files for that.
Text strings for error messages or something like that could be put to files like .ini and loaded from there.
The Google Web Toolkit (GWT) demo shows the same page with versions available in English, French, Arabic and Chinese.
The GWT docs have a thorough discussion of internationalization. You could emulate their implementation.
Constants: Useful for localizing typed constant values
Messages: Useful for localizing messages requiring arguments
ConstantsWithLookup: Like Constants but with extra lookup flexibility for highly data-driven applications
Dictionary: Useful when adding a GWT module to existing localized web pages
Remember that dates and times are represented differently in different locales, if your forms use them.
The W3C also discusses Internationalization Best Practices in HTML content.
Normally, a user navigating a website will have a preference specifying the language of the whole site. I think it would be confusing to break this pattern.
So, in an intro page, or a user preferences page, allow the user to select a language; then, on the other pages, display a consistent set of controls to be able to edit the content on each page.
Are you making an administration page that allows users to change the text used in other pages in the application?
If so, you could use grid like in Zeta Resource Editor:
thumbnail http://img202.imageshack.us/img202/7813/zetaresourceeditor02.th.png
Or you could make a per-language list like in nopCommerce:
thumbnail http://img249.imageshack.us/img249/9079/nopcommerce.th.png
You can use javascipts as a resource file for your language like. language_arabic.js, language_english.js,etc.So when a use wants to see his preference language he/she has select the available languages from drop down list. Regarding this the user has to change the language settings from his/her computer. This is what I did while I was working a GIS project to customize a Geocortex IMF( http://demos.geocortex.net/imf-5.2.2/sites/demo_geocortex/jsp/launch.jsp ) site for an Arabic client.