Custom Text for Drilldown Menu "Back" Button [Foundation 6] - zurb-foundation

While I know I can use data-back-button to change the text on my drilldown menus, is it possible to change them to reflect whatever the parents of the drilldown is?
For example, the drilldown menu works as such:
And I'd like it to function as such:
I hope this makes sense and let me know if I can clarify. Thanks for any insight you can provide.

There are a couple of ways you could do this but the most straightforward seems to me to be something like this:
1) Use Foundations Drilldown options to set a new general back button. e.g. data-back-button='<li class="js-drilldown-back"><a class="new-back"></a></li>'
This takes care of the styling with .js-drilldown-back and makes it work as a back button without additional JavaScript. It also adds a new class to the a for later use setting the text.
2) To change the text you can use jQuery, perhaps something like this:
$('.new-back').each(function(){
var backTxt = $(this).parent().closest('.is-drilldown-submenu-parent').find('> a').text();
$(this).text(backTxt);
});
All this does is scurry up the menu structure to find out what the original link text was, and then copies it to the new back button.
This should work for all levels of a drilldown as in this example: http://codepen.io/tymothytym/pen/GWbXap
FYI: There are a few mild usability concerns with using the same labels to point forward and backwards in menus as users can find this confusing, particularly with many levels. You may have already considered this, I mention it only for completeness.

I could not change the menu structure in my project so I fixed it like this:
if (jQuery('.js-drilldown-back').length) {
jQuery('.js-drilldown-back').each(function () {
jQuery('.js-drilldown-back').find('a').text('Custom back text');
});
}
With this you don't need an extra html tag.

Related

How to Order a 3 Way Tie?

I'm working on an app that involves inputting the amount of cards players ended up with, and ordering them in a list. But if theres a 2 or 3 way tie, I want the user to be able to have a menu that lets them select the order of who had the highest card to lowest card, that way I can organize the list. How do I get the user to order them, like what kind of Alert/Popup lets me do that?
Edit: Basically I was asking how to make a picker that lets you arrange multiple items into a specific order but it seems the best thing to do is just to have a stack appear with buttons for each item, where you can click them and go from there to create your order. Hope this helps for anyone in a similar situation!
For that kind of user interaction where they are doing more than just tapping an option (in your case, you want them to order the various cards), I would create your own custom view rather than use an alert or action sheet or similar.
The way you implement will depend on how you want it to look. If you want the view to appear on top of your current view (a bit like an alert does) where it only takes up the space needed for the content) then you can embed in a zStack. If you want it to slide up from the bottom as almost the same size as the full screen then you can use a sheet (sometimes also referred to as a modal).
A little difficult to explain how they look visually - if you google image search “SwiftUI sheet” then you’ll see what I mean (if you aren’t already familiar with them)
ZStack
you put your current view in a ZStack then create a new view which goes in the ZStack after it but you wrap it in an if statement so it’s conditionally shown based on a Boolean being true.
E.g.
if gameTied { ChooseSortOrderView() }
then when your game finishes - if it’s a tie, you set your Boolean to true and up pops the new view.
You can pass in the tied cards, get the user to sort them via drag and drop, form, picker (whatever you want), submit it. Then set the bool back to false to make the view go away.
sheet
The other alternative instead of using a zstack would be sheet so you get a modal view appear. Similar approach but instead of the ZStack, you use a .sheet modifier.

Listing customization ServiceNow

How can I personalize a list within ServiceNow?
I mean, I have this list:
But I think its very confusing to see the position on the right side.. How can I center it?
Like CSS customization or JS or something like that.. where can I find the customization form?
You can customise the position of the field content by using Field Styles.
If you mean customising the position of the field header, I have had a play around with doing this and I seem to have got it working.
If you inspect the HTML of the column header you want to target (the th tag), you'll see that there's an attribute on it called glide_type which contains in it the type of column. You can use this to create a CSS rule to target only headers of a particular type.
For example, I have a field of type decimal, and the th tag has the following attribute:glide_type="decimal". So to target that element, I could create a CSS rule like the below:
th.text-align-left.list_header_cell[glide_type="decimal"] {
text-align: right;
}
The hacky part is including that CSS so that it applies throughout the SN interface. You can use a UI Script to run some JavaScript which includes the Style Sheet. So if you put the above CSS inside a new Style Sheet (navigate to Content Management > Design > Style Sheets), and copy that new Style Sheet's Sys ID, you can create a UI Script with the below in it to include that Style Sheet on all pages:
link = document.createElement("link");
link.href = "STYLE_SHEET_SYS_ID_GOES_HERE.cssdbx?";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName("head")[0].appendChild(link);
After doing that, you'll see that the Style Sheet is getting loaded on all pages, and if you've written your CSS right then you should find that the column header is now right-aligned!
As #Kirk said, performing this kind of customisation will mean that it's hard for ServiceNow Customer Support to assist if there's something you've customised getting in the way of their troubleshooting. Take this into account if you decide to implement something like this, and also thoroughly test this on a non-production instance.
In addition to the above, this solution may break in future releases as ServiceNow may decide to change the way that lists work and thus the CSS selector may no longer target the right/any element.
Hope this helps!
Dylan
It's not suggested to customize any sort of CSS or JS with that, we were told that is voids your support for that section if you do so.
You could just add a few more display fields if you really desire to remove the extra white-space.
For a complete description of that (which you may know how to do):
Click the Gear icon
Then select some relevant fields from the Available section, and click the Right arrow to add them.

Using Umbraco 7.2 grid view, how do I insert the grid view into my template?

I'd really like to use grid view to render my content on a simple text page. I've got a grid view with the alias "content" set up. What do I type in the template to get it to show up? #CurrentPage.content does not work. I realize it probably uses those partials that 7.2 came with but I've got no idea how to use them.
It may help to know my knowledge level on this. I'm very new at wiring up templates to doctypes. The only ways of pulling data from my content I actually know how to use so far are these:
Get some text by typing something like #CurrentPage.content
Get a picture by typing something like #Umbraco.Media(CurrentPage.Picture)
Official documentation for the GridView can be found on the community website. For posterity's sake here is the relevant part:
Render grid in template
To display the grid on a site use:
#CurrentPage.GetGridHtml("propertyAlias")
This will by default use the view /views/partials/grid/bootstrap3.cshtml you can also use the built-in bootstrap2.cshtml view by overloading the method:
#CurrentPage.GetGridHtml("propertyAlias", "bootstrap2")
or point it a custom view, which by default looks in /views/partials/grid/ - or provide the method with a full path
#CurrentPage.GetGridHtml("propertyAlias", "mycustomview")
#CurrentPage.GetGridHtml("propertyAlias", "/views/mycustomfile.cshtml")
If you're working with a strongly typed model simply replace #CurrentPage with #Model.Content, so:
#Model.Content.GetGridHtml("propertyAlias")
The answer was to insert this into the template:
#CurrentPage.GetGridHtml("propertyalias")
In my case, content would go in place of propertyalias.

CTreeCtrl - only use checkboxes for certain rows/children

I have a CTreeCtrl and I filled it with content. Now I wanted to add checkboxes but JUST for certain ones. I've found the possibilty to activate checkboxes on the TreeCtrl with m_Tree.ModifyStyle(0, TVS_CHECKBOXES), but this adds a checkbox on each node/child on the whole Ctrl. Is it possible to turn this feature on, but just for certain ones?
All I found is the possibility to add three different pictures, catch the clickevent on a node and change the image. Is there an easier way? Let me know.
Thanks a lot,
jntme
I don't think that CTreeCtrl provide any method to add check boxes at specified node only.
Easiest way to do this is explain in following link.
http://www.tech-archive.net/Archive/VC/microsoft.public.vc.mfc/2005-10/msg00454.html.
please go through and let me know if you are facing problem.
You may be able to accomplish what you want with a custom draw tree control. But, you'll need to render the image states yourself. That could get messy because you'll need to account for all of the possible different states.

create a scrollbar in a submenu qt?

I have a map application and a submenu which has dynamically added objects (i.e. points on a map) added to the submenu, depending on the layer that is loaded. I have the ability to hide each individual objects (i.e. a point) by clicking on the corresponding submenu item. Is there any way to organize the submenu? When there are a lot of points (i.e. 100) the entire submenu takes up the screen. Can I add a scrollbar to a submenu? I looked in the documentation, but couldn't find anything that support this feature.
From this bug report I was able to find out that you could do the following:
submenu->setStyleSheet("QMenu { menu-scrollable: 1; }");
Works like a charm.
There is no such possibility as far as I know.
Maybe you shouldn't use a sub menu for this but prefer a menu entry that show a Point manager GUI of your own which would have a QListWidget displaying all your points items.
I'm aware that this solution will break a (big?) part of your code but I don't see anything else.
I think you may be able to get the effect you want by creating and using your own QStyle subclass (via QApplication::setStyle()), and overriding the styleHint virtual method to return 1 when the StyleHint parameter passed in is SH_Menu_Scrollable. At least, that works for me when I create large QMenu objects and show them as popup menus.... It may also work for QMenus attached to the menu bar, but I havent tried that.
Whilst it is possible by subclassing the QMenu class to create a custom widget and going from there you're better off looking at a better way to display that information. You'll save yourself time and it'll be much easier for your users to not have to scroll through a big list of items in a small area.