I'm looking for a way to create a reusable HTML widget for a website run on Sitecore 8. My original idea was to create a data template that basically consisted of a single Rich Textbox. The idea is that you could drop any number of instances of these widgets on a placeholder and it would render out the HTML from each instance of the widget on the page and in the correct placeholder.
Example:
A content item called /products/my-product is based off of "Product" data template
It consists of some fields on the Product template (maybe product name, price)
I'd like the ability for the content editor to quickly drop one or more instances of the HTML widget on the page (say, in the right rail or in a different placeholder on the sublayout. I know I could just throw a "notes" field on the product template, but I'd like to make it more dynamic so that they can add several instances of this HTML widget and place them anywhere they desire.
I quickly realized that because we need the ability for multiple instances of this widget, a data template was not enough because each instance of the widget would needs its own data to populate on the front. Thus, my idea was to allow the content editor to add HTML widgets as a child of the current item (so each item would have its own instance data). I don't think this will work because I don't know of a way to have these children tell the parent page which placeholder to put them in, so laying them out is a problem.
I also thought about somehow setting the placeholder name as a parameter or field on the data template for the HTML widget, but I couldn't figure out how to get Sitecore to dynamically add them to a placeholder when it glues everything together.
Is there a way to achieve what I'm trying to do? Seems like a reusable HTML (or other kind of widget, for that matter) would be a fairly common need. I feel like there's an easy Sitecore way to handle this that I'm missing and overcomplicating the solution.
From what I understand, you're looking for Datasource field of a component.
Basically you:
Create a data template which contains fields necessary for your component
Create a set of items using that templates
Allow authors to select one of them as the Datasource for your component.
It's built in Sitecore functionality.
Check blog post http://firebreaksice.com/using-the-datasource-field-with-sitecore-sublayouts/ or google for Sitecore datasource.
Other links:
http://www.nonlinearcreations.com/Digital/how-we-think/articles/2014/03/4-patterns-Sitecore-component-development.aspx
http://www.nonlinearcreations.com/Digital/how-we-think/articles/2015/04/Sitecore-templates.aspx
EDIT:
Read about Datasource Location field (defining the repository of datasources location) here: http://www.sitecore.net/learn/blogs/technical-blogs/getting-to-know-sitecore/posts/2011/01/handling-presentation-component-settings.aspx
Read about Datasources and MVC here: http://jockstothecore.com/sitecore-mvc-item-maze/
Related
Consider the given scenario.
I have a class with properties that has all the necessary information regarding a page design. For example I know the line spacings, page number format, text to be displayed, text stye and margin etc.
I want to visualize the exact same page and display it on my Angular SPA. I also want to be able to edit the page layout using text editing tools (just like we have in ant text editing software). For example changing the text color, margins, text size etc and reflect it back to original class instance (two way binding to original object to be precise).
I want to know, Do we have any tool or package that serves the given purpose. If not how we can achieve this requirement in a simple yet effective manner.
Maybe you want to create your class as a component let us say contentComponent in which your class is attached to an HTML file , the HTML file should rely only on data binding and class binding to show content and set the layout of the page , in the other hand create another component editComponent that will get access to contentComponentclass properties through a service to set and change its properties and hence reflecting on the contentComponent view .
I am currently using the Views and Display Suite modules to create a page that works as an image gallery. You click on the menu button to take you to a page (the view) that has multiple links to nodes (individual galleries).
When you click these nodes, they take you into the separate page and show all images uploaded using the "event" content type that I made.
The event content type has one field (type: image) that uses a multiupload widget, allowing for multiple file uploads.
However, the images on the node are displayed within divs, so they all have their own rows basically. I would like to know if it was possible to put them all into grids, and if so; how? I tried using display suite, but I only have that one field to work with.
If you want to get a fully customized page and arrange the fields just like you want, use the theme suggestions.
For a node of type "event", as you said, it would be node--event.tpl.php. You can duplicate the code inside the base template node.tpl.php of your parent theme (or if you don't have one, of Bartik for example) to have a good starting material.
Just rearrange the div, the tags, the variables as your convenience, add some custom CSS to make your grid, and you should be done!
I hope it helps.
I am working on an MVC 5 razor page (using Entity Framework 6) that will display Vendor information. Each vendor can have multiple classes, and each class can have multiple subclasses. What I want to do is display the vendor information at the top, show the list of classes below that info, and then have a third section with a list of subclasses for the selected class. My question is what is the best way to do this?
Currently I am trying to do it with the main page getting passed a model of type vendor, and then within that page, displaying two partial views via #Html.Action("ActionName", "ControllerName", value). I can pass the class list partial view the ID of the vendor when the page loads without issue, the real problem is figuring out how to pass the selected ID of a class to the partial view for subclass. I've tried using hidden fields, but I'm not sure how to pass the html.Action the value of the hidden field.
This is my first MVC application, so any help is much appreciated.
First off, you are saying that you are using partial views with #Html.Action() helper - this is not for a partial view, but rather to produce a link to navigate to another page...That being said, I think I know what you want to do.
Second off, you need to post more code to show you made an attempt - stack overflow is not a source of free development consulting work. I think I know what you are trying to do, but even posting some sort of UI mockup might make a general discussion easier. That being said, I won't give you any code in the answer, just a general idea of how I would approach the problem.
To start, you should have a dedicated controller for Vendor, VendorClasses, and whatever the third subclass is (I'm going to assume its called VendorSubClass for the sake of example) since you chose the MVC pattern.
Next comes the part about displaying all of the information on a single page. The only place I could potentially see it making sense to show all of that info is on the views for VendorSubClass (however only VendorSubClass properties should be editable here) and even then, it might just make sense to have really informative breadcrumbs instead.
You would need to pass an object to the view that contained the VendorSubClass, its parent VendorClass, and its grandparent Vendor information. If you're using entity framework, this is a snap (but you didn't say you were so I'm making my explanation more generic). Then, you can reference partial views by using the helpers:
#Html.Partial('VendorPartial', Model.Vendor)
#Html.Partial('VendorClassPartial', Model.VendorClass)
as you can see above, I am not passing IDs - but rather the actual properties(objects) themselves which the partial views will use to render the details. This overview should get you started and give you some stuff to google.
So no SQL tables or anything here. Basically, I have 3 pages that have 6 items each. Each item consists of an image and then some text and also a smaller image than changes from a check to an "x" depending on if user selects or not. So if the image is checked, the user is adding that to a list which would display on a fourth page. This data needs to persist through just a session and if the session times out, then it resets. If the list is complete and on that fourth page the user choices to email or share list via social sharing, then the data would be gone after that action. What I am trying to figure out is the best way to approach and implement this with minimal time and effort as it has to go out quickly. Can any of you explain and maybe point to some links with info on the best way to achieve?
This is being done in asp.net web forms with html, css, and javascript.
Much appreciated!
You can use ViewBag() (for view in razor) or ViewData[] (for page in .net) to hold data for one web page.when you want it to other page. You can pass it to other page.
check this out
ViewBag, ViewData and TempData
I have a basic ASP.Net MVC 3 application which has a number of controllers and a number of actions (and subsequently views)
A common feature of the application is to show a pop-up dialog window for basic user input. One of the key features of this dialog process is a faded mask that gets shown behind the dialog box.
Each of these dialog window controls is in a separate Partial View page.
Now, some view pages may use multiple dialog boxes, and therefore include multiple partial views in them - which as is would mean multiple instances of the "mask" element.
What I am trying to find a solution for is to only need to create one instance of a "mask" element regardless of the number of dialog partial views I include, and then the script in each partial dialog will have access to this element (so basically it just needs to be on the page somewhere)
The only real idea I have come up with so far is to add the "mask" element to the master page (or in the original view page) and this will mean it only gets added once. The problem here is that it will be added even when it is not needed (albeit one small single element)
I can live with this, but I would like to know if there is a better way to handle these kinds of scenarios?
A quick idea that came to mind is some kind of master page inheritance hierarchy, So I may have a DialogMasterPage that inherits from the standard current master page. How does that sound for an approach?
Thanks
To do something like this, where each module can register their need for a certain thing in the master page, you can use HttpContext to store a flag of whether you need to write the mask div, and just set that property in each partial. At the end of the master page, if the flag is set, you can then write the mask div if its set to true.
Obviously to make this cleaner you could wrap it all in an HtmlHelper extension or something.
My initial thought is for you to use something like jQuery UI where it handles the masking for you or if you are using something custom you can load the content for the dialog via ajax then show it in the single dialog on the master page.