App icon

legacy_user · September 21, 2020, 5:59pm

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?

legacy_user · September 23, 2020, 12:32am

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);
});
});
})();

legacy_user · September 23, 2020, 12:34pm

Thank you for the response, what about getting the icon used that isn’t custom image? So an image that was provided within Kintone?

legacy_user · September 24, 2020, 5:06pm

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.

legacy_user · September 25, 2020, 1:10pm

@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.

legacy_user · September 29, 2020, 10:51pm

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

legacy_user · September 30, 2020, 12:22pm

@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?

legacy_user · October 1, 2020, 5:03pm

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.

legacy_user · October 1, 2020, 5:19pm

Ok, I think I understand now. Thank you.

legacy_user · July 1, 2021, 9:13am

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.

legacy_user · November 12, 2021, 9:56pm

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;

Topic		Replies	Views
API to Download File	5	223	September 26, 2019
Image URLs in plug-ins	8	240	June 7, 2021
Copy data from another app	8	584	February 23, 2019
How to receive response, that is blob object, with kintone.proxy?	4	259	March 7, 2022
How to copy attachment field to new record ?	1	255	January 23, 2021

App icon

Related topics