I created a Sitefinity widget in MVC (2 views, a controller, and a model) and it works as expected.
Except for the edit menu after I drag the widget into the page. All of my fields in the edit view are text inputs, and I'm not sure how to affect this.
One of my fields should be a dropdown with values from an Enum - this enum lists the names of both of my views, and is used by the controller to pick which one I want to render. When I open the edit view for the widget, it defaults to the first value in my enum and everything renders properly, but I'd like this to be a dropdown instead of a text input requiring magic string knowledge on the user's part.
Another of my fields chooses a page to link to, which is used in the action attribute of a form inside my widget. This again works, but is simply a string text field, where I would like to use the built-in Sitefinity page selector many of the "native" widgets use, if possible.
So the short version is: Where/How do I affect what type of input shows up in the "edit" view of a widget once it's added to a page?
In terms of Sitefinity, the view, when you editing widget settings is "Widget designer".
Official documentation if you using Feather: https://docs.sitefinity.com/feather-create-custom-designer-views
Documentation for non-Feather users: https://docs.sitefinity.com/for-developers-create-a-simple-widget-designer
Simple example in your case if you want to use dropdown instead of input:
Create DesignerView.Simple.cshtml in your View/<ControllerName> folder
Add into this file: <select sf-model="properties.Content.PropertyValue"><option>abc</option><option>xyz</option></select> where Content is your property name
And it will render dropdown if you will edit this widget in backend.
Links:
List of available components for widget designer: https://docs.sitefinity.com/feather-client-components
Source code of built-in widgets: https://github.com/Sitefinity/feather-widgets It might help you if you want to know how this widgets built
Related
I have a web page with multiple separate tabs, all exist in DOM, switching between them is entirely client-side. Each tab contains an ajax form for editing data of a selected app user. For eg. first tab lets you edit name, surname, ..., second tab lets you edit address. Each tab has a save button and each time only properties of current tab are propagated to the DB. All works well :)
BUT, of course, each tab needs PK of the user (user.Id) in question. Its passed to controller via a hidden field
<input type="hidden" asp-for="Id" />, so HTML DOM contains more than one element with the same id and browsers complain.
I know that I could manually set the name/id of these input fields, and manually map them on the controller side, but model binder could do this for me, its nice and clean.
public async Task<IActionResult> EditGeneralData([Bind(GeneralDataBindFieldNames)]AppUser appUser)
Is there a nice & simple way to achieve this? Should I simply forget about the browser warning as I will be careful when/if using getElementById? Whats your take on this?
Yeah... not really the answer I was looking for, but it should suffice. It turns up that the content of these tabs is related to one another. So all the tabs cannot exist in the DOM at the same time, and switching between them cannot be entirely client side.
Now, tab click loads tab content on demand, so theres no multiple input fields in the DOM anymore. Only one tab at a time means only one input field at a time :)
The thing my employer asked for is a razor search form for items that has optional filters that show per filter value how many items there are. For example, filter option "fruits" has option "oranges" and behind "oranges" you can see the amount of oranges. Every time a filter value is chosen, the entire content must change and the number of items behind every filter value must change because the number of items that have that value and the value of the applied filter will be less. Per filter, it must be possible to pick several values. The data has to be gained from an ASP.NET API which I also have to make. It may not be directly from the database because we want to use this API functionality for other applications as well.
An example of what I mean can be seen on this website.
All of this has to be made in ASP.NET and with an ASP.NET API.
Let me know if any clarification is needed. Thanks in advance.
Break out the dynamic content in a partial view. And create an action method on the server that takes filter parameters as input and then returns the partial view with the results. On page load use AJAX to pass the selected filter parameters and load the resulting content as a partial view. ON change of filter call the AJAX method again. Whatever HTML content is returned by the partial view, place it on the page.
I was wondering if it is possible to modify a view HTML before sending it to the browser.
I wanted to create a custom tag compiler where i can insert a simple tag as <my-parsing-tag></my-parsing-tag> on the view and replace it for some specific HTML.
I'm already using OnActionExecuting and OnActionExecuted filters to execute some actions on the context (Change ViewBags, View names, Sessions, etc.), i also tried to do it there but i couldn't find the correct place to get the HTML, well i don't even know if it's possible to do so.
Is it possible or i would need to store my views HTML on the database to accomplish what i need ?
EDIT
As #Juan asked, why i need it:
I'm working with a call to action system where the user can place some specific modal campaigns on the page he wants just using those simple tags or selecting the page that will display it.
After that i will append the selected HTML to the view before sending it to the user. This system is intended for users that can't work editing the views since they don't work with HTML.
EDIT 2
After some research i have tried to implement a custom RazorView, the code is here with the Index View HTML, but now i have two problems:
The first one is that my Index View has some HTML that is coming from the database and is placed there using vars on my ViewModel and instead of the call to action HTML being placed at the end of my Index View, it's being placed before the ViewModel vars. The second problem is that the HTML is being duplicated instead of replaced. Here is an image of how the result looks like:
http://imgur.com/a/elul1
You could use an HtmlHelper extension for this:
http://tech.trailmax.info/2012/08/creating-custom-html-helper-in-mvc3/
I would suggest the following:
Define a container in your template (layout most likely) that will receive any content the user decides to "drop" into it via the admin panel.
You let the view know there is something to display via the ViewBag.
The view uses information you passed in order to render the desired content.
How it renders is where the HTMLHelper extensions come in. You could create an extension method which renders partial views based on the information you pass to it or maybe a set of extension methods that you call selectively based on the desired widget.
I have looked around the internet for a solution to this and just cant seem to find anything that will help.
#foreach (Sitecore.Data.Items.Item child in Html.Sitecore().CurrentItem.Children)
{
#Html.Sitecore().ItemRendering(child)
}
This is the code pointing to a view rendering which in turn outputs very basic details.
<h3>#Html.Sitecore().Field("Question")</h3>
<div>
#Html.Sitecore().Field("Comment")
</div>
I have gotten this to Render correctly and can edit each part individually "Question" or "Comment" text, but I am looking to add a way to delete the entire item from the original page using the page editor.
I tried adding the "delete" button to the rendering but it did not show up.
Any help would be appreciated greatly!
When you have a listing of sitecore items and you need to remove an item from a list in the Page Editor then edit frames can be useful.
This example here shows how you can add an interface to remove an item from a multilist which will then affect the rendering of items.
https://briancaos.wordpress.com/2011/11/28/using-sitecore-editframe-in-pageedit/
To get edit frames working with mvc:
https://visionsincode.wordpress.com/2015/01/08/how-to-use-editframe-in-sitecore-mvc/
What your are doing is outputting markup iteratively using an HTML helper provided by Sitecore which is not the same as outputting the layout definition for the item that allows the page editor to inject the appropriate chromes for managing the presentation of an item.
It's similar to creating a search results listing and expecting the page editor to allow the user to remove an item from the listing using page editor which is not possible as it is dynamically generated markup and not a set of renderings stored as presentation for the item.
I have a master page where in I have menu list items are :- Add Staff, Add Venue,Add Time Sheet , Setting , Invoicing. Sub Menu Items of Settings are :- General Settings , Users , Roles , Sub-Contractors. my concern is When I click on General Setting , Users my entire page gets post back. I do not want this to happen. Instead I want only the content that needs to be refreshed/change.and my second concern is :- all Sub-Menu items of settings shown on all setting page as i go from General Setting to Users how is it happen.
Any quick / easy solution to the above issue?
Please help.
You have two choices:
Use ASP.NET tags to use Ajax to change the tabs asynchronously.
(Better) Use a javascript framework like JQuery or Dojo to create the effect in javascript. (Note that Microsoft is including JQuery in newer web templates)