Oqtane Tutorials
Oqtane Tutorials

Toolbars Tutorials

Tutorial Home › Toolbars
App.Data WebApi Examples
#1 2sxc Toolbar Customization
Advanced Toolbar Customizations
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

Important: The feature "Public Use of Edit Form" is disabled

If you want this demo to run for anonymous users you would need it. Register your site on patrons.2sxc.org to get access to the feature.
The samples can differ based on your Razor base class or if you're running an old version.
Switch to Typed (2sxc 16+) Selected: Dynamic (Razor14 or below) Switch to Pre Razor12

Basic Toolbars Without Special Configuration

⬇️ Result | Source ➡️

New syntax

@Kit.Toolbar.Default() without any Data 
@inherits Custom.Hybrid.Razor14

<div class="alert alert-light" 
  @Kit.Toolbar.Default()>
  <h3>New syntax</h3>
  <div><code>@@Kit.Toolbar.Default()</code> 
    without any Data
  </div>
</div>

⬇️ Result | Source ➡️

New syntax

@Kit.Toolbar.Default(Content) with a pre-set content-item

New syntax

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

@inherits Custom.Hybrid.Razor14

<div class="alert alert-light" 
  @Kit.Toolbar.Default(Content)>
  <h3>New syntax</h3>
  <p>
    <code>@@Kit.Toolbar.Default(Content)</code>
    with a pre-set content-item
  </p>
</div>

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

Add / Remove Buttons

⬇️ Result | Source ➡️

2dm AppCode.Tutorial.Sys

Add two buttons 

@inherits Custom.Hybrid.Razor14

<h1>2dm @DynamicModel.Sys</h1>
<div class="alert alert-light" 
  @Kit.Toolbar.Default(Content).Edit().New()>
  <h3>Add two buttons </h3>
</div>

⬇️ Result | Source ➡️

New syntax (tweak): Add new button with colors

(string): Add new button with colors

(object): Add new button with colors 

@inherits Custom.Hybrid.Razor14

<div class="alert alert-light" 
  @Kit.Toolbar.Default().New(tweak: b=>b.Color("pink,black"))
      .For(Content)>
  <h3>New syntax (tweak): 
    Add <code>new</code> button with colors 
  </h3>
</div>

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

<div class="alert alert-light" 
@Kit.Toolbar.Default(Content).New(ui: new {
  color = "blue,white"
  })>
  <h3>(object):
    Add <code>new</code> button with colors 
  </h3>
</div>

⬇️ Result | Source ➡️

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

Add new at the end of button-list 

@inherits Custom.Hybrid.Razor14

<div class="alert alert-light" 
@Kit.Toolbar.Default().New(tweak: b=>b.Position(-1))
  .For(Content)>
  <h3>New <em>tweak</em> syntax:
    Add <code>new</code> at the end of button-list
  </h3>
</div>
<div class="alert alert-light" 
  @Kit.Toolbar.Default(Content).New(ui: "pos=-1")>
  <h3>Add <code>new</code> 
    at the end of button-list
  </h3> 
</div>

⬇️ Result | Source ➡️

Remove more button

@inherits Custom.Hybrid.Razor14

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

⬇️ Result | Source ➡️

Use empty toolbar template and add edit 

@inherits Custom.Hybrid.Razor14

<div class="alert alert-light" 
  @Kit.Toolbar.Empty(Content).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 ➡️

(tweak): Button with SVG Icon

(only): Button with SVG Icon and color

(tweak): Button with SVG Icon

(only): Button with SVG Icon and color 

@inherits Custom.Hybrid.Razor14

@{
  // icon from https://fonts.google.com/icons?icon.query=func
  var svgIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='M12 40v-3.15L25.75 24 12 11.15V8h24v5H19.8l11.75 11L19.8 35H36v5Z'/></svg>";
}
<div class="alert alert-light" 
  @Kit.Toolbar.Empty().New(tweak: b=>b.Icon(svgIcon)).For(Content)>
  <h3>(tweak): Button with SVG Icon </h3>
</div>

<div class="alert alert-light" 
  @Kit.Toolbar.Empty().New(tweak: b=>b.Icon(svgIcon).Color("darkgreen"))
    .For(Content)>
  <h3>(only): Button with SVG Icon and color </h3>
</div>

@{
  var uiWithSvgIcon = new {
    Icon = svgIcon
  };
}
<div class="alert alert-light" 
  @Kit.Toolbar.Empty(Content).New(ui: uiWithSvgIcon)>
  <h3>(tweak): Button with SVG Icon </h3>
</div>

@{
  // icon from https://fonts.google.com/icons?icon.query=func
  var uiSvgIconColored = new {
    Icon = svgIcon,
    color = "darkgreen"
  };
}
<div class="alert alert-light" 
  @Kit.Toolbar.Empty(Content).New(ui: uiSvgIconColored)>
  <h3>(only): Button with SVG Icon and color </h3>
</div>

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 ➡️

New syntax (tweak): Button with SVG Icon 

@inherits Custom.Hybrid.Razor14

@{
  var toolbarWithInfoAndNotes = Kit.Toolbar.Empty()
    .Info(link: "https://www.2sxc.org/", 
      tweak: b=>b.Note("This is a post-it info. Click to visit 2sxc.org",
        background: "yellow"))
    .New(tweak: b=>b.Note("This is a cool note"))
    .For(Content); 
}
<div class="alert alert-light" 
  @toolbarWithInfoAndNotes>
  <h3>New syntax (tweak): 
    Button with SVG Icon 
  </h3>
</div>

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 ➡️

(tweak): Edit button is now red

Edit button is now red

@inherits Custom.Hybrid.Razor14

<div class="alert alert-light"
  @Kit.Toolbar.Default().Edit("-").Edit(tweak: b=>b.Color("red"))
    .For(Content)>
  <h3>(tweak): Edit button is now red</h3>
</div>

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

⬇️ Result | Source ➡️

(tweak): New BlogPost is red, Category is green

New BlogPost is red, Category is green 

@inherits Custom.Hybrid.Razor14

@{
  var categoryButtonsTweak = Kit.Toolbar.Default()
    .New("BlogPost", 
      tweak: b=>b.Color("red").Tooltip("Blog-Post"))
    .New("Category",
      tweak: b=>b.Color("green").Tooltip("Category"));
}
<div class="alert alert-light" 
  @categoryButtonsTweak.For(Content)>
  <h3>(tweak): New <code>BlogPost</code> is red,
    <code>Category</code> is green
  </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-light" 
  @categoryButtonsToolbar.For(Content)>
  <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.Razor14

<div class="alert alert-light" 
  @Kit.Toolbar.Default().Delete().For(Content)>
<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 ➡️

ui as inline string

ui as string variable for reuse

ui as string for reuse and merge

Mouse over the buttons to see how we use/merge to ui configurations 

@inherits Custom.Hybrid.Razor14

<div class="alert alert-light" 
  @Kit.Toolbar.Empty(Content).New(ui: "color=orange")>
  <h3><code>ui</code> as inline string </h3>
</div>

@{  var uiReuse = "color=magenta";  }
<div class="alert alert-light" 
  @Kit.Toolbar.Empty(Content).Edit(ui: uiReuse).New(ui: uiReuse)>
  <h3><code>ui</code> as string variable for reuse</h3>
</div>

@{
  var uiShared = "color=magenta&title=Default Title";
  var uiMerged = new object[] { 
    uiShared, "title=Modified Title"
    };
}
<div class="alert alert-light" 
  @Kit.Toolbar.Empty(Content).Edit(ui: uiShared).New(ui: uiMerged)>
  <h3><code>ui</code> as string for reuse and merge</h3>
  <p>Mouse over the buttons to see how we 
    use/merge to ui configurations
  </p>
</div>

⬇️ Result | Source ➡️

ui as inline object

ui as prepared object

ui as prepared object merged with other object

@inherits Custom.Hybrid.Razor14

<div class="alert alert-light" 
  @Kit.Toolbar.Empty(Content).New(ui: new { color = "orange"})>
  <h3><code>ui</code> as inline object </h3>
</div>

@{
  var uiPrepared = new {
    Icon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0z' fill='none'/><path d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z'/></svg>",
    Color = "orange",
    Title = "This is the prepared object"
  };
}
<div class="alert alert-light" 
  @Kit.Toolbar.Empty(Content).New(ui: uiPrepared)>
  <h3><code>ui</code> as prepared object </h3>
</div>

@{
  // this uses uiPrepared from the previous example
  var uiObjMerged = new object[] { uiPrepared, new { Color ="purple"}};
}
<div class="alert alert-light" 
  @Kit.Toolbar.Empty(Content).New(ui: uiPrepared).New(ui: uiObjMerged)>
  <h3><code>ui</code> as prepared object merged with other object</h3>
</div>

⬇️ Result | Source ➡️

prefill on Title

2x prefill on Title and Intro

2x prefill with 1 object

2x prefill with a prepared object 

@inherits Custom.Hybrid.Razor14

<div class="alert alert-light" 
  @Kit.Toolbar.Empty().New("UiToolbarShowAllParameters",
    tweak: t => t.Prefill("Title", "This is a prepared title passed in by the page")
  )>
  <h3><code>prefill</code> on <strong>Title</strong> </h3>
</div>


<div class="alert alert-light" 
  @Kit.Toolbar.Empty().New("UiToolbarShowAllParameters",
    tweak: t => t.Prefill("Title", "This is a prepared title passed in by the page")
      .Prefill("Intro", "this is some random intro")
  )>
  <h3>2x <code>prefill</code> on <strong>Title</strong> and <strong>Intro</strong> </h3>
</div>


<div class="alert alert-light" 
  @Kit.Toolbar.Empty().New("UiToolbarShowAllParameters",
    tweak: t => t.Prefill(new {
      Title = "This is a prepared title passed in by the page",
      Intro = "this is some random intro"
    })
  )>
  <h3>2x <code>prefill</code> with 1 <strong>object</strong> </h3>
</div>


@{
  var pfReuse = new {
    Title = "this prefill was made in a object before",
    Intro = "this is some intro from the premade object"
  };
}
<div class="alert alert-light" 
  @Kit.Toolbar.Empty().New("UiToolbarShowAllParameters", tweak: t => t.Prefill(pfReuse))>
  <h3>2x <code>prefill</code> with a prepared <strong>object</strong> </h3>
</div>

⬇️ Result | Source ➡️

formParameter on demoFormParam for formulas to make decisions

2x formParameters on Title and Intro

2x formParameters with 1 object

2x formParameters with a prepared object 

@inherits Custom.Hybrid.Razor14

<div class="alert alert-light" 
  @Kit.Toolbar.Empty().New("UiToolbarShowAllParameters",
    tweak: t => t.FormParameters("demoFormParam", true)
  )>
  <h3><code>formParameter</code> on <strong>demoFormParam</strong> for formulas to make decisions</h3>
</div>


<div class="alert alert-light" 
  @Kit.Toolbar.Empty().New("UiToolbarShowAllParameters",
    tweak: t => t.FormParameters("demoFormParam", true)
      .FormParameters("theAnswer", 42)
  )>
  <h3>2x <code>formParameters</code> on <strong>Title</strong> and <strong>Intro</strong> </h3>
</div>


<div class="alert alert-light" 
  @Kit.Toolbar.Empty().New("UiToolbarShowAllParameters",
    tweak: t => t.FormParameters(new {
      demoFormParam = true,
      theAnswer = 47
    })
  )>
  <h3>2x <code>formParameters</code> with 1 <strong>object</strong> </h3>
</div>


@{
  var pfReuse = new {
    demoFormParam = true,
    theAnswer = 42000
  };
}
<div class="alert alert-light" 
  @Kit.Toolbar.Empty().New("UiToolbarShowAllParameters", tweak: t => t.FormParameters(pfReuse))>
  <h3>2x <code>formParameters</code> with a prepared <strong>object</strong> </h3>
</div>

⬇️ Result | Source ➡️

parameters for code or other actions

multiple parameters for code or other actions

or without tweak

multiple parameters for code or other actions

@inherits Custom.Hybrid.Razor14

<script>
  // this is the button code that will use the parameter
  function showParameters(data) {
    alert("I got this data: " + JSON.stringify(data));
  }
</script>

<div class="alert alert-light" 
  @Kit.Toolbar.Empty().Code("showParameters",
    tweak: t => t.Parameters("favoriteNumber", 42)
  )>
  <h3><code>parameters</code> for code or other actions</h3>
</div>

<div class="alert alert-light" 
  @Kit.Toolbar.Empty().Code("showParameters",
    tweak: t => t.Parameters(new { favoriteNumber = 42, message = "wow!" })
  )>
  <h3>multiple <code>parameters</code> for code or other actions</h3>
</div>

<h3>or without tweak</h3>
<div class="alert alert-light" 
  @Kit.Toolbar.Empty().Code("showParameters", parameters: new { favoriteNumber = 42, message = "wow!" })>
  <h3>multiple <code>parameters</code> for code or other actions</h3>
</div>

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.

⬇️ Result | Source ➡️

Data button with string filter (tweak)

This will find all books with the title Good Omens

Data button with string filter

This will find all books with the title Good Omens

Data button with object filter

This will find all books with the title Good Omens 

@inherits Custom.Hybrid.Razor14

<div class="alert alert-light" 
  @Kit.Toolbar.Empty().Data("Books", tweak: b=>b.Filter("Title", "Good Omens"))>
  <h3><code>Data</code> button with <em>string</em> 
    <code>filter</code> (tweak) 
  </h3>
  <p>This will find all books with the title
    <em>Good Omens</em>
  </p>
</div>

<div class="alert alert-light" 
  @Kit.Toolbar.Empty().Data("Books", filter: "Title=Good Omens")>
  <h3><code>Data</code> button with <em>string</em> 
    <code>filter</code>
  </h3>
  <p>This will find all books with the title
    <em>Good Omens</em>
  </p>
</div>

<div class="alert alert-light" 
  @Kit.Toolbar.Empty().Data("Books", filter: new { Title = "Good Omens" })>
  <h3><code>Data</code> button with <em>object</em> 
    <code>filter</code> 
  </h3>
  <p>This will find all books with the title 
    <em>Good Omens</em>
  </p>
</div>

⬇️ Result | Source ➡️

Data buttons returning books which has any of 3 authors

Many Data buttons each filtering for one related author 

@inherits Custom.Hybrid.Razor14

@{
  var firstThreeAuthorIds = AsList(App.Data["Persons"])
    .Select(author => author.EntityId)
    .Take(3)
    .ToArray();

  var toolbarTop3 = Kit.Toolbar.Empty()
    .Data("Books", filter: new 
      { Authors = firstThreeAuthorIds }
    );
}
<div class="alert alert-light" @toolbarTop3>
  <h3><code>Data</code> 
    buttons returning books which has any of 3 authors
  </h3>
</div>

@{
  var authorsToolbar = Kit.Toolbar.Empty();
  foreach (var auth in AsList(App.Data["Persons"])) {
    authorsToolbar = authorsToolbar.Data("Books",
      ui: new { Title = "Books by " 
        + auth.FirstName 
        + " " 
        + auth.LastName},
      filter: new { Authors = new int[] 
        { auth.EntityId } 
       }
    );
  }
}
<div class="alert alert-light" @authorsToolbar>
  <h3>Many <code>Data</code> 
    buttons each filtering for one related author
  </h3>
</div>

Button Groups

⬇️ Result | Source ➡️

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

@inherits Custom.Hybrid.Razor14

@{
  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-light" 
  @buttonGroupToolbar.For(Content)>
  <h3>Add a button-group just for 
    my buttons (v14.07.05+)
  </h3>
</div>

⬇️ Result | Source ➡️

Add two button-groups

@inherits Custom.Hybrid.Razor14

@{
  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-light" 
  @multipleGroupsToolbar.For(Content)>
  <h3>Add two button-groups</h3>
</div>

Hover Behavior

⬇️ Result | Source ➡️

Hover Left

@inherits Custom.Hybrid.Razor14

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

⬇️ Result | Source ➡️

New syntax: Hover Left and more button to the right 

@inherits Custom.Hybrid.Razor14

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

Custom JavaScript Code

⬇️ Result | Source ➡️

Just call showMsg1()

@inherits Custom.Hybrid.Razor14

<div class="alert alert-light" 
  @Kit.Toolbar.Default().Code("showMsg1",ui:"title=Show%20Message")
    .For(Content)>
  <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.Razor14

@{
  var customJsParamsToolbar = Kit.Toolbar.Default().Code("showMsg2", parameters:"id=42", ui:"title=Show%20Message");
}
<div class="alert alert-light" 
  @customJsParamsToolbar.For(Content)>
  <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