Skip to main content
Home  › ... 2sxc Apps
Error Showing Content - please login as admin for details.
Error Showing Content - please login as admin for details.

Customize Edit UI/UX

Tutorial Home
Introduction Toolbars
#2 Customize Toolbars
Customize Toolbars Workflows

2sxc Toolbar Customization

Since you can do so many things customizing the toolbar, we created a bunch of small examples for you. Note that we are basically providing a list of commands how the toolbar should be modified. You should also read the docs to learn more about this.
Resources
Important: Normally only editors see these toolbars, so clicking on the buttons won't work, except for the ellipsis (…).
Hover over the various boxes to see the result - like this:

Initial Setup, No Configuration

New syntax

@Kit.Toolbar.Default() without any Data

Old syntax

@Edit.TagToolbar() without any Data

New syntax

@Kit.Toolbar.Default(Content) with a pre-set content-item
@Kit.Toolbar.Default().For(Content) with a content-item which can be set later

Old syntax

@Edit.TagToolbar(Content) with a content-item

Add / Remove Buttons

New syntax: Add two buttons 


<div class="alert alert-success" @Kit.Toolbar.Default(Content).Edit().New()>
  <h3>New syntax: Add two buttons </h3>
  
</div>

Old syntax: Add two buttons 


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "+edit", "+new"})>
  <h3>Old syntax: Add two buttons </h3>
  
</div>

New syntax: Add new button with colors 


<div class="alert alert-success" @Kit.Toolbar.Default(Content).New(ui:"color=pink,black")>
  <h3>New syntax: Add <code>new</code> button with colors </h3>
  
</div>

Old syntax: Add new button with colors 


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "+new&color=pink,black"})>
  <h3>Old syntax: Add <code>new</code> button with colors </h3>
  
</div>

New syntax: Add new at the end of button-list


<div class="alert alert-success" @Kit.Toolbar.Default(Content).New(ui: "pos=-0")>
  <h3>New syntax: Add <code>new</code> at the end of button-list</h3>
  
</div>

Old syntax: Add new at the end of button-list


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "+new&pos=-0"})>
  <h3>Old syntax: Add <code>new</code> at the end of button-list</h3>
  
</div>

New syntax: Remove more button


@{
  var moreButtonToolbar = Kit.Toolbar.Default().Settings(autoAddMore:"never");
}
<div class="alert alert-success" @moreButtonToolbar.For(Content)>
  <h3>New syntax: Remove <code>more</code> button</h3>
  
</div>

Old syntax: Remove more button


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "-more" })>
  <h3>Old syntax: Remove <code>more</code> button</h3>
  
</div>

New syntax: Use empty toolbar template and add edit


<div class="alert alert-success" @Kit.Toolbar.Empty(Content).Edit()>
  <h3>New syntax: Use empty toolbar template and add <code>edit</code></h3>
  
</div>

Old syntax: Use empty toolbar template and add edit


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "toolbar=empty", "+edit"})>
  <h3>Old syntax: Use empty toolbar template and add <code>edit</code></h3>
  
</div>

Modify a button

New syntax: Edit button is now red


<div class="alert alert-success" @Kit.Toolbar.Default().Edit("-").Edit(ui:"color=red").For(Content)>
  <h3>New syntax: Edit button is now red</h3>
  
</div>

Old syntax: Edit button is now red


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "%edit&color=red"})>
  <h3>Old syntax: Edit button is now red</h3>
  
</div>

New syntax: New BlogPost is red, Category is green


@{
  var categoryButtonsToolbar = Kit.Toolbar.Default()
    .New("BlogPost", ui:"color=red&title=Blog-Post")
    .New("Category", ui:"color=green&title=Category");
}
<div class="alert alert-success" @categoryButtonsToolbar.For(Content)>
  <h3>New syntax: New <code>BlogPost</code> is red, <code>Category</code> is green</h3>
  
</div>

Old syntax: New BlogPost is red, Category is green


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "+new&color=red&title=Blog-Post?contentType=BlogPost",
  "+new&color=green&title=Category?contentType=Category",
})>
  <h3>Old syntax: New <code>BlogPost</code> is red, <code>Category</code> is green</h3>

</div>

New syntax: Always show Delete

Note that you'll have to hit the ellipsis a few times to see it.

<div class="alert alert-success" @Kit.Toolbar.Default().Delete().For(Content)>
  <h3>New syntax: Always show <code>Delete</code></h3>
  <div>Note that you'll have to hit the ellipsis a few times to see it.</div>
  
</div>

Old syntax: Always show Delete

Note that you'll have to hit the ellipsis a few times to see it.

<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "%delete&show=true"})>
  <h3>Old syntax: Always show <code>Delete</code></h3>
  <div>Note that you'll have to hit the ellipsis a few times to see it.</div>
  
</div>

Button Groups

New syntax: Add a button-group just for my buttons (v14.07.05+)


@{
  var buttonGroupToolbar = Kit.Toolbar.Default()
    .Group() // new in v14.07.05
    .New("BlogPost",ui:"color=red&title=Blog-Post")
    .New("Category", ui:"color=green&title=Category");
}
<div class="alert alert-success" @buttonGroupToolbar.For(Content)>
  <h3>New syntax: Add a button-group just for my buttons (v14.07.05+)</h3>
  
</div>

Old syntax: Add a button-group just for my buttons


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "+group=my",
  "+new&group=my&color=red&title=Blog-Post?contentType=BlogPost",
  "+new&group=my&color=green&title=Category?contentType=Category",
})>
  <h3>Old syntax: Add a button-group just for my buttons</h3>
  
</div>

New syntax: Add two button-groups


@{
  var multipleGroupsToolbar = Kit.Toolbar.Default()
    .Group()
    .New("BlogPost", ui:"color=red&title=Blog-Post")
    .Group()
    .New("Category", ui:"color=green&title=Category");
}
<div class="alert alert-success" @multipleGroupsToolbar.For(Content)>
  <h3>New syntax: Add two button-groups</h3>
  
</div>

Old syntax: Add two button-groups


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "+group=my1",
  "+new&group=my1&color=red&title=Blog-Post?contentType=BlogPost",
  "+group=my2",
  "+new&group=my2&color=green&title=Category?contentType=Category",
})>
  <h3>Old syntax: Add two button-groups</h3>
  
</div>

Hover Behavior

New syntax: Hover Left


<div class="alert alert-success" @Kit.Toolbar.Default().Settings(hover:"left").For(Content)>
  <h3>New syntax: Hover Left</h3>
  
</div>

Old syntax: Hover Left


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "settings&hover=left",
})>
  <h3>Old syntax: Hover Left</h3>
  
</div>

New syntax: Hover Left and more button to the left


<div class="alert alert-success" @Kit.Toolbar.Default().Settings(autoAddMore: "start",hover: "left").For(Content)>
  <h3>New syntax: Hover Left and <code>more</code> button to the left</h3>
  
</div>

Old syntax: Hover Left and more button to the left


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "settings&hover=left&autoAddMore=start",
})>
  <h3>Old syntax: Hover Left and <code>more</code> button to the left</h3>
  
</div>

Custom JavaScript Code

New syntax: Just call showMsg1() 


<div class="alert alert-success" @Kit.Toolbar.Default().Code("showMsg1",ui:"title=Show%20Message").For(Content)>
  <h3>New syntax: Just call <code>showMsg1()</code> </h3>
  
</div>

Old syntax: Just call showMsg1() 


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "custom&title=Show%20Message?call=showMsg1",
})>
  <h3>Old syntax: Just call <code>showMsg1()</code> </h3>
  
</div>

New syntax: Just call showMsg2() and use the parameter id=42 


@{
  var customJsParamsToolbar = Kit.Toolbar.Default().Code("showMsg2", parameters:"id=42", ui:"title=Show%20Message");
}
<div class="alert alert-success" @customJsParamsToolbar.For(Content)>
  <h3>New syntax: Just call <code>showMsg2()</code> and use the parameter <code>id=42</code> </h3>

</div>

Old syntax: Just call showMsg2() and use the parameter id=42 


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "custom&title=Show%20Message?call=showMsg2&id=42",
})>
  <h3>Old syntax: Just call <code>showMsg2()</code> and use the parameter <code>id=42</code> </h3>

</div>

More Stuff

You can do much more - like change icons, call call-parameters etc. Read the how-to and the specs for this.
Introduction Toolbars
#2 Customize Toolbars
Customize Toolbars Workflows

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code 

@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->

<h2>Initial Setup, No Configuration</h2>

<div class="alert alert-success" @Kit.Toolbar.Default()>
  <h3>New syntax</h3>
  <div><code>@@Kit.Toolbar.Default()</code> without any Data</div>
</div>
<div class="alert alert-secondary" @Kit.Edit.TagToolbar()>
  <h3>Old syntax</h3>
  <div><code>@@Edit.TagToolbar()</code> without any Data</div>
</div>

<div class="alert alert-success" @Kit.Toolbar.Default(Content)>
  <h3>New syntax</h3>
  <div><code>@@Kit.Toolbar.Default(Content)</code> with a pre-set content-item</div>
  <div><code>@@Kit.Toolbar.Default().For(Content)</code> with a content-item which can be set later</div>
</div>

<div class="alert alert-secondary" @Edit.TagToolbar(Content)>
  <h3>Old syntax</h3>
  <div><code>@@Edit.TagToolbar(Content)</code> with a content-item</div>
</div>

<hr>

<h2>Add / Remove Buttons</h2>

<div class="alert alert-success" @Kit.Toolbar.Default(Content).Edit().New()>
  <h3>New syntax: Add two buttons </h3>
  
</div>



<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "+edit", "+new"})>
  <h3>Old syntax: Add two buttons </h3>
  
</div>




<div class="alert alert-success" @Kit.Toolbar.Default(Content).New(ui:"color=pink,black")>
  <h3>New syntax: Add <code>new</code> button with colors </h3>
  
</div>


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "+new&color=pink,black"})>
  <h3>Old syntax: Add <code>new</code> button with colors </h3>
  
</div>



<div class="alert alert-success" @Kit.Toolbar.Default(Content).New(ui: "pos=-0")>
  <h3>New syntax: Add <code>new</code> at the end of button-list</h3>
  
</div>


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "+new&pos=-0"})>
  <h3>Old syntax: Add <code>new</code> at the end of button-list</h3>
  
</div>


@{
  var moreButtonToolbar = Kit.Toolbar.Default().Settings(autoAddMore:"never");
}
<div class="alert alert-success" @moreButtonToolbar.For(Content)>
  <h3>New syntax: Remove <code>more</code> button</h3>
  
</div>


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "-more" })>
  <h3>Old syntax: Remove <code>more</code> button</h3>
  
</div>



<div class="alert alert-success" @Kit.Toolbar.Empty(Content).Edit()>
  <h3>New syntax: Use empty toolbar template and add <code>edit</code></h3>
  
</div>


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "toolbar=empty", "+edit"})>
  <h3>Old syntax: Use empty toolbar template and add <code>edit</code></h3>
  
</div>


<hr>

<h2>Modify a button</h2>

<div class="alert alert-success" @Kit.Toolbar.Default().Edit("-").Edit(ui:"color=red").For(Content)>
  <h3>New syntax: Edit button is now red</h3>
  
</div>



<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "%edit&color=red"})>
  <h3>Old syntax: Edit button is now red</h3>
  
</div>



@{
  var categoryButtonsToolbar = Kit.Toolbar.Default()
    .New("BlogPost", ui:"color=red&title=Blog-Post")
    .New("Category", ui:"color=green&title=Category");
}
<div class="alert alert-success" @categoryButtonsToolbar.For(Content)>
  <h3>New syntax: New <code>BlogPost</code> is red, <code>Category</code> is green</h3>
  
</div>


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "+new&color=red&title=Blog-Post?contentType=BlogPost",
  "+new&color=green&title=Category?contentType=Category",
})>
  <h3>Old syntax: New <code>BlogPost</code> is red, <code>Category</code> is green</h3>

</div>



<div class="alert alert-success" @Kit.Toolbar.Default().Delete().For(Content)>
  <h3>New syntax: Always show <code>Delete</code></h3>
  <div>Note that you'll have to hit the ellipsis a few times to see it.</div>
  
</div>


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { "%delete&show=true"})>
  <h3>Old syntax: Always show <code>Delete</code></h3>
  <div>Note that you'll have to hit the ellipsis a few times to see it.</div>
  
</div>


<hr>

<h2>Button Groups</h2>

@{
  var buttonGroupToolbar = Kit.Toolbar.Default()
    .Group() // new in v14.07.05
    .New("BlogPost",ui:"color=red&title=Blog-Post")
    .New("Category", ui:"color=green&title=Category");
}
<div class="alert alert-success" @buttonGroupToolbar.For(Content)>
  <h3>New syntax: Add a button-group just for my buttons (v14.07.05+)</h3>
  
</div>


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "+group=my",
  "+new&group=my&color=red&title=Blog-Post?contentType=BlogPost",
  "+new&group=my&color=green&title=Category?contentType=Category",
})>
  <h3>Old syntax: Add a button-group just for my buttons</h3>
  
</div>



@{
  var multipleGroupsToolbar = Kit.Toolbar.Default()
    .Group()
    .New("BlogPost", ui:"color=red&title=Blog-Post")
    .Group()
    .New("Category", ui:"color=green&title=Category");
}
<div class="alert alert-success" @multipleGroupsToolbar.For(Content)>
  <h3>New syntax: Add two button-groups</h3>
  
</div>


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "+group=my1",
  "+new&group=my1&color=red&title=Blog-Post?contentType=BlogPost",
  "+group=my2",
  "+new&group=my2&color=green&title=Category?contentType=Category",
})>
  <h3>Old syntax: Add two button-groups</h3>
  
</div>


<hr>

<h2>Hover Behavior</h2>


<div class="alert alert-success" @Kit.Toolbar.Default().Settings(hover:"left").For(Content)>
  <h3>New syntax: Hover Left</h3>
  
</div>


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "settings&hover=left",
})>
  <h3>Old syntax: Hover Left</h3>
  
</div>



<div class="alert alert-success" @Kit.Toolbar.Default().Settings(autoAddMore: "start",hover: "left").For(Content)>
  <h3>New syntax: Hover Left and <code>more</code> button to the left</h3>
  
</div>


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "settings&hover=left&autoAddMore=start",
})>
  <h3>Old syntax: Hover Left and <code>more</code> button to the left</h3>
  
</div>


<hr>

<h2>Custom JavaScript Code</h2>


<div class="alert alert-success" @Kit.Toolbar.Default().Code("showMsg1",ui:"title=Show%20Message").For(Content)>
  <h3>New syntax: Just call <code>showMsg1()</code> </h3>
  
</div>


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "custom&title=Show%20Message?call=showMsg1",
})>
  <h3>Old syntax: Just call <code>showMsg1()</code> </h3>
  
</div>



@{
  var customJsParamsToolbar = Kit.Toolbar.Default().Code("showMsg2", parameters:"id=42", ui:"title=Show%20Message");
}
<div class="alert alert-success" @customJsParamsToolbar.For(Content)>
  <h3>New syntax: Just call <code>showMsg2()</code> and use the parameter <code>id=42</code> </h3>

</div>


<div class="alert alert-secondary" @Edit.TagToolbar(Content, toolbar: new[] { 
  "custom&title=Show%20Message?call=showMsg2&id=42",
})>
  <h3>Old syntax: Just call <code>showMsg2()</code> and use the parameter <code>id=42</code> </h3>

</div>



<script>
  function showMsg1() {
    alert('hello from my button!');
  }
  function showMsg2(context, event) {
    console.log(context, event);
    alert('hello from my Message - got this id:' + context.button.command.params.id);
  }
</script>

<hr>
<h2>More Stuff</h2>
<div>
  You can do much more - like change icons, call call-parameters etc. 
  Read the 
  <a href="https://docs.2sxc.org/how-to/customize-edit-ux/toolbars.html" target="_blank">how-to</a> and the 
  <a href="https://docs.2sxc.org/specs/cms/toolbars/toolbar-builder.html" target="_blank">specs</a> for this.
</div>

<!-- unimportant stuff, hidden -->