I have created some "Basic Pages" like page 1, page 2, page 3 etc in Drupal 7. I have also created a view named "categories" based on this assigned it in a block. Now I want to show the list of categories exactly as below:
<h2 class="sidebar1">Main Menu</h2>
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
Please help me in this regard. Should I create any view tpl file for this or I need to modify the templates. If so, how can I modify the template files?
Please find the attached screen shot of the view.
Under the Format label, you have to click "Unformatted list" and then select "HTML list." This way, the view's results will be displayed with the desired HTML format.
Under the Fields label, edit "Content: title" and make sure you check the checkbox "Link to content". This way the name of the basic page will automatically be rendered as a link to the page it represents.
Hope it helps.
Related
Using: AngularJS v1.3.15
Disclaimer: I know virtually nothing about angularjs. But I'm "forced" to use it because its being used in a framework that I am using.
I want to modify some html/angularjs that looks like this:
<ul>
<li ng-repeat="provider in model.externalProviders">
<a class="pure-button" href="{{provider.href}}">{{provider.text}}</a>
</li>
</ul>
I can see what is going on here... ng-repeat causes an iteration on the elements of the model.externalProviders collection/array. It works fine, but I have no control over content/styling individual <a> elements depending on the provider. I would like to change the content/appearance of the <a> element depending on type.
The relevant part of the model looks like this:
"externalProviders": [
{
"type": "Google",
"text": "Sign-in with Google",
"href": "https://localhost:44302/external?provider=Google&signin=04e029cf1018403f1757b097fbfb1ecb"
}
],
So I thought maybe there is a way to "select" or "pick" from externalProviders by type... If that type exists, then render the appropriate markup, e.g.:
<ul>
<!-- if model.externalProviders has item with type=="Google"... -->
<li>
<a class="pure-button button.google" href="<i class="fab fa-google"></i>{{provider.href}}">{{provider.text}}</a>
</li>
<!-- if model.externalProviders has item with type=="Facebook"... -->
<li>
<a class="pure-button button.facebook" href="<i class="fab fa-facebook"></i>{{provider.href}}">{{provider.text}}</a>
</li>
</ul>
Not sure what the proper search terms would be so I had trouble finding any info that might solve my problem. Is something like this possible with AngularJS? If so, how would I accomplish it?
As #Major Sam commented, the ngClass might work for less simple scenarios, but I don't even need to go that far. Luckily I have control over the type property and the css, so I can make my type and css selector match the font awesome icon class selector for the icon. This works:
<li ng-repeat="provider in model.externalProviders">
<a class="pure-button button-{{provider.type}}" href="{{provider.href}}"><i class="fab fa-{{provider.type}}"></i>{{provider.text}}</a>
</li>
Drawbacks: Doesn't allow you to change the actual markup (like, e.g., not include the icon if font awesome didn't have one for that provider).
Currently i need to search a text and select the expected result from the search list.Search result displays with li tag and the text resides under span tag. Searching text will be like this Phone,Phone-audio,Phone-video .My source code is displaying like below..Please help me to select either Phone-audio or Phone-video.
<ul>
<li class="Searchitem"></li>
<span value="AL">Phone</span>
<li class="Searchitem"></li>
<span value="AL">Phone</span>-audio
<li class="Searchitem"></li>
<span value="AL">Phone</span>-video
</ul>
That html doesn't make any sense, and definitely isn't per standard. Neither the span nor the -audio or -video are inside the li tags. I'm not even sure what element you need to click.
If it was html was compliant it would be as easy as:
browser.span(text: 'Phone-video').when_present.click
or maybe this would work, depending on the rest of the site's html, but it would be very flaky if anything changed:
browser.ul.span(index: 1).when_present.click
The following code is where the link I need to click on is buried.
I have figured out how to browse to the website and log into the website programmatically. But, now I need to be able to automatically navigate the site and I have not been able to manage this.
The line that contains "Time Clock Entry" is the link that I need to click...
I am new to coding. This is my first project.
Sorry. I did not realize that my earlier copy/paste had been shortened. I have corrected the line that contains the link.
Again, thank you.
<div id="dockedContent" class="dockedContent">
<div id="RecentlyVisitedWidget" class="recentlyVisitedWidget">
<h2 id="ctl00_12_12_RecentlyVisitedLabel"></h2>
<ul class="recentlyVisitedLinks">
<li>
<span id="ctl00_12_12_Repeater1_ctl00_link">
Time Clock Entry
</span>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
You can find the link with this:
HtmlElement link = (from HtmlElement elem in webBrowser.Document.GetElementsByTagName("a")
where elem.GetAttribute("title") == "Time Clock Entry"
select elem).ElementAt(0);
This basically says "get all a tags in the document (and thus all links), and then filter so that I get only a tags with a title of Time Clock Entry. Once you've done that, give me the first such element."
And then programatically click it with this:
link.InvokeMember("Click");
Here's my initial implementation of ui.bootstrap tabs using ui.router:
<tabset>
<tab heading="Tab1" select="$state.go('home.tab1')">
<div ui-view="forTab1"></div>
</tab>
<tab heading="Tab2" select="$state.go('home.tab2')">
<div ui-view="forTab2"></div>
</tab>
</tabset>
Nicely simple, and it mostly works, but it has several problems.
First, it doesn't work if I enter a URL into the browser, e.g. ".../home/tab1". The issue I presume is that while ui.router may be routing to the correct view, it doesn't know to select that view's tab.
Second, if I try to leave the page for a state on a different page, it triggers an apparent bug in the tabs logic. As the tab set is being destroyed, it destroys the tabs one by one. When it destroys the currently selected tab, it appears to run the same logic that it would run if only that tab were being destroyed, not the entire tab set. This causes it to select one of the other not-yet-destroyed tabs, which makes ui.router go to that tab's state, which prevents me from leaving the page. (The fix presumably should be that destroying the tab set should not select any tabs during the destruction process.)
Third, some of the tab views may be complex, with many server hits during their construction. I don't want to destroy and recreate them every time I switch from one tab to another. I'd much rather have a tab view be created when that tab is first selected and then persist until I leave the page. Selecting a previously viewed tab should just make it visible again, not re-create it.
So, it looks like I need something more complex and sophisticated, but what? Thanks in advance for any suggestions.
Update: the ui.router FAQ turns out to have a question on how to implement tabs. It points to an "extras" package that looks promising. Hopefully there's a way to integrate with ui.bootstrap tabs. http://christopherthielen.github.io/ui-router-extras/#/sticky
Update: here are two implementations that work much better but still aren't quite right. The first one uses ui.bootstrap tabs:
<tabset>
<tab heading="Products" ui-sref=".products" active="$state.includes('home.products')"></tab>
<tab heading="Users" ui-sref=".users" active="$state.includes('home.users')"></tab>
</tabset>
<div ui-view="home.products" ng-show="$state.includes('home.products')"></div>
<div ui-view="home.users" ng-show="$state.includes('home.users')"></div>
The second is based on top.html from Chris Thielen's sticky-tabs example:
<div class="navbar navbar-default navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<li ng-class="{active: $state.includes('home.products')}" ><a ui-sref="home.products">Products</a></li>
<li ng-class="{active: $state.includes('home.users')}" ><a ui-sref="home.users">Users</a></li>
</ul>
</div>
<div class="tabcontent well-lg" ui-view="home.products" ng-show="$state.includes('home.products')" class="col-sm-6"></div>
<div class="tabcontent well-lg" ui-view="home.users" ng-show="$state.includes('home.users')" class="col-sm-6"></div>
Both of these avoid my first two problems above - going to a tab via URL works, and I can leave the page without triggering the tabs destroy bug (presumably because I'm not using "select=").
However, there's still a problem, and it happens with both versions. The home.users template has a ui-grid, and if I first go to the page with that tab selected, the grid is empty. I can see the client requesting the grid's data from the server, but it doesn't show it. If I go to the other tab and come back, then it shows the data (after re-fetching it). Worse, this means I can't make the home.users state sticky, because then it gets stuck in the no-data-showing mode.
The easiest way is to ignore all the fancy ui-bootstrap directives and just make use of the CSS. Then you can end up with something very simple:
<ul class="nav nav-tabs">
<li ui-sref=".state1" ui-sref-active="active"><a>State 1</a></li>
<li ng-repeat="type in viewModel.types"
ui-sref=".typeState({type:type})"
ui-sref-active="active"><a>{{type}}</a></li>
</ul>
This will give the appearance of the tabs while maintaining a correct active states. The trouble with using the <tab-header> directive is that you can't cleanly initialize the active state from the ui-router $state, so you get multiple tabs highlighted on page load.
You might consider having a look at this project, ui router plus ui bootstrap tabs, which declares itself as
Idiot-proof tab panes with route support using Angular.js + Bootstrap 3 + UI Router
I haven't tried it as yet, but certainly looks promising.
Just did this in a project of mine. This assumes that your routes are wired with ui.router. Hope it helps.
<uib-tabset active="active">
<uib-tab index="0" ui-sref ="tab1" heading="Tab1"></uib-tab>
<uib-tab index="1" ui-sref="tab2" heading="Tab2"></uib-tab>
</uib-tabset>
I have a module called app.It got four tabs (Home,Library,Data).
In my Library tab (2nd tab), I have my organisation data displayed as a list. initially, the main organisation name is displayed (level 1), on clicking any of the list item, it drills down and shows the next level of organisation data.(level 2) and it goes on.
CompanyName //level 1
Administartion //level 2
Operations //level 3
EmployeeName //level 4
I want to display the organisation hierarchy on top of the page like this. (The below is when I reach the 4th level in page)
CompanyName | Administartion | Operations | EmployeeName
My idea was to declare an empty array initially, and push the organisation name into it on each clicks, and later displaying it using an ng-repeat.
//Initially in code
$rootScope.breadCrumb = [];
//on each click
$rootScope.breadCrumbRef.push({"level":$scope.level,"name":orgName});
//html code.
<ol class="breadcrumb" ng-repeat="l in breadCrumb">
<li><a ng-href="">{{l.name}} </a></li>
</ol>
Please note:
I am using twitter bootstrap for html, in bootstrap, a breadCrumb can be attained like given below.
<ol class="breadcrumb">
<li>CompanyName</li>
<li>Administartion</li>
<li>Operations </li>
<li class="active">Data</li>
</ol>
I did not get the expected results, but it appeared as given below
CompanyName
Administartion
Operations
EmployeeName
Any idea..?
Thanks in advance.
You have the ng-repeat on the ol. You want to place it on the li. You're creating a new ordered list for each item in the array. Like this:
<ol class="breadcrumb" >
<li ng-repeat="breadCrumb in breadCrumbs">{{breadCrumb}} </li>
</ol>