I am trying to load different html pages based on each global tab (each tab would load a different html page) using getText. Does anyone know the code to specify a certain tab for each different piece of text? The code below loads the same text into all the tabs:
<div class="col_3" metal:define-macro="highlights" i18n:domain="plone">
<h2>Highlights</h2>
<p>
<tal:block tal:condition= "exists:here/graduate-study/highlghts-grad"
tal:replace="structure here/graduate-study/highlghts-grad/getText">Footer content here</tal:block>
</p>
</div>
<div class="col_3" metal:define-macro="highlights" i18n:domain="plone">
<h2>Highlights</h2>
<p>
<tal:block tal:condition= "exists:here/undergraduate-study/highlghts-grad"
tal:replace="structure here/undergraduate-study/highlghts-grad/getText">Footer content here</tal:block>
</p>
</div>
etc, etc for all tabs...
The global tabs in Plone are navigation roots. You can detect the current active navigation root in two ways:
The body HTML tag has a section-[id_of_section] CSS class, where id_of_section varies with the pathname of each section.
From a viewlet or portlet you can retrieve these classes using the ##plone_layout view:
tal:define="plone_layout context/##plone_layout;
bodyClass python:plone_layout.bodyClass(template, view)"
after which you'll have to test if a certain state- string is present in the bodyClass value.
By retrieving he current navigation root directly from the ##plone_portal_state view:
tal:define="plone_portal_state context/##plone_portal_state;
nav_root plone_portal_state/navigation_root;
nav_root_id nav_root/getId"
You can then vary your viewlet or portlet based on the nav_root_id.
Note however that each navigation root is has a portal type, and possibly an interface declaration, that you could use to register viewlets or portlets for. Detecting the exact navigation is usually not the best option.
This effect is commonly referred to as a "megamenu." There is a product that implements this for Plone, http://plone.org/products/collective.collage.megamenu/. I've not used it, but I'd certainly recommend that you explore it as a starting point.
Related
This seems to be a very simple concept, but I am unable to resolve. What I'm trying to do is, render/display a Standard value of a template, to the page.
Created the items & templates using Rocks. Here is the structure.
1. Sublayout - footer.ascx
<div class="content">
<h1>This is a title.</h1>
<p>All the content goes here</p>
<sc:placeholder runat="server" Key="footercontent" />
</div>
2. Sublayout - StickyNav.ascx
<a class="btn" href="#">
<sc:Text Field="Sticky Nav Title" runat="server" />
</a>
3. Template - Sticky Nav
The first pic is of the template & the second one shows the assigned default value in _Standard Values.
Then, in Sitecore Explorer,
right clicked on (Sticky Nav - _Standard Values) > Tasks > Design Layout on Standard Values.
Now, there is a content item "index" under /sitecore/content/. It has these layouts declared:
When I right click on Index > Tools > Browse > Preview, the index page does open and the footer content is also displayed.
But, I am unable to see the text 'Go To Top', that was set as a Standard value (Image 2). It is empty.
What am i missing here.
There could be a few factors blocking the content being showed. For the front end the best bet is to rule out things like publishing - i.e. make sure that the template, fields, standard values, and the content items are all published correctly. If you are in preview this is probably of less relevance but worth noting when you deploy
When the sc:Text control renders is will be running the renderField pipeline. At the point that interacts it will be talking to Sitecore via the api.
To check things via the code behind for your control (assuming it's an ascx due to the runat="server" tag). Check:
Field field = Sitecore.Context.Item.Fields["Sticky Nav Title"];
if (field != null)
{
string value = field.Value;
}
And debug through to check the field actually has the value you require.
In the cms, when you view the page of interest does the 'Sticky Nav Title' field appear to have a value, and be the value you are interested in?
I realized the initial thought itself was a mistake. There HAS to be an item if it's value has to be displayed on page.
So, I created a new item under /sitecore/content/Sticky Nav Button using the template Sticky Nav.
And in StickyNav.ascx, updated the control as:
<sc:Text Field="Sticky Nav Title" runat="server" DataSource = "/sitecore/content/Sticky Nav Button"/>
Hope this helps beginners like me.
According to Create.js' integration guide, it should be possible to create editable collections of blocks.
Relationships between entities allow you to communicate structured
content to Create.js, which will turn them into Backbone collections.
For example, to annotate a list of blog posts:
<div about="http://example.net/blog/" rel="dcTerms:hasPart">
<div about="http://example.net/my-post">...</div>
<div about="http://example.net/second-post">...</div>
</div>
This dcTerms:hasPart doesn't seem to be present explicitly in Create.js; it's probably from a vocabulary. How can one show to Create.js that this content is a collection and make it show the "Add" button? In my case, I simply have sections which contain <h2>, <h3> and <article>s.
EDIT: Using rel="hasPart" in my <section>, the button appears. Problem is Create always uses the first element as a template. In this case, it uses my <h2> as template, which is not what I intended. So my question now would be how to trigger the "add" event in my section?
Hackish solution:
Using javascript, I created a new section or article in the DOM, then restarted Create calling $('body').midgardCreate({...}) again. Create will now recognize the new block. When I edit some fields in the block, the "Save" button is enabled and I can submit the new block.
As you probably already know, I'm working hard on some XPM templates with Razor. I've ran into another issue, this time concerning rendering components inside templates in order to make them siteEditable.
The following I'm not sure about. I've got a component which has a title field called "Title", and multivalue componentlink fields which consists of components with a title, description and image. Let's call this one "Linked USP" for now.
Currently this is being rendered by a Template called 'Page Banner', and it just iterates over fields with some If-loops to determine it's presentation, especially for the Title. In order for XPM to work, this template needs to render the component presentation of "Linked USP". So we've created a template called "[XPM] USP ITEM". - this Component template has the 'enable content editing TBB" added to it.
Now the issue arises when I want to make the Title Editable as well. Sounds straightforward, no? Not really - because when the parent template has got a "enable for content editing" TBB added, it will add <span> tags to all editable fields but the templates that gets invoked inside this template will also have <span> -tags, effectively bloating the html and making it impossible to edit the fields inside the RenderComponentPresentation because of duplicate <span>s.
Some code for your fun and to illustrate my issue:
<h1>#RenderComponentField("Title", 0)</h1>
#Foreach(var linkedUSP in Fields.USPS){
#RenderComponentPresentation("linkedUSP.ID", "tcm:10-1076-32")
}
This template has an enable Content edit TBB added.
now, for the RCP mentioned above, inside its [XPM] template:
<div class="title">#RenderComponentField("Title", 0)</div>
<p>#RenderComponentField("Description", 0)</p>
<tcdl:ComponentField name="img">
<img src="#img" alt="img.MetaData.alt">
</tcdl:ComponentField>
This one ALSO has the "Enable Content Edit" TBB added. On the front end this happens:
<div class="title"><span><span>Men</span></span></div>
Because the parent template also adds spans to the field.
So my question: how do i solve this? The Title field mentioned above has to be inside the parent template, but I can't create a special template for it becuase it is no component link. I can't get the TBB out of my RCP template, because it won't be editable that way. Interesting huh?
Can't I disable the spans inside template builder somehow?
Does the view <--> URL matching pairs, effectively mean that the router has to control the entire page and cannot be used for controlling a subset of the page? I have a situation where Ember is used for a portion of a page where the outermost container view is manually added to a DOM element. A workaround would be to convert the entire page to Ember but perhaps there are other ways? Thanks for any pointers!
You can specify outlets to insert a dynamic portion of a page. An outlet renders the current view. In that view there can be another outlet to display the subview.
See this example:
application template
<div id="content">
<nav> .. menu part .. </nav>
{{outlet}}
</div>
This renders the dynamic part of your app. When you browse to for instance /pages you can display a list of pages in it. When you go to '/pages/1' there is an {{outlet}} in the pages-template which renders the page-template.
pages template
<ul>
{{#each page in controller}}
<li>{{#linkTo page}}{{page.name}}{{/linkTo}}</li>
{{/each}}
</ul>
{{outlet}}
page template
<h2>{{name}}</h2>
The page-name header is now rendered below the pages-list.
This way you can add as much dynamic content as you want.
When you open the yahoo main page at the top there is a search section that contains links like: Web, Images, Video, More
When clicking on the link the chosen section is activated and the text of the search button is being changed. The only part of the page that is updated is the search part at the top and the other parts of the website remain unaffected.
My question is how is this implemented? And more importantly how similar behaviour could be
implemented in .net using VS 2008?
Are the links really links or different elements that only mimic the links behaviour?
Does it need to be ajax, or just everything is preloaded and hidden using some css techniques?
Is the same technique used in the news section on the same page when changing tabs: News, Sport, Entertainment, Video?
Thank you
This is actually done with CSS and Javascript:
<ul id='menu'>
<li><a href="#web_search" class='active'>Web</a></li>
<li>Image</li>
<li>Video</li>
<li>Local</li>
</ul>
<div id='web_search' class='search'></div>
<div id='image_search' class='search' style='display: none;'></div>
<div id='video_search' class='search' style='display: none;'></div>
<div id='local_search' class='search' style='display: none;'></div>
Then Javascript (example uses jQuery, can be done many ways...):
$('a','#menu').click(function() {
$('div.search').hide();
$('a.active', '#menu').removeClass('active');
$($(this).addClass('active').attr('href')).show();
$(this).blur();
return false;
});
And this is an example of it in action. The styling and such would all be CSS.
After doing a quick inspection of the search field using Firebug, it appears that clicking on each of search type links (Web, Images, etc) simply modifies the DOM. This includes adding fields, removing fields, toggling class names, etc. I wouldn't be surprised if hidden fields are also being manipulated.
Behavior like this is accomplished using JavaScript. Specifically (and at a very high-level), there are event handlers attached to the links each of which modify the DOM in their own way.
It can definitely be implemented using Visual Studio 2008 as it's really (and likely) nothing more than CSS, JavaScript, and HTML. .NET really wouldn't come into play until you're ready to take the specified query and begin running it against your data store.
Paolo's answer gives a really good, straight-forward example of how that behavior can be emulated.
Those links have onlclick JavaScript handlers attached to them. When you click on them different tab becomes visible and current tab gets hidden. All tabs are preloaded but only the first one is visible initially.
Take a look at Tabs control from ASP.NET AJAX control toolkit. You can customize tabs so that they look like links.