Toolbars Tutorials

#1 2sxc Toolbar Customization

Resources

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.

Important: Normally only editors see these toolbars, so clicking on the buttons won't work, except for the ellipsis (…).
The toolbars would usually only appear on hover, but the Tutorial runs in Demo-Mode so you can see them right away. The old samples still only work on hover.
Hover over the various boxes to see the result - like this:

hover-example

The samples can differ based on your Razor base class or if you're running an old version.
Switch to Typed (2sxc 16+) Switch to Dynamic (Razor14 or below) Selected: Pre Razor12

Basic Toolbars Without Special Configuration

⬇️ Result | Source ➡️

Old syntax

@Edit.TagToolbar() without any Data

@inherits Custom.Hybrid.Razor12
<div class="alert alert-light" 
  @Edit.TagToolbar()>
  <h3>Old syntax</h3>
  <div><code>@@Edit.TagToolbar()</code> 
    without any Data
  </div>
</div>

⬇️ Result | Source ➡️

Old syntax

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

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

Add / Remove Buttons

⬇️ Result | Source ➡️

Add two buttons

@inherits Custom.Hybrid.Razor12
<div class="alert alert-light" 
  @Edit.TagToolbar(Content, toolbar: new[] { "+edit", "+new"})>
  <h3>Add two buttons </h3>
</div>

⬇️ Result | Source ➡️

Add `new` button with colors

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

⬇️ Result | Source ➡️

Add `new` at the end of button-list

@inherits Custom.Hybrid.Razor12
<div class="alert alert-light" 
@Edit.TagToolbar(Content, toolbar: new[] 
  { "+new&pos=-1"}
)>
  <h3>Add <code>new</code> 
  at the end of button-list
</h3>
</div>

⬇️ Result | Source ➡️

Remove `more` button

@inherits Custom.Hybrid.Razor12
<div class="alert alert-light"
   @Edit.TagToolbar(Content, toolbar: new[] { "-more" })>
  <h3>Remove <code>more</code> button</h3>
</div>

⬇️ Result | Source ➡️

Use empty toolbar template and add `edit`

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

Add Buttons with SVG Icons (v14.08+)

We've introduced a new feature to allow custom SVG icons for buttons.

⬇️ Result | Source ➡️

This tutorial doesn't exist for Pre12. The feature probably doesn't work in this old API.
Consider upgrading to a newer version of the API.

We've introduced a new feature to allow add notes to buttons - which we'll demo with the new info button. Mouse over it to see the effect.

⬇️ Result | Source ➡️

This tutorial doesn't exist for Pre12. The feature probably doesn't work in this old API.
Consider upgrading to a newer version of the API.

Modify a button

When we modify a button, we don't add one, but change the look or behavior of an existing button.

⬇️ Result | Source ➡️

Edit button is now red

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

⬇️ Result | Source ➡️

New `BlogPost` is red, `Category` is green

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

⬇️ Result | Source ➡️

Always show `Delete`

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

@inherits Custom.Hybrid.Razor12

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

Ways to provide the `ui`, `parameters`, `prefill`

Most buttons can have a ui and a parameters parameter. Some also have a prefill. In simple cases you will just use a string to configure this, but in more advanced cases it's easier to use an object.

Objects and strings can also be merged with other objects and strings. A good reason to do this is to prepare a complex ui/parameters/prefill object, and then use it in a loop where you may want small differences in the buttons of each toolbar.

Note that all the following examples use the ui parameter as it's easy to see the effect. But the behavior is the same for parameters and prefill.

⬇️ Result | Source ➡️

This tutorial doesn't exist for Pre12. The feature probably works but it's a very old API.
Consider upgrading to a newer version of the API.

⬇️ Result | Source ➡️

This tutorial doesn't exist for Pre12. The feature probably doesn't work in this old API.
Consider upgrading to a newer version of the API.

⬇️ Result | Source ➡️

This tutorial doesn't exist for Pre12. The feature probably works but it's a very old API.
Consider upgrading to a newer version of the API.

⬇️ Result | Source ➡️

This tutorial doesn't exist for Pre12. The feature probably doesn't work in this old API.
Consider upgrading to a newer version of the API.

⬇️ Result | Source ➡️

This tutorial doesn't exist for Pre12. The feature probably works but it's a very old API.
Consider upgrading to a newer version of the API.

Data Buttons with Filters

Data buttons open the management view with a list of items to manage. You will often want to filter what to open - like only open items which have a certain property or have one of 3 tags.
Important: These samples show how to do it, but it won't work in anonymous mode. To see it in full action, you will need to install the tutorial and test it logged in as Admin.

Button Groups

⬇️ Result | Source ➡️

Add a button-group just for my buttons

@inherits Custom.Hybrid.Razor12
<div class="alert alert-light" 
  @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>Add a button-group just for my buttons</h3>
</div>

⬇️ Result | Source ➡️

Old syntax: Add two button-groups

@inherits Custom.Hybrid.Razor12
<div class="alert alert-light" 
  @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

⬇️ Result | Source ➡️

Hover Left

@inherits Custom.Hybrid.Razor12
<div class="alert alert-light" 
  @Edit.TagToolbar(Content, toolbar: new[] { 
  "settings&hover=left",
})>
  <h3>Hover Left</h3>
</div>

⬇️ Result | Source ➡️

Old syntax: Hover Left and `more` button to the right

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

Custom JavaScript Code

⬇️ Result | Source ➡️

Just call `showMsg1()`

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

<script>
  function showMsg1() {
    alert('hello from my button!');
  }
</script>

⬇️ Result | Source ➡️

Just call `showMsg2()` and use the parameter `id=42`

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

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

App.Data WebApi Examples

#1 2sxc Toolbar Customization

Advanced Toolbar Customizations

Toolbars Tutorials

Resources

2sxc Toolbar Customization

Basic Toolbars Without Special Configuration

Initial Setup, No Configuration

⬇️ Result | Source ➡️

Old syntax

Initial Setup - for current Item

⬇️ Result | Source ➡️

Old syntax

Add / Remove Buttons

Add two buttons

⬇️ Result | Source ➡️

Add two buttons

Add new button with colors

⬇️ Result | Source ➡️

Add new button with colors

Add new at the end of button-list

⬇️ Result | Source ➡️

Add new at the end of button-list

Remove more button

⬇️ Result | Source ➡️

Remove more button

Use empty toolbar template and add edit

⬇️ Result | Source ➡️

Use empty toolbar template and add edit

Add Buttons with SVG Icons (v14.08+)

Button with SVG Icon

⬇️ Result | Source ➡️

Add Info-Button with Note (v15.08+)

⬇️ Result | Source ➡️

Modify a button

Edit button is now red

⬇️ Result | Source ➡️

Edit button is now red

New BlogPost is red, Category is green

⬇️ Result | Source ➡️

New BlogPost is red, Category is green

Always show Delete

⬇️ Result | Source ➡️

Always show Delete

Ways to provide the ui, parameters, prefill

UI Toolbar Button Parameters String

⬇️ Result | Source ➡️

UI Toolbar Button Parameters Objects

⬇️ Result | Source ➡️

ui-toolbars-button-ui-form-prefill

⬇️ Result | Source ➡️

Form-Parameters for the Edit-UI

⬇️ Result | Source ➡️

Passing Parameters to Buttons / Actions

⬇️ Result | Source ➡️

Data Buttons with Filters

Button Groups

ui-toolbars-button-groups-1

⬇️ Result | Source ➡️

Add a button-group just for my buttons

ui-toolbars-button-groups-2

⬇️ Result | Source ➡️

Old syntax: Add two button-groups

Hover Behavior

ui-toolbars-button-hover-1

⬇️ Result | Source ➡️

Hover Left

ui-toolbars-button-hover-2

⬇️ Result | Source ➡️

Old syntax: Hover Left and more button to the right

Custom JavaScript Code

ui-toolbars-button-custom-js-1

⬇️ Result | Source ➡️

Just call showMsg1()

ui-toolbars-button-custom-js-2

⬇️ Result | Source ➡️

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

Add `new` button with colors

Add `new` at the end of button-list

Remove `more` button

Use empty toolbar template and add `edit`

New `BlogPost` is red, `Category` is green

Always show `Delete`

Ways to provide the `ui`, `parameters`, `prefill`

Old syntax: Hover Left and `more` button to the right

Just call `showMsg1()`

Just call `showMsg2()` and use the parameter `id=42`