This time I'm struggling with my custom widget for Orchard.
It's a simple content part with two fields:
- Background Color
- Size
I want to be able to add HTML content to this widget; so I added the Body Part. This part must be displayed within my widget. The result should be something like this:
<div class="size-small bg-color-red"> BODY PART HTML CONTENT </div>
But unfortunately, the Body Part is always displayed before or after my widget.
<Placement>
<Place Parts_ContentTile="Content"/>
<Place Parts_ContentTile_Edit="Content:7.5"/>
</Placement>
Not so nice 'solution':
A way to resolve this is to remove the body part and replace it with a simple text field. This text field is rendered at the desired position. But then the TinyMCE Editor is not available.
Update after comment from Ivan:
I tried to change both (Content Type and Content Part (separate)) but unfortunately, both times, the TextField content is displayed after the widget. Should that be fixed in the Placement.info?
Another option is to add a String field to my Widget Model. But then it is not possible to show the TinyMCE editor. Am I right?
So I've got the feeling that my expectations about widgets, content parts and placements are incorrect. Hopefully somebody here can point me in the right direction.
When using TextField, you can use TinyMCE by specifying HTML flavor in the settings of the field.
To do that you can go to Content → (Content Types or Content Parts depending on which you are trying to change) → Select your ContentType or ContentPart → Expand the definition of the TextField you're using → Select HTML from the drop down menu next to Flavor → Click on Save button.
This post on SO from Mark Z was really helpfull to me!
I added a String property to my Model and added a new Database Migration:
public int UpdateFrom3()
{
// Adds a new Content column
SchemaBuilder.AlterTable("ContentTileRecord", table => table.AddColumn("Content", DbType.String));
return 4;
}
After that I added the field to the Editor Part View:
#Script.Require("OrchardTinyMce")
<div class="editor-label">
#Html.LabelFor(model => model.Content)
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Content, new { #class = "html tinymce" })
</div>
The Content Property is now displayed as a TextArea. Because of the classes 'html and tinymce' the TinyMCE editor is instantiated. (Don't forget the Script.Require call)
Because of the fact that the Content property contains HTML, it is required to use the #Html.Raw helper to display the value of this property.
#Html.Raw(Model.Content)
Related
I setup a custom content definition, query and projection inside Orchard (1.8) and just about everything with it works great, including overriding the display view on the projection page's URL. The only issue I'm running into is when I put that same projection in a widget, I can't seem to figure out how to override the view for it. The automatically generated HTML is this:
<p class="text-field"><span class="name">Name:</span> <span class="value">/** Title from content item **/</span></p>
<p>more</p>
<p>asdfasdfasdrerfwerqaq324f421 more</p>
<p class="date-time-field date-time-field-date">
<span class="name">Date:</span>
<span class="value">/** Date from content item **/ </span>
</p>
I've tried using the Shape tracer to create an alternate view, but even when I only have #Display(Model.Content) in the new view, it still puts all of that extra stuff in it which is more than I need to show on this view. The shape tracer says the active template is my new one with only that value in it, so I'm not sure where all the extra HTML is coming from here (though it does show on the HTML tab of the Shape tracer).
How can I override the view for this widget?
If the extra HTML is only appearing when you post the projection as a widget it is probably due to wrapper tags added through code or through the widget wrapper template. Try either of these methods:
Check Widget.Wrapper.cshtml to see if that view template contain the extra HTML. I don't remember if this shape shows up in the shape tracer, it might show up under the wrappers section.
You can also try the trick below - this can remove unwanted markup in some cases, I use it for the menu navigation widget. It removes any wrappers that were added through code. Make your widget template look like this:
#Display(Model.Content)
#{
Model.Metadata.Wrappers.Clear();
}
I'm using asp.net mvc with ext.net and I'm trying to create a set of tabs that load information only when they are selected by the user.
I can manage to load a partial view into a tab/panel using the ContentFromAction functions:
But I can't figure out how to populate a tab/panel only when a tab is selected.
I've based my project on the Ext.NET MVC Examples Explorer version 2.5 code base and this code on the TabPanel > Basic > Ajax Load example found here
I've cut down the example as far as I can to reproduce the problem:
In my view I create the tab and configure the loader (exactly the same as the example project):
Index.cshtml
X.Panel()
.ID("Tab3")
.Title("Ajax Tab")
.BodyPadding(6)
.AutoScroll(true)
.Loader(X.ComponentLoader()
.Url(Url.Action("Ajax"))
.LoadMask(m => m.ShowMask = true)
.Params(new Parameter("containerId", "Tab3"))
.Mode(LoadMode.Html)
)
It correctly calls into my controller (exactly the same as the example project):
Axax_LoadController.cs
using System.Web.Mvc;
namespace Ext.Net.MVC.Examples.Areas.TabPanel_Basic.Controllers
{
public class Ajax_LoadController : Controller
{
public ActionResult Ajax(string containerId)
{
return View("Ajax");
}
}
}
Which in turn displays the appropriate view in the tab after it's been clicked on:
Ajax.cshtml (this works)
#using Ext.Net.MVC
<div>
<p>I am content loaded via Ajax when the tab is selected</p>
</div>
The problem begins if I try to add controls in my view, as follows:
Ajax.cshtml
#using Ext.Net.MVC
#{ var X = Html.X(); }
<div>
<p>I am content loaded via Ajax when the tab is selected</p>
#X.TextField().Text("I am a text field")
</div>
This fails with the exception:
ItemTag validation (_tkn_1): Reference token (init_script) was not found.
If I modify the file Ext call to return Html as follows:
Ajax.cshtml
#using Ext.Net.MVC
#{ var X = Html.X(); }
<div>
<p>I am content loaded via Ajax when the tab is selected</p>
#X.TextField().Text("I am a text field").ToHtmlString()
</div>
It correctly renders the following text in my selected tab:
I am content loaded via Ajax when the tab is selected
<#:item ref="init_script" index="0">Ext.create("Ext.form.field.Text",{renderTo:"App.id534c5fe0f159f3fb_Container",value:"I am a text field"});</#:item><div id="App.id534c5fe0f159f3fb_Container"></div>
I believe that the ext.net code is written by #geoffrey.mcgill on stack overflow so I'm hoping he can help rescue me.
You need to use a PartialViewResult. Please look at these examples.
Partial Content
Partial Items
Personally, I would recommend to follow the Partial Items example. You always can wrap any non-Ext.NET content in an Ext.NET Container. The benefit of this approach is the fact that you don't need to worry about destroying Ext.NET components if you reload the content. Though, anyway, I would recommend to set up explicit IDs for Ext.NET components in a partial view. At least, for top level components.
Is there a way how to adjust HTML generated by xPage from document rich text field? I have q document from which the rich text field content is displayed on xPage using computed text control. Solution works nice except, that xPages engine generates strange HTML from the rich text field. When displaying page on web using standard form, all texts written by default font and default size doesn't contain markup arround so on could use CSS to style it. Not this way in xPages. Everything have tag around and its not funny seeing generated font tag around the div tag :-(
<div class="tcl-columns3-in">
<font size="2" face="sans-serif"></font>
<font size="2" face="sans-serif">
<b>Header text ...</b>
</font>
<font size="2" face="sans-serif">
<div class="tcl-box-outlined">
text ...<br>
</div>
</font>
</div>
Is there a way how to get rid of out of generated HTML?. I looked to html filtering option with ASF filter but it requires to adjust settings on filesystem, which not option for me ...
There are a number of steps you narrow down your problem. RichText -> MIME -> RichText is not a problem free relationship. As Carl pointed out, you can have a look at the raw RichText -> Mime conversion result. Does that look OK? Then you could use a Dijit ContentPane to pull that content in.
It also depends on what control you use to display the content. You might have different success with textbox and RichText editor. If you look for very high fidelity you either store your RT as mime (a property of a RT field) or use Coex Edit a commercial server plug-in
use a computedField in your Xapge, and set the value to something like this
var rt = document1.getDocument().getFirstItem("Body");
return rt.getUnformattedText()
using this technique you can also format the content the way you like as it is all text. I use this to display colored and formatted json and xml
I have encountered an issue when using Orchard that I am sure there should be a fairly simple fix / solution for, but I have yet to find it.
I am trying to establish a specific width content area for my home page (580px), and a larger width for content pages (800px).
Layout.cshtml Snippet:
<div id='content'>
#Zone(Model.Content)
</div>
Style:
#Content
{
[...]
width: 580px;
}
Currently - the Content div wraps all of my content regardless of the page (either Home Page or Content). I am wondering if it is possible to use a different div to wrap the content based on the Page, as shown:
Layout.cshtml Idea:
#if(Model.Page != "Home")
{
<div id='fullcontent'>
#Zone(Model.Content)
</div>
}
else
{
<div id='content'>
#Zone(Model.Content)
</div>
}
I'm unsure if the above suggested method is possible (or I am unsure how to check for the current Page) - but any other suggestions would be appreciated.
You can use the Designer Tools module (built-in all recent Orchard versions) and enable the URL alternates feature. You'll then be able to create a layout-url-homepage.cshtml alternate for your layout.
You can use the Layout Selector Module to assign a custom layout to any content item.
http://gallery.orchardproject.net/List/Modules/Orchard.Module.Orchard.DesignerTools
You could use the Vandelay.Classy module to add custom tags to the page that represents your homepage, although it does add a lot of fields to the Page content editor.
I'm developing a SharePoint publishing site and setting up its content types and page layouts. I need to display the value for a Year field with type Number. The markup currently is:
<SharePointWebControls:NumberField FieldName="Year" runat="server" id="Year" />
The problem with the default behaviour is that it shows each number with a comma, e.g. "2,009" instead of "2009". Is there a way I can set some sort of String.Format syntax on the field to make it display correctly?
I tried creating a new rendering template which looks like this:
<SharePoint:RenderingTemplate ID="YearNumberField" runat="server">
<Template>
<SharePoint:FormField ID="TextField" runat="server"/>
</Template>
</SharePoint:RenderingTemplate>
... but there doesn't appear to be any 'Format' property on the FormField object.
Thanks for any help.
Update:
I tried wrapping the SharePoint:FormField tag inside SharePoint:FormattedString. Unfortunately the field was not formatted, same results as this question.
The issue is that the rendering template must use FormField. This always renders the value in the format: 1,989 . To resolve this the rendered text needs to be trapped and altered to get the desired output. Here are two approaches to resolving this:
1. Write a custom control inherited from NumberField
The RenderFieldForDisplay and RenderFieldForInput methods can be overridden to provide the desired output. Additional properties can be added to the control to describe additional behaviour.
Pros: No changes to rendering templates required.
2. Write a custom control for use in the rendering template
A control that (for example) uses regular expressions to alter text can wrap around the FormField control.
<SharePoint:RenderingTemplate ID="YearField" runat="server">
<Template>
<RX:RegexManipulatorControl runat="server"
Mode="Replace"
Expression=","
Replacement="">
<SharePoint:FormField runat="server"/>
</RX:RegexManipulatorControl>
</Template>
</SharePoint:RenderingTemplate>
Pros: Generic solution can be used for any type of field.
from Just Another SharePoint Blog
Open the list view in SharePoint
Designer.
Right click on the data view web part.
(the list)
Select Convert to XSLT Data View
Click on the number field you would
like to format
A > will appear showing Data Field,
Format As
Click on the link below Format As -
Number formatting options
Under Options deselect Use 1000
separator
Click OK
Save your changes and hit F12 to
preview