I’m pulling a list of apps into some portal customizations and wondered if there was a way to pull the icon used for an app through the API?
Hello David!
If it’s a custom icon that you uploaded yourself, the file is uploaded in Kintone, so you can use the file key to use it in another app.
You just need to obtain the file key, download the file, and specify the URL of the icon.
Kintone Developer Program - Obtaining the fileKey
https://developer.kintone.io/hc/en-us/articles/212494468-Download-File#obtainfilekey
Kintone Developer Program - Download File
https://developer.kintone.io/hc/en-us/articles/212494468-Download-File
Example Code:
(function() {
"use strict";
kintone.events.on("app.record.index.show", function(event) {
if (document.getElementById('anchor') !== null) {
return;
};
var body = {
"app": 'App ID that you want to refer to',
};
kintone.api(kintone.api.url('/k/v1/app/settings', true), 'GET', body, function(resp) {
//Obtaining the file key
var filekey = resp.icon.file.fileKey;
//Specifying URL using the obtained URL key
var url = '/k/v1/file.json?fileKey=' + filekey;
//Downloading the file
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send();
//Setting a tag
var anchor = document.createElement("a");
anchor.id = "anchor";
anchor.href = "App URL";
//Setting img tags
var im = document.createElement('img');
im.setAttribute('src', url);
//Obtaining the header
var link = kintone.app.getHeaderMenuSpaceElement();
//Setting a tag, setting img tag
link.appendChild(anchor).appendChild(im);
//Adjusting the image size
im.style.width = "100px";
}, function(error) {
console.log(error);
});
});
})();
Thank you for the response, what about getting the icon used that isn’t custom image? So an image that was provided within Kintone?
Hello David,
If you have a default icon image, you can use it as an icon by right-clicking on the image and specifying the URL that comes up in the verification section, but it is difficult to get it using the API.
@Sean Tachibana - That would work if I was retrieve the apps individually, but since I’m retrieving all apps, I won’t know which preset icon is being used.
I can get the key for the icon being used, using the method above, just not sure how to use that key to retrieve the icon that needs to be associated to the app.
Hello David,
I’m not entirely understanding what you’re trying to do. Still, if you want to know which icon is being used in all apps, you can use the API of getting general settings on each app and obtain the icon info to determine the icon in your kintone.
Kintone Developer Program - Get General Settings
https://developer.kintone.io/hc/en-us/articles/115004811668-Get-General-Settings
@Yuzo Arai, Your example code above shows how to retrieve an icon that I may have uploaded (which is very useful). Where I’m struggling is retrieving preset icons. I noticed in the API with Get General Settings method I have the key and the type is “Preset”. I tried plugging into your sample above and it didn’t provide the URL to the icon.
So my question is how do I retrieve the URL for the preset icons?
Hello David,
I still have a hard time understanding what you are trying to do.
Since there is no way to get it through the API, I think you’ll have to check the URL directly from the DOM information, or you may be able to download it and embed it in the plugin.
※You can determine if you can run the file download API with a preset ID such as APP***, but there will be an error.
If you are not trying to get the icon as a file, but instead want to know what icon is set in all apps, then, for each app, you can run the Get General Settings API
and use the information of the icon to determine the information, including the icons built into kintone.
Get General Settings:
https://developer.kintone.io/hc/en-us/articles/115004811668-Get-General-Settings
Please note that if you want to do it dynamically, you need to get the app IDs of all the apps in advance,
for example, by using the API to get the bulk of the app information, and then create a request from there, because the specification of the app IDs is mandatory.
Get Apps:
https://developer.kintone.io/hc/en-us/articles/115005336727-Get-Apps
I hope this helps.
Ok, I think I understand now. Thank you.
Hi, David. I hope this helps you or anyone else sharing the same problem of getting preset app icon. I was thinking that maybe you can make your own references for each icon. So you can map the preset key for all the apps that have preset icon type (obtained with the Get General Settings API, as mentioned by @Sean Tachibana) to static URL that you can obtain from inspect element in app list. But in order to map which icon corresponds to which preset key, you’ll need to create app with all the preset icon first and run the Get General Settings API. And only then, you can map each icon to each static URL. Below are the steps:
- obtaining static URL of icon
2. obtaining icon preset key from Get General Settings API
3. making your own reference
Do all steps above for each preset icon (painful, I know :D) and then you can pull the icon used for any apps using preset icon anytime you need to. Hope this helps.
An update on this, here is the code I wrote to get all of the preset icons. Figured I would share it in case someone wants to add it to their code.
var presetKey = appSettings.icon.key;
var presetIcon = [
{key : “APP62”, url: “https://static-y.kintone.com/contents/k/image/icon/app/document.png”},
{key : “APP47”, url: “https://static-y.kintone.com/contents/k/image/icon/app/bargraph.png”},
{key : “APP69”, url: “https://static-y.kintone.com/contents/k/image/icon/app/laptop.png”},
{key : “APP61”, url: “https://static-y.kintone.com/contents/k/image/icon/app/disk.png”},
{key : “APP50”, url: “https://static-y.kintone.com/contents/k/image/icon/app/calculator.png”},
{key : “APP55”, url: “https://static-y.kintone.com/contents/k/image/icon/app/clipboard.png”},
{key : “APP82”, url: “https://static-y.kintone.com/contents/k/image/icon/app/printer.png”},
{key : “APP48”, url: “https://static-y.kintone.com/contents/k/image/icon/app/binder.png”},
{key : “APP56”, url: “https://static-y.kintone.com/contents/k/image/icon/app/clock.png”},
{key : “APP64”, url: “https://static-y.kintone.com/contents/k/image/icon/app/fileholder.png”},
{key : “APP89”, url: “https://static-y.kintone.com/contents/k/image/icon/app/userpass.png”},
{key : “APP75”, url: “https://static-y.kintone.com/contents/k/image/icon/app/openmail.png”},
{key : “APP72”, url: “https://static-y.kintone.com/contents/k/image/icon/app/mail.png”},
{key : “APP79”, url: “https://static-y.kintone.com/contents/k/image/icon/app/piegraph.png”},
{key : “APP70”, url: “https://static-y.kintone.com/contents/k/image/icon/app/linegraph.png”},
{key : “APP59”, url: “https://static-y.kintone.com/contents/k/image/icon/app/cup.png”},
{key : “APP81”, url: “https://static-y.kintone.com/contents/k/image/icon/app/pin.png”},
{key : “APP54”, url: “https://static-y.kintone.com/contents/k/image/icon/app/clip.png”},
{key : “APP84”, url: “https://static-y.kintone.com/contents/k/image/icon/app/smartphone.png”},
{key : “APP86”, url: “https://static-y.kintone.com/contents/k/image/icon/app/telephone.png”},
{key : “APP49”, url: “https://static-y.kintone.com/contents/k/image/icon/app/businessbag.png”},
{key : “APP51”, url: “https://static-y.kintone.com/contents/k/image/icon/app/calendar.png”},
{key : “APP73”, url: “https://static-y.kintone.com/contents/k/image/icon/app/megaphone.png”},
{key : “APP77”, url: “https://static-y.kintone.com/contents/k/image/icon/app/pencil.png”},
{key : “APP74”, url: “https://static-y.kintone.com/contents/k/image/icon/app/mouse.png”},
{key : “APP65”, url: “https://static-y.kintone.com/contents/k/image/icon/app/flash.png”},
{key : “APP63”, url: “https://static-y.kintone.com/contents/k/image/icon/app/equipment.png”},
{key : “APP90”, url: “https://static-y.kintone.com/contents/k/image/icon/app/wallet.png”},
{key : “APP80”, url: “https://static-y.kintone.com/contents/k/image/icon/app/piggybank.png”},
{key : “APP58”, url: “https://static-y.kintone.com/contents/k/image/icon/app/creditcard.png”},
{key : “APP76”, url: “https://static-y.kintone.com/contents/k/image/icon/app/payment.png”},
{key : “APP68”, url: “https://static-y.kintone.com/contents/k/image/icon/app/glasses.png”},
{key : “APP85”, url: “https://static-y.kintone.com/contents/k/image/icon/app/soroban.png”},
{key : “APP52”, url: “https://static-y.kintone.com/contents/k/image/icon/app/cashbox.png”},
{key : “APP60”, url: “https://static-y.kintone.com/contents/k/image/icon/app/diamond.png”},
{key : “APP46”, url: “https://static-y.kintone.com/contents/k/image/icon/app/balloon.png”},
{key : “APP87”, url: “https://static-y.kintone.com/contents/k/image/icon/app/thinkingballoon.png”},
{key : “APP88”, url: “https://static-y.kintone.com/contents/k/image/icon/app/tool.png”},
{key : “APP57”, url: “https://static-y.kintone.com/contents/k/image/icon/app/cloudup.png”},
{key : “APP67”, url: “https://static-y.kintone.com/contents/k/image/icon/app/gear.png”},
{key : “APP71”, url: “https://static-y.kintone.com/contents/k/image/icon/app/lock.png”},
{key : “APP53”, url: “https://static-y.kintone.com/contents/k/image/icon/app/chemistry.png”},
{key : “APP83”, url: “https://static-y.kintone.com/contents/k/image/icon/app/research.png”},
{key : “APP66”, url: “https://static-y.kintone.com/contents/k/image/icon/app/gasstation.png”},
{key : “APP78”, url: “https://static-y.kintone.com/contents/k/image/icon/app/percent.png”},
{key : “APP39”, url: “https://static-y.kintone.com/contents/k/image/icon/app/appTableBlue.png”}
];
var icons = presetIcon.find(icons => icons.key === presetKey);
var url = icons.url;