Use Umbraco content macro in a page template - umbraco

I'm looking to re-use an Umbraco Macro that's been rendered within a content pane, and use it in a page template. The block on the content page is below, what would I have to do to turn this into a new macro for a page template?
<div umb_source="5766" umb_firsttab="5846"
umb_macroalias="widgetname"
umb_secondtab="5847"
ismacro="true" onresizestart="return false;"
umbversionid="b8fc56a2-f4b0-42ee-a3b8-7115acdff669"
umbpageid="5756"
title="This is rendered content from macro"
class="umbMacroHolder">
<!-- startUmbMacro -->
<span>This macro does not provides rendering in WYSIWYG editor
</span>
<!-- endUmbMacro --></div>

I'd recommend using the "Insert Macro" button in the template editor (in the Settings section) to add the template. It gives you an interface to choose the appropriate options that will build the macro tag for you.
But something like this should work (Simular to Ankur Ghelani's, but includes the other options):
<umbraco:marco alias="widgetname" runat="server"
source="5766"
firsttab="5846"
secondtab="5847" />

In template you use as following:
<umbraco:Macro Alias="widgetname" runat="server" />
It should work

Related

Using a single Sitecore view rendering multiple times on the same page with different data

I am new to developing for Sitecore using MVC. I have a page layout that looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Html.Sitecore().Placeholder("head-meta-content")
</head>
<body>
<div class="willow-page">
#Html.Sitecore().Placeholder("body-content")
</div>
</body>
</html>
And I have the following renderings.
Global alert:
#using Sitecore.Mvc;
#model Sitecore.Mvc.Presentation.RenderingModel
<section class="global-alert" role="alert">
<button class="global-
alert__close">#Html.Sitecore().Field("button-text", Model.Item)
</button>
<h1 class="global-
alert__heading">#Html.Sitecore().Field("heading-text", Model.Item)</h1>
<div class="global-alert__content">
#Html.Sitecore().Placeholder("global-alert-content")
</div>
</section>
Styling Context:
#using Sitecore.Mvc;
#model Sitecore.Mvc.Presentation.RenderingModel
<div class="styling-context">
#Html.Sitecore().Field("Content", Model.Item)
<!-- The Content field is should be a Rich Text Field -->
</div>
What I am trying to accomplish/understand is this. When creating a page using the layout and the 2 renderings, I'd like to add the Global Alert to the body-content place holder on the layout and then add a Styling Context to the global-alert-content place holder. Also I'd like to add another Styling Context to the body-content place holder as well. Like this:
Then when viewing the page content tab in Sitecore, I'd like to see a section with a rich text field for the Global Alert Styling Context & the Body Styling context. I can't seem to figure out how to setup my data to accomplish this.
I've tried to setup the following data templates.
Global Alert Template - Builder
Global Alert Template - Content
Notice the _stylingContext in the Base Template area above.
Styling Context - Builder
Blank Page - Page Template
Note the inherited templates above.
The global alert template is pulling in a styling context template, & the page template is pulling a separate styling context template, I would think there'd be 2 on the page. There isn't though.
This is the normal behavior of Sitecore. The reason is because the same template is being referenced in the Base Template. So, when rendering the item, Sitecore will see that the template has already been rendered and will not render it again.
If template A has Base Template X and X has Base Template Y, it is not possible to have template A to have Y as base template also.
A => X
X => Y
which means A => Y
To allow for the 2 Rich Text to appear, you can do the following:
Create a Base Styling Context
On your template Styling Context, add your Content Field of type Rich Text in the Builder tab and in the Content tab, add the Base Styling template.
On your Global Alert template, in the Content tab, add the Styling Context template.
On your blank Page template, add the Global Alert only and not the Styling Context.
Now if you see on the Standard Values of the Blank Page template, you will see 2 rich text fields with the same field name within the same section:

How to add site navigation (ascx) to MVC _Layout.cshtml page

I am migrating a WebForm asp.net project to MVC. I copied and pasted the masterpage content to the _Layout.cshtml page. Now I got the side panel for the site Navigation. In the Webform, as shown in the code below, the put the site navigation to the far left. I tried both the enf and ~/Views/SiteNavigation.ascx, but the site navigation control is not appearing when I load up the page. Just a blank left panel. Any help is appreciated.
<div class="horizontalTabBarContent" id="mainTabContent">
<enf:SiteNavigation ID="ISRNavigation" />
#*~/Views/SiteNavigation.ascx*#
<div id="main">
<asp:ContentPlaceHolder ID="ISRContent" >
</asp:ContentPlaceHolder>
</div>
</div>
</asp:Panel>
I gess you're looking for Html.RenderPartial helper.
In Razor syntax it will be:
#{ Html.RenderPartial("~/Views/SiteNavigation.ascx"); }
First of all,
A view in MVC is basic HTML code in which you can add razor syntax. The "Razor code" will be parsed server side and will generate html output to bind models, generate valid url etc.
Here is an example of what your _Layout.cshtml view might look like:
<div class="horizontalTabBarContent" id="mainTabContent">
<div ID="ISRNavigation" />
#Html.Partial("~/Views/YourPartialNavigationView") //Your navigation bar will be rendered here
<div id="main">
#RenderBody() //Body html code will be rendered here
</div>
</div>
MVC Projet don't support the asp:htmltags syntax
in MVC instead of web forms user control, you should use partial views and by using of Helper functions like RenderPartial and Partial you could render it througth your view !!
and also instead of using PlaceHolder you should use Section !
you can Google for both topics : partialView , Section

jquery Mobile - Auto Divider

I'm using the jquery Mobile AutoDivider for a web project of mine and it works great in IE8, but for some reason in Chrome it's not generating the headers for me.
My question is: How exactly does the AutoDivider determine what to make a 'divider'? Is is just the first item within your <li></li>?
Here's my basic HTML structure (it's ultimately placed in a ASP.Net Repeater:
<ul data-role="listview" data-autodividers="true">
<li>
<img src="mySource.jpg" alt="" />
<h3>John Doe</h3>
<p><strong>Company Name Here</strong></p>
<p>User Address</p>
<p class="ui-li-aside">
<strong style="display: none;"><!-- This is what seems to make the headers in IE, placing this right here: -->
Last Name of Employee</strong>
</p>
</li>
</ul>
see the docu http://jquerymobile.com/demos/1.2.0/docs/lists/docs-lists.html
Autodividers
A listview can be configured to automatically generate dividers for its items. This is
done by adding a data-autodividers="true" attribute to any listview.
By default, the text used to create dividers is the uppercased first letter of the
item's text. Alternatively you can specify divider text by setting the > autodividersSelector option on the listview programmatically.

Add html tags in another html tags attribute with Asp.Net MVC Razor

i want add html tags in another html tags attribute like:
<p title="<strong class="cssClass">bold</strong>">
some text
</p>
how i can do this?
Only with encode:
<p title="#HttpUtility.HtmlEncode("<strong class=\"cssClass\">bold</strong>")">
some text
</p>
but you receive:
<strong class="cssClass">bold</strong>
At the Browser, title has a default default behavior and you cannot change this on native way. If you want to format the Title property to do a stylish tooltip, you could use a jQuery plugin to do that. Check this link. It shows lots of plugins to do this work.

How to create a "sidebar" in Umbraco CMS?

In Umbraco, every page has a content field that you can edit in the admin-area. What I want would be a second content field that I (actually my customer who will be editing the content by himself) can edit on every page. I would then create a masterpage/template that contains the two content areas (the first one as the main content and the second one as the sidebar). At least this is how I would do it. Is this possible or is there even a better approach for having a main content and a separate sidebar on every page?
Answer found, it is super easy: Add a rich text editor property to the runway text page and have your markup like this:
<table style="font-size: 13px; line-height: 1.5em;">
<tr>
<td class="innerTD">
<div style="min-height:600px; width: 465px;">
<div id="contentHeader">
<h2><umbraco:Item runat="server" field="pageName"/></h2>
</div>
<form id="RunwayMasterForm" runat="server">
<umbraco:Item runat="server" field="bodyText" />
</form>
</div>
</td>
<td style="width: 250px; padding: 8px;">
<umbraco:Item runat="server" field="sidebarText" />
</td>
</tr>
</table>
notice <umbraco:Item runat="server" field="sidebarText" />
Generally, yes.
Add a new tab to the Document Type that you want to add a sidebar to (called Sidebar or something). Then add a new property or set of properties to that tab to manage the content.
Then in your templates simply add the sidebar to the markup (and edit the CSS to style the new markup) and add your new fields to the template.
In the case above it's this line: <umbraco:Item runat="server" field="sidebarText" />
You can also have a default sidebar setting on the home page or any parent item that contains the sidebar info by recursively getting that value. Thus, if the "sidebarText" field on the current page is empty, it would use its parent. That makes managing the content a little easier on a large site and you can change just what you need on the specific page with differences.
The recursive setting is just a check box in the dialog to add an item to a template.

Resources