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.
Related
I have two sections of html in my main (app.component.html) view - one for navigation bar of buttons which navigates to child pages and the other section is to display a table of records. When select a record of the table I expect the details page of the record should display in the router-outlet but the table should be disappeared. But the details page is displaying down the table while I expect the table of records should disappear when the app is routed to a child page (details page). Any help how to achieve this would be appreciated.
here is my code:
<div class="navbar bg-inverse">
<div class="container">
Home
<a routerLink="/general" routerLinkActive="active" class="navbar-brand">General</a>
<a routerLink="/financial" routerLinkActive="active" class="navbar-brand">Financial</a>
<a routerLink="/termsheet" routerLinkActive="active" class="navbar-brand">Term Sheet</a>
<a routerLink="/capitalization" routerLinkActive="active" class="navbar-brand">Capitalization</a>
</div>
</div>
<!--I don't want below section of the main displaying when routed to child page
<h1>table of records here</h1>
<router-outlet></router-outlet>
Thanks
yesp.
Your idea of putting the table section in a separate component looks working, but the pagination logic which is moved from app.component.ts to dashboard.ts was broke and a click on next page (goes to next page but immediately within a second it's coming back to page 1 agian) is not working now. Anyway i will look into the pagination issue and get back to the board in case the issue persists. Thanks for your help!
Thanks
yesp
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.
I use DNN with AngularJS and bootstrap. Now I have a page layout in the form of
What I want now is, according to a function of what the user selects in the menu must master and detail to be replaced.
There are different .aspx pages that I would have to add at runtime.
Is there an easy way?
You cannot "replace" the .ASPX page - you can request HTML from different endpoints (pages, if you will) and ASP.NET would generate them based on the request.
That linguistic inaccuracy aside, you'd need to have your client Angular app render different templates based on some selection value. You can use ng-include and link to a template URL, which could be generated by your .ASPX page.
So, imagine you have a simple HTML page like this:
<select ng-model="selection" ng-change="changeMasterAndDetail()">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
<div ng-include="master"></div>
<div ng-include="detail"></div>
In the controller, you can assign the template Url depending on the selection:
.controller("SelectionCtrl", function($scope){
$scope.selection = foo;
$scope.changeMasterAndDetail = changeMasterAndDetail;
changeMasterAndDetail();
function changeMasterAndDetail(){
if ($scope.selection === "foo"){
$scope.master = "/path/to/master/pageA.aspx";
$scope.detail = "/path/to/detail/pageA.aspx";
} else if ($scope.selection === "bar"){
$scope.master = "/path/to/master/pageB.aspx";
$scope.detail = "/path/to/detail/pageB.aspx";
}
}
});
If you are asking to replace the content of details on the basis of the click of the menu items in the master section , you only need to put a Option .
You can create a master page where you keep the master section and all your tabs or options in them along with the href having the URL of your content page.
You should also add a <ContentPlaceHolder> in your master page where in the content of the details page will go.
Now, when you create a new page , you choose the master page and simply start writing content in the <asp:Content> area. By this all your content will appear in the details area. And that area will be loaded dynamically based on the href .
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.
I'm creating a new application using ASP.NET MVC.
I'd like to use a series of jQuery tabs at the top of my window to allow the user to access the various modules of the application.
I want to put the tabs in my shared layout view so that I don't replicate them throughout the app.
I'm running into two conflicting issues that I can't seem to find a coherent solution for:
When I click on a tab, I'd like the whole window to navigate to that page, rather than just loading the content into a div. I'm doing this to allow for bookmarking of a particular module. (I'd like the address bar to contain the URL of the current content, rather than just a "main page" URL.)
Currently when I call $("#tabs").tabs(); jQuery creates a div for each of my tabs and attempts to load the content of my href into the div. That ends up creating a copy of the page I'm on nested within itself.
Here are my tab definitions (from the default layout page):
<section class="tabs">
<div id="tabs">
<ul>
<li>Instructions</li>
<li>Questions</li>
<li>Finish</li>
<li>FAQ</li>
</ul>
</div>
</section>
And here's the script I'm using to set them up:
function SetupTabs(sel) {
$("#tabs").tabs();
$("#tabs").tabs("select", sel); // Selects the tab
$('#tabs').tabs({
select: function (event, ui) {
location.href = ui.tab.rel;
}
});
}
This actually gets my page navigating correctly, but nests the pages within themselves (issue #2 above). If I re-arrange it so that I have a main page, and load the content from the tabs using partial views, then I don't have a usable URL in the address bar (issue #1 above).
Any ideas would be greatly appreciated. I know this isn't the design paradigm for the jQuery tabs, but we're using them elsewhere in the app and we use a lot of jQuery UI-themed elements, so I'd like to stick with them for this element, too, if I can make it work.
Thanks
Since you want each tab click to act as navigation, you may want to consider not using the JQueryUI Tabs, instead use a <ul> styled to look like tabs with the click events set to navigate to the pages you'd like.