How to add tabs in record detail page

1

I want to display the content of the page inside the tab

for example

2

Hello Bharath

I recommend you to utilize the blank space fields to input JS of placing tab buttons and its corresponding contents.

The following is just an example of JS where it’s using the Blank space field (Element ID:space_for_button) to show a typical button upon opening the record detail page.

(function() {
    “use strict”;
    kintone.events.on(‘app.record.detail.show’, function(event) {
        // Create a button
        var mySpaceFieldButton = document.createElement(‘button’);
        mySpaceFieldButton.id = ‘my_space_field_button’;
        mySpaceFieldButton.innerHTML = ‘my_button’;

        // Set button on the Blank space field
        kintone.app.record.getSpaceElement(‘space_for_button’).appendChild(mySpaceFieldButton);
    });
})();

For more details, please check the kintone developer page below:

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

I hope this gives you an idea of how to do so.

3

By the way, I saw the exact same question on Stack Overflow, but it seems like your question got rejected there due to it being “off topic”

4

@Yuzo Arai,  Thanks for your Help below is the code i have tried. I this this is not the perfect way of doing this functionality, Please let me know is there any other way i can achieve this.

I have created 6 Group and placed all the form element inside these Group.

var mySpaceFieldButton1 = document.createElement(‘button’);
var mySpaceFieldButton2 = document.createElement(‘button’);

 

var GROUP1 = ‘Test Group 1’; //This is the id of the Group

var GROUP2 = ‘Test Group 2’; //This is the id of the Group

 

mySpaceFieldButton1.id = ‘tab1’;
mySpaceFieldButton1.innerHTML = ‘My_Button 1’;

 

mySpaceFieldButton1.id = ‘tab2’;
mySpaceFieldButton1.innerHTML = ‘My_Button 2’;

 

kintone.app.record.setFieldShown(GROUP1, false);
kintone.app.record.setFieldShown(GROUP2, false);

 

mySpaceFieldButton1.onclick = function() {

kintone.app.record.setFieldShown(GROUP1, false);
kintone.app.record.setFieldShown(GROUP2, false);

kintone.app.record.setFieldShown(GROUP1, true);

};

 

mySpaceFieldButton2.onclick = function() {

kintone.app.record.setFieldShown(GROUP1, false);
kintone.app.record.setFieldShown(GROUP2, false);

kintone.app.record.setFieldShown(GROUP2, true);

};

 

// Set button on the Blank space field
kintone.app.record.getSpaceElement(‘tab’).appendChild(mySpaceFieldButton1);
kintone.app.record.getSpaceElement(‘tab’).appendChild(mySpaceFieldButton2);

5

Hi Bharah,

So do you think “this is not the perfect way of doing this functionality” to achieve the sample picture you posted? Or is there anything else you would like to achieve? May I ask you which functionality you think your code is not the perfect way?

Thanks.

Junko

 

6

Hello Bharath

Can you explain what you mean by “this is not the perfect way of doing this functionality” in more detail?

7

@Junko Werner, sorry for the delayed response,  I think my code is not the perfect way because it has lot of repeated code like hide and show for every click, i was asking if there is any other way to achieve the same out put with less code.

@Yuzo Arai, “this is not the perfect way of doing this functionality”, i wanted to ask that is there any other way we can get the same out put with less code. 

8

Hello Bharath

It looks like you can’t do much to make it compact, but if there is,
since you have two identical lines to make the GROUP1 as false,
I guess you can delete the first one.

kintone.app.record.setFieldShown(GROUP1, false);

Also, I guess you can make the display/hide process into a function
and use an argument to control which field to display or hide.

The following is a simple example:

function setFieldShown(a,b){
kintone.app.record.setFieldShown('GROUP1',a);
kintone.app.record.setFieldShown('GROUP2',b);
}

mySpaceFieldButton1.onclick = function () {
setFieldShown(true,false);
}
mySpaceFieldButton2.onclick = function () {
setFieldShown(false,true);
}

I hope this would help you a little.