Collapse/Show Views in App

API & Customization Ask Developers
1

Anybody have any idea how I could collapse views (specifically tables) on the app? I have some pages that have 10+ tables and I'd love to be able to collapse and expand them. Any ideas?

2

Hi 371928693712!

This is great. Slight problem I'm running into:

My app is embedded on my website & the + signs aren't clickable. If I run the app on the Knack platform, it works like a charm.

Would you say that this is a CSS issue on my site (in which Knack is embedded on)?

Thanks for your help!

3

Hi Tony, 

I have a plugin for this that I built. Add this code to the JavaScript section of your application and change the scene ID and the View ID in the scene event handler:

$(document).on("knack-scene-render.scene_XX", function (event, scene) {
  Knack.fn.hideExpand("view_XX"); //VIEWID YOU WANT TO COLLAPSE
});

//PLUGIN - DONT CHANGE THIS CODE

Knack.fn = Knack.fn || {};
Knack.fn.hideExpand = (viewKey) => {
  Knack.$(`#${viewKey} .expandBtn`).remove();
  Knack.$(`#${viewKey} .kn-title`).prepend(
    '<i class="fa fa-plus toggleBtn hidden"></i>'
  );
  Knack.$(`#${viewKey} section`).hide();
  Knack.$(`#${viewKey} .kn-table-wrapper`).hide();
  Knack.$(`#${viewKey} .kn-records-nav`).hide();
  Knack.$(`#${viewKey} .toggleBtn`).on("click", function () {
    let classes = Knack.$(this).attr("class").split(/\s+/);
    if (classes.indexOf("hidden") === -1) {
      //hide it
      const $section = Knack.$(this).parent().parent().siblings("section");
      const $table = Knack.$(this)
        .parent()
        .parent()
        .siblings(".kn-table-wrapper");
      if ($section.length) {
        $section.hide();
      } else if ($table.length) {
        const $navFilters = Knack.$(this)
          .parent()
          .parent()
          .siblings(".kn-records-nav");
        $table.hide();
        $navFilters.hide();
      }
      Knack.$(this).addClass("hidden");
      Knack.$(this).removeClass("fa-minus");
      Knack.$(this).addClass("fa-plus");
    } else {
      //show it
      const $section = Knack.$(this).parent().parent().siblings("section");
      const $table = Knack.$(this)
        .parent()
        .parent()
        .siblings(".kn-table-wrapper");
      if ($section.length) {
        $section.show();
      } else if ($table.length) {
        const $navFilters = Knack.$(this)
          .parent()
          .parent()
          .siblings(".kn-records-nav");
        $table.show();
        $navFilters.show();
      }
      Knack.$(this).removeClass("hidden");
      Knack.$(this).removeClass("fa-plus");
      Knack.$(this).addClass("fa-minus");
    }
  });
};

//END CODE

This should work for you. Reach out if you have any issues:

Kelson
kelson@ksensetech.com
https://www.ksensetech.com/knack/
4

Hi @Kelson, I am trying to implement your plugin.

I pasted it in JS section, and changed the scene and view IDs.

It does hide the view, but I don’t see the clickable icon/title to collapse/show the view.

tks for the help.