Oqtane Tutorials

Koi Tutorials

Tutorial Home › Koi

Koi - Auto-Add Bootstrap5 if missing

#3 Koi - Auto-Add Bootstrap5 but inform Admin

Koi - Switch between template files

Requirements

2sxc 12.08

Resources

PageService

Show Warning if Bootstrap5 not Included or Unclear

In this example, we'll assume your template needs Bootstrap5 as the preferred CSS framework. And we'll also assume, that you don't want to auto-include it, but instead want to warn the admin, to ensure he can correct the situation. This is what you want to do, when you believe the Admin should optimize the output, and prevent accidentally loading Bootstrap multiple times.

This page shows how to handle these problems with almost no code. We'll also show what you can do, so only admins see the message.
BTW: to see that this works, try switching the theme of this page to one without a koi.json or one with a different css-framework.

Output

The result is invisible.

@{
  var bsCheck = CreateInstance("../shared/Bootstrap5.cs");
  bsCheck.EnsureBootstrap5();
}
@bsCheck.WarnAboutMissingOrUnknownBootstrap()

Source Code of ../shared/Bootstrap5.csusing ToSic.Razor.Blade;

public class Bootstrap5 : Custom.Hybrid.Code14
{
  // if the theme framework is not BS4, just activate/load it from the WebResources
  // this solves both the cases where its unknown, or another framework
  public void EnsureBootstrap5()
  {
    if (Kit.Css.IsUnknown) {
      Kit.Page.Activate("Bootstrap5");
    }
  }

  // show warning for admin if koi.json is missing
  public dynamic WarnAboutMissingOrUnknownBootstrap() {
    if (Kit.Css.IsUnknown && CmsContext.User.IsSiteAdmin) {
      return Tag.Div().Class("alert alert-warning").Wrap(
        Connect.Koi.Messages.CssInformationMissing,
        Tag.Br(),
        Connect.Koi.Messages.OnlyAdminsSeeThis
      );
    }
    return null;
  }
}

Koi - Auto-Add Bootstrap5 if missing

#3 Koi - Auto-Add Bootstrap5 but inform Admin

Koi - Switch between template files

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


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
    <div class="row">
      <div class="col-lg-8">
        <h2>Show Warning if Bootstrap5 not Included or Unclear</h2>
        <p>
          In this example, we'll assume your template needs <a href="https://getbootstrap.com/" target="_blank">Bootstrap5</a> as the preferred CSS framework. And we'll also assume, that you don't want to @Sys.TutLink("auto-include it", "koi110"), but instead want to warn the admin, to ensure he can correct the situation. This is what you want to do, when you believe the Admin should optimize the output, and prevent accidentally loading Bootstrap multiple times. 
        </p>
        <p>
          This page shows how to handle these problems with almost no code. We'll also show what you can do, so only admins see the message. <br>
          <em>BTW: to see that this works, try switching the theme of this page to one without a <code>koi.json</code> or one with a different css-framework.</em>
        </p>
      </div>
      <div class="col-lg-4">
        <img loading="lazy" src="@App.Path/koi/assets/koi.png?w=200">
      </div>
    </div>
  </div>
</div>

  @{
    var bsCheck = CreateInstance("../shared/Bootstrap5.cs");
    bsCheck.EnsureBootstrap5();
  }
  @bsCheck.WarnAboutMissingOrUnknownBootstrap()



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })