At 5000fish, we not only wanted Yurbi to serve as a fully functional business intelligence (BI) product for business users, but a customizable one as well. We have been able to deliver on in-product customization through CustomJS. CustomJS allows Yurbi users to customize Yurbi’s front-end web interface by easily changing text, or removing or adding content and images throughout the application.
Within Yurbi, the CustomJS file is organized into seven areas of the product: header, login, dashboard, library, builder, architect, and admin. These sections represent user-facing parts of Yurbi that can be customized.
Code can be written in each of these sections to make changes. Any valid JavaScript or JQuery syntax can be written inside the CustomJS file, though errors in this code may create errors in Yurbi’s functionality. This is why it’s best to leave the raw structure of the CustomJS file intact.
To make changes in the CustomJS file assumes you have experience with web development, specifically JavaScript or JQuery, not something that the typical business user has. So this feature is designed with a developer in mind. But fear not, if you don’t you have full access to our Customer Success team and we’ll help you with the syntax you need to insert in the CustomJS file to make the changes you need.
One common customization need Yurbi users have is changing images. In order to change images, users can upload images to the image directory within Yurbi or select Yurbi stock images (though these are subject to deletion based upon software updates). Let’s walk through the steps regarding how to change an image using CustomJS. In this example, we will change the photo users see on the login page.
To change an image, Yurbi users must login to the product and identify the image he or she wishes to change. Then, the user must right-click the image and select, “Inspect.”
Next, the user must right-click the code that appears and copy the selector.
Once the user has copied the selector, the user must access the doLogin function in CustomJS because this image is for the login screen. Then, the user must paste the selector code into the CustomJS field. Users can alter the image size by changing the code.
Here’s a sample of what the code would look like:
var doLogin = function(){
$("body > header > a > img").attr("src", "assets/images/logo.png");
$("body > header > a > img").attr("height", "135px");
};
Once the user pastes the code into the correct custom .js field and makes adjustments, the image change it complete.
CustomJS (and it’s compliment CustomCSS) has the ability to allow an OEM/White Label partner or internal customer to brand Yurbi so that our interface blends seamlessly into your organization’s brand. Not only can you use this feature to change logos, but more importantly you can change any text (to support multi-lingual needs), remove features and buttons (to take away print or export features of a report for example) or even add new functionality (add a button to link a report to an external workflow system perhaps). The use cases are unlimited and our Customer Success team is just an email or phone call away to help work through your requirements and determine the best way to approach them.
Have additional questions about Yurbi’s Custom JS feature? Give us a call!
