Customize Application Views

1

Is it possible to add  the “Apps” Widget(which is available in dashboard) inside the Views (App Template)

 

2

Hello Bharath!

I’m not quite sure which part you are talking about by the “Views (App Template),” but if you would like to add the “Apps widget” (the box with all the apps listed in the portal), you will most likely need to recreate it yourself using css or such. If you would like to put in the Record List aka View, you can utilize the MenuSpaceElement. Here is a page that explains how to use the MenuSpaceElement in the Record List:

Add Buttons (Record List)
https://developer.kintone.io/hc/en-us/articles/213149437-Add-Buttons-Record-List-

3

Thank you MenuSpaceElement is very helpful thanks. This will solve the problem of adding the element in the view page.

Can I get the existing application(Apps widget) list using Jquery or Javascript.

4

Hi Bharath,

 

If you want to place an app widget, you might want to get the url of the  image of the app widget at first. To get the url, right click on the app widget  and choose “Inspect”. And you specify the URL of the icon image that comes out in the inspect.

The code below is an example how you can place the app widget  image that is linked to the app’s url after being clicked.

(function() {

    "use strict";

    kintone.events.on("app.record.index.show", function(event) {

        if (document.getElementById('anchor') !== null) {

        return;

    }

    //a tag setting

    var anchor = document.createElement("a");

    anchor.id = "anchor";

    anchor.href = "app's URL";

 

    //img tag setting

    var im = document.createElement('img');

    im.setAttribute('src', "icon's URL");

 

    //get the header

    var link = kintone.app.getHeaderMenuSpaceElement();

 

    //a tag setting、img tag setting

    link.appendChild(anchor).appendChild(im);

    });

})();

To get the app information other than the widget/icon, you can refer the link below.

 

▼ Get Apps

https://developer.kintone.io/hc/en-us/articles/115005336727

 

“ids” parameter helps you get a list of app IDs in array and up to 100 apps can be specified.

 

Hope it helps.

5

@Junko Werner, Thank you very much, it worked. :smiley:

However, Language switch functionality is not working on these elements :(. Means, if I give the title of the element in  English and if I change my default language to Japanese, all the webpage changes to Japanese except these elements. 

6

Hi Bharath,

Basically, if the element is set by yourself, the language you can see is what you set up and it will not change even if the browser language is changed.

So if you want to change the element you set up after the browser language is switched, you would need to add the process of changing the set-up element.

After getting the browser language information, with “if” or “switch” statement, you can execute a block code depending on the condition.

To detect a user’s preferred language, the following properties on navigator are available. Some are supported only in latest browsers, while some are proprietary and IE only.

•navigator.languages
•navigator.language
•navigator.userLanguage
•navigator.browserLanguage
•navigator.systemLanguage

Please check the website below to learn more about browser language.

▼ Detect browser language in JavaScript

https://zzz.buzz/2016/01/13/detect-browser-language-in-javascript/

In Japanese, the value to be returned would be “jp” or “jp-JP” or “undefined”.

 

Here are the examples of the HTML and Javascript coding if you want to change the word from “Japanese” to “日本語” in the Japanese site after detecting the browser language in Japanese and English bilingual site.

HTML:

<div id="navi">
  <ul>
     <li><a class="disabled" href="#">Top</a></li>
     <li><a id="lang_jp" href="indexjp.html">Japanese</a></li>
  </ul>
</div><!-- end of #navi -->

Javascript:

Navigator property is “ja”, so it is detected as Japanese browser.

if( (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2) === 'ja') {

$('#navi a#lang_jp').text('日本語');

}