Is it possible to have menu items added for a single-page web part in the menu bar? I want to add a menu to the area usually used for menu commands (please see the screenshot):
I am talking about this sort of single-page app web part: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/single-part-app-pages
My question is, it possible to put some items in the designed area, and if yes, how?
I have tried to do it with command set extension (and ECB). The commands are coming for a normal list, but for a single page web part, they are not.
Talking about options, could it be an acceptable to "attach" a component like fabric CommandBar to this area (i.e. find it in HTML and attach), or maybe there is a standard way to do that (like, designated placeholders)
Got the answer here:
https://github.com/SharePoint/sp-dev-docs/issues/6014
It is not possible right now.
Related
When I use OpenView in Domino Designer, all the Views are presented in the Menu Bar. How can I make sure that only one view is presented and at the same time do not hide the other Views so I can use them to other Hotspot Button. Thank you.
The easiest is to create an outline with the views. You can organize the views in expandable groups, specify icons for each view, and much more.
You then create a page where you insert the outline, set the fonts and formatting, etc.
Finally you create a frameset and put the page with the navigation menu in one of the frames.
I created a simple template with all this several years ago, you can find it at http://blog.texasswede.com/free-application-templateframework-for-notes/
Download it and take a look at how it's done there.
I have created a webpage using Backbone.js and Marionette.js that mostly consists of a bootstrap accordion view that displays a list of items when the accordion header is clicked. Each item can also be clicked, which will show a hidden div of detailed information that pertains to that particular item.
I would like to make this site accessible to people who might not be using a mouse (Maybe they're visually impaired and using a screen reader? Maybe they just don't like clicking things? Either way.) I'm thinking that this would mean being able to press the Tab key to get to the accordion, pressing Space or Enter to open the accordion, Tabbing down (or down arrow key?) through the list items, and then using Space or Enter to show the selected item's hidden div.
I'm finding it difficult to find information on how to add a feature like this, since searches like "How to make an accessible website that can be used without a mouse" mostly turns up blogs on what a developer should do to add accessibility to a page, and not much on how to do it.
Currently, the page doesn't really respond to any keyboard buttons. Any tips or resources you could share would be extremely appreciated. I've been fiddling with ARIA role tags, but I'm either not doing it right or it's not the answer here.
You have to use tabindex
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex
Screen readers automatically read whatever element is the activeElement
Iwould like to add a button at the end of a listView in the same way as the bing apps do (see picture for example).
I looked for hours in google and in the microsoft documentation but canøt find anything that can give me an idea of how to do this.
Did anyone achieved this?
thanks
If you run that app (Health & Fitness), then run Visual Studio and use Debug > Attach to Process, you can open the DOM Explorer and examine how that UI is implemented.
What you'll see in this case is that it's not using a ListView at all, but rather it's own custom control that's just based on a CSS grid. That is, just because there's a grid-like view doesn't mean it's a ListView. You can always use straight HTML/CSS layout to achieve these sorts of things, which is all that's happening here. As such, it just makes separate div's for those two "More" elements.
Now if you do want to use a ListView, there are a few things you can do. First of all, if you want to render any item in a ListView differently than others, you have to make sure to use a different template. What this means is that you use an item rendering function rather than a declarative template, which then enables you to examine the item data and programmatically decide what kind of rendering to perform.
Second, if you want to have items of different sizes, then you need to use cell spanning. In Windows 8.0/WinJS 1.0 this is a property of the GridLayout. In Windows 8.1/WinJS 2.0 you instead use the CellSpanningLayout.
I have all the details for both rending functions and cell spanning written up in Chapter 7 of my second edition preview of Programming Windows Store Apps with HTML, CSS, and JavaScript, which is a free ebook from Microsoft Press so it doesn't cost you anything. :)
What is the technique called that is used in some web apps, like http://www.alfredapp.com where the navigation scrolls down the site to reveal another site?
To get such way of navigation, i would put all of my content on a single page and use a "smooth scroll effect", like the one on this site, to switch between sections.
You will find plenty of more JavaScript (and jQuery) based "smooth scroll effects" by simply googling "smoth scroll through page sections".
That's how they probably done it on alfredapp.com too.
For the main menu, I want the first four links to be blue, and specifically the last four links to be yellow. There will only be eight menu items.
I was thinking of hard coding the yellow links into the menu div, and that way when the page loads the first four menu items (default colour blue) they will be blue, and then my hard-coded links of yellow would load up.
My question is, where can I add the "yellow" code? Where can I hard code my yellow menu items? Or is there a different, better, approach to this?
My first question would be which men u are you implementing? A lot of them have a menuitem_x sort of id that is applied to the menu markup so with the CSS you can do what you want
As for where to place the markup there are a few places
You can do it directly in the skin files (not suggested since you may have to edit a few files)
in the skin .css files (much better place to do it and more maintainable and portable)
in the admin go to Site Settings and use the stylesheet editor to add the classes to the portal stylesheet (better than #1 but not as good as #2 since its now specific to the portal and not the skin so it wont be as portable)
Number 3 - works good if you dont have access to the skin or dont want to change it for other reasons
You could use Javascript within the skin.
We have done simular in the past for DNN menus but i keep away from the skinning side so dont have any examples, sorry.
Google does though :)
I would use one of the specific SEO friendly DNN menu modules that generate clean code that can be followed by search engines. I usually use one of them, except for projects where I don't have SEO concerns. When you have a menu with clean markup, like a list, you can change the colors using jQuery and specifying the first four items. You can probably do it like this, one by one. There may be a better selector for grabbing the first four items which is something I have never used.
Solved it, not as dynamic as I'd like, but it works.
The way I've done it is I'm playing with id tags, rather than class tags. Using ID, I can pick out the individual menu items and apply CSS to them.
Essentially, it looks like I've done what 'codemypantsoff' suggested. Thanks!