@Edit.TagToolbar and @Edit.Toolbar Methods in Razor / .net
2sxc has a cool in-page toolbar system - here you'll find a conceptual overview around the toolbar. These toolbars are usually hover-buttons like this:
Technically the entire Edit-UI is JavaScript based, so all the buttons, events etc. are client side scripts. Writing this JS would be complicated to say the least, so the @Edit.TagToolbar(...)
and @Edit.Toolbar(...)
are your tools of choice for adding toolbars from Razor.
We have an rich series of Razor tutorials. You should really check them out 👍.
How to use
Here's a quick example of using the Edit
object in a Razor template:
<h1 @Edit.TagToolbar(Content)>
@Content.Title
</h1>
This example will output the item title in an h1
tag and add a hidden, appear-on-mouse-over toolbar with editing-buttons for the item named Content
.
Let's assume you're building the details-page of a news-app and you only want the edit/remove buttons, to improve the UI for your use case. Additionally, you want the mouse-hover to react on the whole article, not just oven the title. Here's how:
Warning
2sxc 10.27 introduces a new, simpler API to customize the toolbar. So the instructions below are technically correct, but not recommended any more. Check out the much simpler toolbar customizations
@* this will show an "edit and remove" button for the current item *@
<div @Edit.TagToolbar(Content, actions: "edit,remove")>
<h1>
@Content.Title
</h1>
@Html.Raw(Content.Body)
</div>
Here's a different example, how to create a toolbar with only one button, namely an add new item button to create a new BlogPost-item.
@* this will show an "add" button if the current user is an editor *@
<h1 @Edit.TagToolbar(actions: "new", contentType: "BlogPost")>
@Content.Title
</h1>
As you can see, the actions: "new"
tells the toolbar to only show this one button, while the contentType: "BlogPost"
says what content-type this new item should be. As this toolbar won't have buttons that modify an existing item, it doesn't need that parameter.
How it works
This command is part of the Edit object and used in Razor templates. It provides a simple API to generate in-page buttons if the current user is an editor.
It also checks if edit should be enabled (based on security specs) and will then generate some HTML/JavaScript at that location.
Common Tasks
Here are a few snippets that you'll typically need, saving you from reading all the docs in common scenarios:
Edit.Toolbar(employee)
creates a default toolbar for the content-itememployee
with all default buttons like edit, change-view, more, etc.Edit.Toolbar(employee, actions: "edit")
creates a toolbar for the itememployee
but only with theedit
-button.Edit.Toolbar(employee, actions: "edit,add,remove")
creates a toolbar with three buttonsedit
,add
,remove
Edit.Toolbar(actions: "new", contentType: "BlogPost")
creates a toolbar with one button, namelynew
which will open a newBlogPost
form.@Edit.Toolbar(actions: "new", contentType: "BlogPost", prefill: new { Title = "Hello", Color = "red" } )
creates a toolbar with one button, namelynew
which will open a newBlogPost
form, and prefills theTitle
andColor
field.
The Toolbar Actions
Note: at the moment, the buttons are grouped into bundles like
- initial buttons
- list buttons
- template / view buttons
- app buttons
The actions can be a combination of known button-names. Here's the current JavaScript catalog of commands:
The following commands all require target
to be set, or they only make sense in a List-setup - see also content and not as data.
new
open a dialog to create a new item, requires atarget
or acontentType
parameteredit
to edit the current itempublish
will optionally show the publish-button, but only if the current item is not published.add
opens a dialog to create a new item just like new, but will add it below the current item in the content listremove
will remove (not delete) this item from the content listmoveup
will move the item up one position in the content listmovedown
will move the item down one position in the content listsort
will open the sort dialog of the content listreplace
will open a dialog to swap the current item in the content list
Note: the command metadata
- is a bit special, not supported in the actions
parameter - use the complex toolbar:
instead and read the instructions for the JS Commands.
For many more commands you should check the JS Commands), which covers many more like app-import
, layout
, develop
, contenttype
, contentitems
, app
, zone
, more
etc.
More About the Prefill
Basically this is a .net object which will be serialized to JSON and used to prefill a new item. Usually you'll just create a new, anonymous object like new { Title = "xyz", Date = ... }
.
example
@Edit.Toolbar(actions: "new",
contentType: "BlogPost",
prefill: new { Title = "Hello", Color = "red", Link = "page:" + Dnn.Tab.TabID } )
This example will prefill the title, the color and in the link field add a reference to the current page.
Multiple Entities Prefil
For this you must simply provide an array of strings, like this:
@Edit.Toolbar(actions: "new", contentType: "BlogPost", prefill: new { Tags = new string[] {"08387a10-1aac-494a-9eb5-1383e31490eb","b498a694-047a-4e51-a285-50f9a64edda1"} })
Styling the Toolbar
As of now there are only limited stying functions:
Floating the Toolbar
This happens automatically, if a surrounding HTML-tag has a class "sc-element". more...
What Really Happens with the toolbar
As previously noted, the toolbar actually puts some html/js into the page, which the javascript $2sxc object will pick up and work with. Quite a lot happens on the client, and that will be documented some other day. Here just the short version:
- js runs, picks up Toolbars
- jc reviews DOM to see what context it's in (either the module-instance or an inner-content)
- js generates buttons
- if a button is clicked, an action-manager then executes the correct action on the correct item
Older @Content.Toolbar Syntax Is Deprecated
Note: there was an older @SomeContentItem.Toolbar
syntax and this still works, but we ran into architecture issues, so we decided to place all advanced functions into the Edit.Toolbar(...)
method. This is the way to go from now on, the old syntax will continue to work but is not recommended any more.
Read also
Demo App and further links
More links: Description of the feature on 2sxc docs
History
- .Toolbar() Introduced in 2sxc 8.04
- .TagToolbar() introduced in 2sxc 9.40