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.
Related
I'm looking to find a way to show an image in some various 2sxc drop-down controls. The image would help visualize some style guides. The most obvious example would be where we have a drop-down that gives the user the ability to select a few different heading styles. Variances in heading styles are often much more complex than h1,h2,h3,h4 (also some projects could have upwards of 15 heading styles) and if we could give the end-user a visual representation of how each drop-down might alter the view, I think this would go a long ways to help end users managing content.
This gets a little complex because while something like content types and views already have an image thumbnail, in a more dynamic content type with more flexible data entities, the end result could vary significantly.
I think drop-downs are the most common use case for a image representation because drop-downs or bools often have the largest change in final view code.
I don't think there is currently a way to do something like that unless you want to build your own custom input controls (which I do think is possible). A useful alternative is the Notes field for your Content-Type field. This is WYSIWYG and as of v10+, is also visible in the content editor's UI. So you can include a separate reference page link right there. We do this all the time lately. For example, we often use Bootstrap Buttons and Alerts and most sites have these in customized colors, so we include a link to a page (opens in new window/tab) that shows them what the various choices will look like.
Note that in 2sxc 9 and 10 you can create custom input types. It's fairly difficult in V9 and V10 will have a different API (because it's using WebComponents now). It's still not final and not documented, but that would be an option. If it's really urgent you can contact us through 2sxc.org
I have a checkout page on my site which lists items that customer is purchasing... and below the basic list is a "Detailed Invoice" section where they can see specific info on each. Up 'til now I only had two different types of items that could be purchased, so the detailed listing was fairly easy to handle. Now I'm adding four additional and completely different things that are purchasable... so the question: What is a good way of handling this sort of rendering using Sitecore sublayouts? (Currently, I just use a Repeater and hide/show appropriate fields)
The good news is, for each line item in an order there is an associated Sitecore Item instance. If the Sitecore API was better suited to object-oriented methodology, I might create a Render() method on each of my object types in question. But of course they are each Sitecore.Data.Items.Item objects. Subclass Item? This seems like overkill for just this task...
Something I've considered is a Sublayout/user control for each different item type... and then dynamically add them to a Placeholder on the invoice page. This seems reasonable... Thoughts? The downside is then the ugly code that has to match up the user control with the item... based on TemplateID maybe?
Anyway, just looking for some suggestions here.
Building classes to represent Sitecore data is not an unreasonable idea. This is a perfect scenario to to do it. Whenever I build project I always have classes generated using the Custom Item Generator in case I need template-specific field access. I also do everything as sublayouts so I can see your dilemma.
Are all/most of the fields unique to each product? You don't have a generic product template that each product instance uses?
These are the options I can think of myself (worst to best IMO):
Create a class to represent each unique template. The Custom Item Generator may work, but it may confuse you the first time. You can always make your own classes where you pass the Sitecore item into the constructor and create properties to access fields. Then use regular .NET controls and bind data to the front-end based on which template your item uses and using the strongly-type class for the template. This will likely be messy code of many if-else's.
Create a unique sublayout for each unique template in Sitecore. In your repeater that loops over the items, based on which template the item is, add the right sublayout to the placeholder using new Sublayout() and set the DataSource as the Sitecore item (here's code to access the DataSource). That way you abstract the implementation to each unique template.
Create classes for each template as mentioned in #1, but abstract across them all with an interface. In your repeater's ItemDataBound, implement data via the interface. This highly depends on how the fields compare and contrast from template to template. If you can force yourself to reduce the unique fields into the interface's members then each class that represents a template can just implement your interface. This allows for the future addition of more unique templates, as long as you continue to implement the interface.
This to me seems like a good place to use the "Presentation Inversion of Control" Sitecore pattern (as named by Aware Web).
http://www.awareweb.com/AwareBlog/Presentation%20Inversion%20of%20Control%20part%202.aspx
Though the blog post discusses this more in a context of user-placed items, it works here too. If you have a template for each product type, you could define presentation details on each (perhaps in a separate Device) that define the control which can render that item in the cart. Then you can read the RenderingReference's off the item, and place them into the page. This makes for a flexible, extensible system that allows you to handle different output for different types of products.
This is close to the solution you describe (Sublayout for each product type), but allows the sublayout to be data driven instead of conditional logic for each TemplateID. (Note you will need to assign a dummy "main layout" in the presentation details as well.)
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'm new to QT, and am trying to figure out the best means of creating a WYSIWYG editor widget for a custom markup language that displays simple text, images, and links. I need to be able to propagate changes from the WYSIWYG editor to the custom markup representation.
As a concrete example of the problem domain, imagine that the custom markup might have a "player" tag which contains a player name and a team name. The markup could look like this:
Last week, <player id="1234"><name>Aaron Rodgers</name><team>Packers</team></player> threw a pass.
This text would display in the editor as:
Last week, Aaron Rodgers of the Packers threw a pass.
The player name and the team name would be editable directly within the editor in standard WYSIWYG fashion, so that my users do not have to learn any markup. Also, when the player name is moused-over, a details pop-up will appear about that player, and similarly for the team.
With that long introduction, I'm trying to figure out where to start with QT. It seems that the most logical option would be the Rich Text API using a QTextDocument. This approach seems less than ideal given the limitations of a QTextDocument:
I can't figure out how to capture navigation events from clicking on links.
Following links on click seems to only be enabled when the QTextEdit is readonly.
Custom objects that implement QTextObjectInterface are ignored in copy-and-paste operations
Any HTML-based markup that is passed to it as Rich Text is retranslated into a series of span tags and lots of other junk, making it extremely difficult to propagate changes from the editor back to the original custom markup.
A second option appears to be QWebKit, which allows for live editing of HTML5 markup, so I could specify a two-way translation between the custom markup and HTML5. I'm not clear on how one would propagate changes from the editor back to the original markup in real-time without re-translating the entire document on every text change. The QWebKit solutions looks like awfully bulky to me (Learning WebKit along with QT) to what should be a relatively simple problem.
I have also considered implementing the WYSIWYG with a custom class using native QT containers, labels, images, and other widgets manually. This seems like the most flexible approach, and the one most likely not to run into unresolvable problems. However, I'm pretty sure that implementing all the details of a normal text editor (selecting text, font changes, cut-and-paste support, undo/redo, dragging of objects, cursor placement, etc.) will be incredibly time consuming.
So, finally, my question: are there any QT gurus out there with some advice on where to start with this sort of project?
BTW, I am using QT because the application is a desktop application that needs platform independence.
Given that I got no advice here, I decided to go with the QTextEdit approach, although I'm actually using a QTextBrowser that is set to be editable so that I can capture link navigation events. I will be using QTextCharFormat's with the link names set to unique identifiers in order to convert from the QTextEdit back to the custom markup. The QTextEdit supports images already, so I won't have to deal with those.
I think I will hit the biggest roadblocks with the fact that I need to be able to insert/grow/shrink tables whose cells can have Excel-style functionality. I have not yet figured that whole process out.
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.