Display file library within a public article

Supportbench knowledgebase team

22-Nov-2021

The file library is typically an internal only repositry of files that you can use to store shared article content.  It is possible however if nessesary to include that library within a public facing article.

Update the community code:

1. Go to Administration → Self-Service → Community and choose the community to update.
    
2. On the left list, click on “Viewing an article” and add the script to the bottom of the page.
    

   <script>
    //build file repo
    //-----------------------------
    var library_folders = [];
   		var library_files = [];
    
    {%for f in sb.library_files.folders %}
    library_folders.push({
    id: '{{f.id}}',
    parent_id: '{{f.parent_id}}',
    name: '{{f.name}}' 
    }); 
    {% endfor %}
    
    {%for f in sb.library_files.files %}
    library_files.push({
    id: '{{f.id}}',
    folder_id: '{{f.folder_id}}',
    name: '{{f.name}}', 
    url: '{{f.url}}',
    }); 
    {% endfor %} 
    
    //build the container side list 
    build_library($('.library'), library_folders, library_files, 0); 
    library_folder_bind();
    //-----------------------------
   	 
   </script>

   
    
3. On the left list, click on “Javascript (JS)” and add the below to the bottom of the section.
    

   //------------------------------------
   
   function build_library($list, folders, files, folder_parent_id) {
   
    if (folders.length) {
    
    	//get the child folders
    var folder_children = folders.where(function (i) {
    return i.parent_id == folder_parent_id
    }); 
    
    	//loop through the child folders
    $.each(folder_children, function (i, folder) {
    
    	//build the files within the folder
    //----------------
    var file = '';
    	var file_items = files.where(function (ii) {
    return ii.folder_id === folder.id
    });
   
    	$.each(file_items, function (i, f) { 
    file += ('<li><a href="' + f.url + '">' + f.name + '</a></li>'); 
    });
    //----------------
    	
    	//build the folder children 
    //----------------
    var $folder_item;
    var folder_items = folders.where(function (ii) {
    return parseInt(ii.parent_id) === parseInt(folder.id)
    });
    
    $folder_item = $('<li><span class="folder_caret">' + folder.name + '</span><ul class="folder_nested">' + file + '</ul></li>');
   
    	//----------------
    
    var $subList = $folder_item.find('.folder_nested'); 
    $folder_item.append($subList);
    build_library($subList, folders, files, folder.id);
    $list.prepend($folder_item);
    
    });
    
    } 
   	
   	//build the files within the root folder
    //----------------
    	if (parseInt(folder_parent_id)===0) {
    	
    var $file;
    	var file_items = files.where(function (ii) {
    return parseInt(ii.folder_id) === 0
    });
   
    	$.each(file_items, function (i, f) { 
    if($file) {
    $file.append($('<li class="first"><a href="' + f.url + '">' + f.name + '</a></li>'));
    } 
    $file = $('<li class="first"><a href="' + f.url + '">' + f.name + '</a></li>');
    }); 
    
    		$list.append($file); 
    }
   	//----------------
   	
    return;
   }
   
   function library_folder_bind() { 
    var toggler = document.getElementsByClassName("folder_caret"); 
   	var i;
    for (i = 0; i < toggler.length; i++) {
    toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".folder_nested").classList.toggle("active");
    this.classList.toggle("caret-down");
    });
    } 
   }
   //------------------------------------

   
    
4. On the left list, click on “Stylesheet (CSS)” and add the below to the bottom of the section.
    

   /* Remove default bullets and remove margins and padding from the parent ul */
   ul.library {
    list-style-type: none;
    margin: 0;
    padding: 0;
   }
   
   ul.library li {
    padding-top: 4px;
    padding-bottom: 4px;
    	font-size:15px;
   }
   
   ul.library > li.first {
    margin-left:28px;
   }
   /* Style the caret/arrow */
   ul.library .folder_caret {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
    font-weight:500;
    font-size:16px;
   }
   
   /* Create the caret/arrow with a unicode, and style it */
   ul.library .folder_caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
   }
   
   /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
   ul.library .caret-down::before {
    transform: rotate(90deg);
   }
   
   /* Hide the nested list */
   ul.library .folder_nested {
    display: none;
    
   }
   
   /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
   ul.library .active {
    display: block;
   }

   
    
5. Save the Community by clicking on the Publish button at the top right corner.
    
6. Go to an article you would like to add the repo to, and within the source code, add the below code and save the article.
    

   <ul class="library"></ul>