Custom icons in Smart UI

J Brown

We have a request to see how much development is required to use custom icons for specific mimetypes in Smart UI.  One if for .twbx (Tableau) and the other is .pbix (Power BI).

I can see by looking at the CS the standard mimetypes like Excel, Word, all point back to image/icons/mime_word.svg and are assigned a specific class.

Has anyone done this before?  I'm wondering how complex this development is before we attempt to go any further down the "is it feasible" route.

Cheers
Jeff

Pierre N

Jeff, it depends if you have internal skilled people to do this. For someone "who knows" it's at most a one hour work. 
If you never practiced the sdk it could be a 3 months work.

Reiner Merz

yes, can normally be done in hours. If you are familiar with the SDK.

Greg Griffiths

its a shame that the system can't iterate through all supported types etc and generate the icons automatically or have it included in the JSON, seems a lot of duplicated work to set them up again in SmartUI

Ferdinand Prantl

If icons were shared between Classic UI and Smart UI, a common icon registry would be feasible. However, Smart UI includes different icons by design. And their count and assignments may not match the count of icons in Classic UI. You need to create two icons and register each of them separately only as long as you need to support both Classic UI and Smart UI.

Adding a new icon means modifying four files in a Smart UI project generated by generator-csui-extension. (Adding N icons means modifying N + 3 files.) N x SVG, CSS, JS and JSON. I attached examples how to add an icon for a new document type (MIME type) and for a new node type (subtype).

https://gist.github.com/prantlf/7e82dd257db9bee10ee108134dd3a97e

https://gist.github.com/prantlf/4e6e5a99a94e4d605e189dc778d29760

Pasting text to this forum breaks line breaks and styling and the upload file button does not work...

Greg Griffiths

@Ferdinand Prantl tried your snippets, and the ones from the PPT with the SDK and keep getting the same error - "Uncaught ReferenceError: define is not defined" about the icons.js file :(

Ferdinand Prantl

@Greg Griffiths, the snippets were meant to be inserted to files in a Smart UI project. You need to build the Smart UI project and deploy the built output to CS. Not to copy the source files to /support.

The error means that you called a "define" function, but there is no "define" available in the browser. When you build a Smart UI project, the output bundles will contain calls to "csui.define", which is provided by Smart UI core.

Greg Griffiths

I added them to the sample smartui widget that you can install, no other changes made (CS and SmartUI SDK 16.2.11)

Ferdinand Prantl

The SDK does not contain anything ready to install on CS. If you generate a sample project with the Hello widget, you will need to build it and deploy the result.

Before deploying on the CS, Smart UI projects are supposed to be developed and tested in the development environment, which is the Smart UI project root. When the widget or the customisation works there, it is time to build the release output and deploy it on the server for a final test. Constant building and deploying on CS to test each bugfix would waste too much time.

Greg Griffiths

I had tested the Sample widget in the dev environment and it worked, my plan was to include the support for the Contact Folder subtype into the project so that it could be picked up by the system.

1. created the sample project
2. Grunt and checked it in the DEV webserver
3. Added in the icons changes as outlined above
4. Grunt and checked in the DEV webserver - still only showing the sample as expected and no JS errors
5. Copied the OUT-RELEASE folder into the \support\greetings folder (as per the directions I have from the Smart UI Course)
6. Copied the WIDGETS folder from the src\ folder to \support\greetings\ folder (as per the directions I have from the Smart UI Course)
7. Restarted the services
8. Add a standard Node View to a Perspective and test - get the JS error and no icons.

Update, if I add a mapping in bundles\greet-all.js the JS error disappears in the console - still not working as its complaining about a missing icon.map.js from WebReports still, so will look at that next.

Patched up to date on the CS side and it now works :)