Docs v1.6.0  /  HTML5 Angular Vue.js React Laravel Laravel + Vue.js Rails Rails + Turbolinks ASP.NET Core ASP.NET Core MVC ASP.NET MVC ASP.NET MVC + Webpack

OTHER

Settings panel Layout helpers

• If you're using compiled assets:

  Copy with replace css, fonts, js and libs directories from the dist directory to your assets/vendor directory.

• If you're using uncompiled sources:

  1. Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

  2. Remove the next files and directories:

     libs/vegas/

  3. Since some extensions were removed from the bootstrap-table package, remove libs/bootstrap-table/ directory and copy new appwork-v1_6_0/src/libs/bootstrap-table/

  4. Copy with replace all SCSS files within css/ and css/rtl/ directories:

     css/*.scss
     css/rtl/*.scss

  5. Copy with replace changed files and directories:

     css/_appwork/
     css/_uikit/
     libs/blueimp-gallery/
     libs/bootstrap-slider/
     libs/dropzone/
     libs/fullcalendar/
     libs/nouislider/
     libs/minicolors/
     libs/photoswipe/
     libs/plyr/
     libs/select2/
     libs/smartwizard/
     libs/sortablejs/
     libs/swiper/
     libs/timepicker/
     libs/typeahead-js/

  6. Update:

     package.json. Diff

  7. Remove node_modules directory and package-lock.json. Then execute npm install

  8. Execute npm run build

Changes in third-party components:

• vegas plugin was excluded from the package.

• fullcalendar changed its API and configuration object:

  Before

  var eventList = [{
    ...
    className: 'fc-event-warning'
  }, {
    ...
    rendering: 'background'
  }];
  
  new Calendar($('#id')[0], {
    ...
    defaultDate: ...,
    eventLimit: ...,
    defaultView: '...',
    dir: 'rtl',
    header: {
      ...
      left: '...',
      right: '...'
    },
    views: {
      dayGrid: {
        eventLimit: ...
      }
    },
  });

  After

  var eventList = [{
    ...
    classNames: 'fc-event-warning'
  }, {
    ...
    display: 'background'
  }];
  
  new Calendar($('#id')[0], {
    ...
    initialDate: ...,
    dayMaxEventRows: ...,
    initialView: '...',
    direction: 'rtl',
    headerToolbar: {
      ...
      start: '...',
      end: '...'
    },
    views: {
      dayGrid: {
        dayMaxEventRows: ...
      }
    },
  });

  For more info see https://fullcalendar.io/docs/upgrading-from-v4

• dropzone configuration is changed.

  Before

  $('#id').dropzone();

  After

  var previewTemplate =
    '<div class="dz-preview dz-file-preview">' +
    '  <div class="dz-details">' +
    '    <div class="dz-thumbnail">' +
    '      <img data-dz-thumbnail>' +
    '      <span class="dz-nopreview">No preview</span>' +
    '      <div class="dz-success-mark"></div>' +
    '      <div class="dz-error-mark"></div>' +
    '      <div class="dz-error-message"><span data-dz-errormessage></span></div>' +
    '      <div class="progress"><div class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div></div>' +
    '    </div>' +
    '    <div class="dz-filename" data-dz-name></div>' +
    '    <div class="dz-size" data-dz-size></div>' +
    '  </div>' +
    '</div>';
              
  $('#id').dropzone({
    previewTemplate: previewTemplate
  });

• smartwizard markup and API are changed.

  Before

  <ul>
    <li><a href="#" class="mb-3">...</a></li>
    ...
  </ul>
  
  <div class="mb-3">
    <div id="smartwizard-1-step-1" class="card animated fadeIn">
      ...
    </div>
  </div>

  After

  <ul class="nav">
    <li><a href="#" class="nav-link mb-3">...</a></li>
    ...
  </ul>
  
  <div class="tab-content mb-3">
    <div id="#" class="tab-pane card" role="tabpanel">
      ...
    </div>
  </div>

  Before

  $el.smartWizard({
    useURLhash: false,
    showStepURLhash: false,
    ...
  })
  .on('leaveStep', function(e, anchorObject, stepNumber, stepDirection) {
    if (stepDirection === 'forward'){ return $el.valid(); }
    return true;
  })
  .on('showStep', function(e, anchorObject, stepNumber, stepDirection) {
    var $btn = $el.find('.btn-finish');
  
    if (stepNumber === 3) {
      $btn.removeClass('hidden');
    } else {
      $btn.addClass('hidden');
    }
  });

  After

  $el.smartWizard({
    enableURLhash: false,
    ...
  })
  .on('leaveStep', function(e, anchorObject, currentStepIndex, nextStepIndex, stepDirection) {
    var $finishBtn = $el.find('.btn-finish');
  
    if (stepDirection === 'forward'){
      var isValid = $el.valid();
  
      if (!isValid) {
        anchorObject.addClass('danger');
      } else {
        anchorObject.removeClass('danger');
  
        if (nextStepIndex === 3) {
          $finishBtn.removeClass('d-none');
        }
      }
  
      return isValid;
    } else {
      $finishBtn.addClass('d-none');
    }
  
    return true;
  })
  .find('> .toolbar .btn:not(.btn-primary)').addClass('btn-secondary');

  For more info see http://techlaboratory.net/jquery-smartwizard

• If you're using compiled assets:

  Copy with replace dist/libs/select2/select2.css.

• If you're using uncompiled sources:

  1. Copy with replace the next files and directories:

     src/css/_appwork/_functions.scss
     src/libs/bootstrap-datepicker/
     src/libs/bootstrap-daterangepicker/
     src/libs/bootstrap-material-datetimepicker/
     src/libs/bootstrap-select/
     src/libs/flatpickr/
     src/libs/growl/
     src/libs/plyr/
     src/libs/select2/
     src/libs/sweetalert2/
     src/libs/timepicker/
     src/libs/typeahead-js/

  2. Execute npm run build

• If you're using compiled assets:

  Copy with replace dist/libs/flatpickr/flatpickr.css.

• If you're using uncompiled sources:

  1. Copy with replace the next file:

     src/libs/flatpickr/flatpickr.scss

  2. Execute npm run build

• If you're using compiled assets:

  Copy with replace css, fonts, js and libs directories from the dist directory to your assets/vendor directory.

• If you're using uncompiled sources:

  1. Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

     Note: Yarn package manager is not reqired anymore.

  2. Remove the next files and directories:

     css/migrate/

  3. Copy new files and directories:

     css/_custom-variables/_appwork-dark.scss
     css/_custom-variables/_features.scss

  4. Since some extensions were removed from the bootstrap-table package, remove libs/bootstrap-table/ directory and copy new appwork-v1_5_0/src/libs/bootstrap-table/

  5. Copy with replace all SCSS files within css/ and css/rtl/ directories:

     css/*.scss
     css/rtl/*.scss

  6. Copy with replace changed files and directories:

     js/bootstrap.js
     js/layout-helpers.js
     js/polyfills.js
     js/sidenav.js
     js/theme-settings.js
     js/_theme-settings/
     css/_appwork/
     css/_theme/
     css/_uikit/
     css/pages/
     libs/autosize/
     libs/block-ui/
     libs/blueimp-gallery/
     libs/bootbox/
     libs/bootstrap-datepicker/
     libs/bootstrap-daterangepicker/
     libs/bootstrap-duallistbox/
     libs/bootstrap-markdown/
     libs/bootstrap-material-datetimepicker/
     libs/bootstrap-maxlength/
     libs/bootstrap-menu/
     libs/bootstrap-select/
     libs/bootstrap-slider/
     libs/bootstrap-sortable/
     libs/bootstrap-tagsinput/
     libs/c3/
     libs/chartist/
     libs/chartjs/
     libs/clipboard/
     libs/cropper/
     libs/d3/
     libs/datatables/
     libs/dragula/
     libs/dropzone/
     libs/eve/
     libs/flatpickr/
     libs/flot/
     libs/flow-js/
     libs/fullcalendar/
     libs/gmaps/
     libs/growl/
     libs/jstree/
     libs/knob/
     libs/ladda/
     libs/mapael/
     libs/markdown/
     libs/masonry/
     libs/minicolors/
     libs/moment/
     libs/morris/
     libs/nestable/
     libs/nouislider/
     libs/numeral/
     libs/perfect-scrollbar/
     libs/photoswipe/
     libs/plyr/
     libs/popper/
     libs/pwstrength-bootstrap/
     libs/quill/
     libs/raphael/
     libs/select2/
     libs/shepherd/
     libs/smartwizard/
     libs/sortablejs/
     libs/sparkline/
     libs/spin/
     libs/spinkit/
     libs/sweetalert2/
     libs/swiper/
     libs/tableexport/
     libs/timepicker/
     libs/toastr/
     libs/typeahead-js/
     libs/validate/
     libs/vanilla-text-mask/
     libs/vegas/

  7. Update:

     gulpfile.js. Diff

     package.json. Diff

     webpack.config.js. Diff

     css/_custom-variables/_libs.scss. Diff

     css/_custom-variables/_pages.scss. Diff

     css/_custom-variables/_uikit.scss. Diff

  8. Edit variables in the css/_custom-variables/_features.scss file according your setup.

     Variable	Feature
     $enable-rtl-support	Set to true to enable RTL mode support, otherwise set to false.
     $enable-light-style	Set to true to enable light (previously default) style support, otherwise set to false.
     $enable-material-style	Set to true to enable material style support, otherwise set to false.
     $enable-dark-style	Set to true to enable dark style support, otherwise set to false.

  9. Remove node_modules directory and then execute npm install

  10. Execute npm run build

• theme-default class is renamed to theme-light.

  Before

  <html lang="en" class="default-style">

  After

  <html lang="en" class="light-style">

• ThemeSettings plugin settings are changed. Use Settings Panel Generator to get updated settings.

• ThemeSettings.setMaterial() method is removed.
  Added ThemeSettings.setStyle(), ThemeSettings.isLightStyle(), ThemeSettings.isMaterialStyle(), ThemeSettings.isDarkStyle() methods.
  See Settings panel docs.

• New style-dependent utility classes, which change its color depending on the current active style:

  • .theme-text-white - White (light or material style) / dark (dark style) text.
  • .theme-text-dark - Dark (light or material style) / white (dark style) text.
  • .theme-bg-white - White (light or material style) / dark (dark style) background.
  • .theme-bg-dark - Dark (light or material style) / white (dark style) background.
  • .theme-border-white - White (light or material style) / dark (dark style) border.
  • .theme-border-dark - Dark (light or material style) / white (dark style) border.

Changes in third-party components:

• plyr changed its initialization method:

  Before

  plyr.setup('#selector', options);

  After

  new Plyr('#selector', options);

• spinkit classes are changed. See https://github.com/tobiasahlin/SpinKit

• SweetAlert's type option is renamed to icon.

  Before

  Swal.fire({
    ...,
    type: 'warning',
  });

  After

  Swal.fire({
    ...,
    icon: 'warning',
  });

1. Update assets.

   • If you're using compiled assets:

     Copy with replace the next files and directories from the dist directory to your assets/vendor:

     css/
     js/
     libs/
     fonts/fontawesome/
     fonts/fontawesome.css
     fonts/ionicons/
     fonts/ionicons.css
     fonts/linearicons/
     fonts/pe-icon-7-stroke/

   • If you're using uncompiled sources:

     1. (Optional) Upgrade Node.js to 10.16 LTS and Yarn.

     2. Webpack config was modified to compile .js files, support of .es6 extension is deprecated and will be removed in the next update. Resulting this changes, you need to rename your *.es6 files to *.js. Also, remove the next directories from your source directory and copy the corresponding ones from the release:

        js/
        libs/bootstrap-material-datetimepicker/
        libs/bootstrap-sortable/
        libs/bootstrap-table/
        libs/bootstrap-tagsinput/
        libs/dropzone/
        libs/perfect-scrollbar/
        libs/photoswipe/
        libs/popper/
        libs/quill/
        libs/sparkline/
        libs/typeahead-js/
        libs/vegas/

     3. Copy with replace changed files and directories:

        css/_appwork/_custom-forms.scss
        css/_appwork/_dropdown.scss
        css/_appwork/_forms.scss
        css/_appwork/_layout.scss
        css/_appwork/_mixins.scss
        css/_appwork/_nav.scss
        css/_appwork/_sidenav.scss
        css/_appwork/_tables.scss
        css/_appwork/_utilities.scss
        libs/autosize/
        libs/block-ui/
        libs/blueimp-gallery/
        libs/bootbox/
        libs/bootstrap-datepicker/
        libs/bootstrap-daterangepicker/
        libs/bootstrap-duallistbox/
        libs/bootstrap-markdown/
        libs/bootstrap-maxlength/
        libs/bootstrap-menu/
        libs/bootstrap-select/
        libs/bootstrap-slider/
        libs/c3/
        libs/chartist/
        libs/chartjs/
        libs/clipboard/
        libs/cropper/
        libs/d3/
        libs/datatables/
        libs/dragula/
        libs/eve/
        libs/flatpickr/
        libs/flot/
        libs/flow-js/
        libs/fullcalendar/
        libs/gmaps/
        libs/growl/
        libs/jstree/
        libs/knob/
        libs/ladda/
        libs/mapael/
        libs/markdown/
        libs/masonry/
        libs/minicolors/
        libs/moment/
        libs/morris/
        libs/nestable/
        libs/nouislider/
        libs/numeral/
        libs/plyr/
        libs/pwstrength-bootstrap/
        libs/raphael/
        libs/select2/
        libs/shepherd/
        libs/smartwizard/
        libs/sortablejs/
        libs/spin/
        libs/sweetalert2/
        libs/swiper/
        libs/tableexport/
        libs/timepicker/
        libs/toastr/
        libs/validate/
        libs/vanilla-text-mask/

     4. Remove the next directories from your source directory:

        libs/bootstrap-multiselect/
        libs/bootstrap-sweetalert/

     5. Update:

        package.json. Diff

        gulpfile.js. Diff

        webpack.config.js. Diff

     6. Execute yarn install --ignore-engines

     7. Execute npm run build

Changes in third-party libraries:

• bootstrap-multiselect plugin was removed.
• bootstrap-sweetalert replaced with original sweetalert2 plugin. API isn't changed.
• Shepherd.js changed its API. See html-demo/assets/js/ui_tour.js for example. https://shepherdjs.dev/docs/tutorial-02-usage.html

• Available extensions list of bootstrap-table package is changed (see vendor/libs/bootstrap-table/extensions):

  Added extensions/cell-input
  Removed extensions/group-by
  Removed extensions/multi-column-toggle
  Removed extensions/multiple-search
  Removed extensions/multiple-selection-row
  Removed extensions/select2-filter
  Removed extensions/tree-column

• If you're using compiled assets:

  Copy with replace the next directories from the dist directory to your assets/vendor:

  libs/bootstrap-sortable/
  libs/flot/
  libs/idletimer/

• If you're using uncompiled sources:

  1. Copy with replace the next directories:

     libs/bootstrap-sortable/
     libs/flot/
     libs/idletimer/

  2. Update:

     package.json. Diff

  3. Execute yarn install

  4. Execute npm run build

• If you're using compiled assets:

  Copy with replace css, fonts, js and libs directories from the dist directory to your assets/vendor directory.

• If you're using uncompiled sources:

  1. (Optional) Upgrade Node.js to 10.15 LTS and Yarn

  2. Remove excluded libraries:

     libs/bootstrap-tour/

  3. Copy new files and directories:

     css/migrate/
     js/polyfills.es6
     libs/flatpickr/
     libs/shepherd/
     libs/sweetalert2/

  4. Since some extensions were removed from the bootstrap-table package, remove libs/bootstrap-table/ directory and copy new appwork-v1_3_0/src/libs/bootstrap-table/

  5. Copy with replace all SCSS files within css/ and css/rtl/ directories:

     css/*.scss
     css/rtl/*.scss

  6. Copy with replace changed files and directories:

     css/_appwork/
     css/_theme/
     css/_uikit/_social.scss
     css/pages/clients.scss
     css/pages/messages.scss
     js/_theme-settings/
     js/theme-settings.es6
     js/bootstrap.es6
     js/material-ripple.es6
     libs/bootbox/
     libs/bootstrap-daterangepicker/
     libs/bootstrap-markdown/
     libs/bootstrap-select/
     libs/bootstrap-slider/
     libs/bootstrap-sweetalert/
     libs/bootstrap-table/
     libs/bootstrap-tagsinput/
     libs/flot/
     libs/fullcalendar/
     libs/minicolors/
     libs/nouislider/
     libs/plyr/
     libs/quill/
     libs/select2/
     libs/swiper/
     gulpfile.js

  7. Update:

     webpack.config.js. Diff

     package.json. Diff

  8. Execute yarn upgrade

  9. Execute npm run build

• Include polyfills in the <head> block after core stylesheets (see html5-starter-generator for example):

  <!-- Load polyfills -->
  <script src="assets/vendor/js/polyfills.js"></script>
  <script>document['documentMode']===10&&document.write('<script src="//polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

• Bootstrap CSS:

  Include migration CSS file to the end of the <head> block:

  <link rel="stylesheet" href="assets/vendor/css/migrate/appwork-130.css">

  Remove this import after you correct all changed CSS classes in your HTML code.

  Changed classes:

  .font-weight-thin → .font-weight-lighter
  .text-dark → .text-body
  .bg-none → .bg-transparent
  .font-sans-serif → .text-sans-serif
  .font-serif → .text-serif
  .font-monospace → .text-monospace
  .box-shadow-none → .shadow-none
  .container-m--x → .container-m-nx
  .container-m--y → .container-m-ny
  .btn-round → .rounded-pill
  
  Negative horizontal margins:
  .m{sides}--{size} → .m{sides}-n{size}
  .m{sides}-{breakpoint}--{size} → .m{sides}-{breakpoint}-n{size}

• Bootstrap JS:

  All dropdown links must have href="#" attribute. Dropdown links with href="javascript:void(0)" will throw an error

• Plugin API changed:

  Flot.js - See https://github.com/flot/flot/blob/master/CHANGELOG.md

  bootstrap-table - see demo examples

  Fullcalendar - See https://fullcalendar.io/docs

  bootstrap-sweetalert is deprecated, use Sweetalert2 instead. See - https://sweetalert2.github.io/

  bootstrap-tour library was removed, use "shepherd" tour library instead. See - https://shipshapecode.github.io/shepherd/

Note: Validation icons are disabled by default. To enable it, add the next variable in the css/_custom-variables/_appwork.scss and css/_custom-variables/_appwork-material.scss:

$enable-validation-icons: true;