Hello everyone,
I want to import and display fields from another App in Bootstrap’s Modal components.
Like this:
I just displayed this Modal when pressing a button:
The code is
(function ($) {
'use strict;
var recordShowEvents = ['app.record.detail.show', 'app.record.create.show'];
kintone.events.on(recordShowEvents, function (event) {
var modalSpace = kintone.app.record.getSpaceElement('createDocumentModal');
var $modal = $(`
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Create Document</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<!-- Modal body -->
<div class="modal-body">Modal body..</div>
<!-- Modal footer -->
<div class="modal-footer"></div>
</div>
</div>
</div>
`);
$(modalSpace).append($modal);
});
})(jQuery);
There, I want to show other App fields in the modal body.
Please help me.
Hi @ unudeveloper
Regarding the Bootstrap you provided, when the CSS was applied, it was different from the screenshot you provided and was not displayed correctly in my environment.
But by executing the “GET” record retrieval process of the “kintone” REST API, it is possible to retrieve record information from other apps.
Get Record:
The desired behavior may be achieved by acquiring record information from other apps and setting the acquired values on the screen before displaying the screen to be displayed in the modal.
After the following process was applied, it was possible to display the record ID of the latest record entered in the app with the app ID “5775” and the creator’s display name on the modal screen.
(App ID 5775 is my test app on my environment)
Ex:
(function($) {
"use strict";
var recordShowEvents = ['app.record.detail.show', 'app.record.create.show'];
kintone.events.on(recordShowEvents, async function (event) {
var modalSpace = kintone.app.record.getSpaceElement('createDocumentModal');
var body = {
'app': 5775
};
var resp = await kintone.api(kintone.api.url('/k/v1/records.json', true), 'GET', body);
console.log(resp);
var $modal = $(`
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">` + resp.records[0].$id.value + `</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<!-- Modal body -->
<div class="modal-body">` + resp.records[0].Created_by.value.name + `</div>
<!-- Modal footer -->
<div class="modal-footer"></div>
</div>
</div>
</div>
`);
$(modalSpace).append($modal);
});
})(jQuery);
I hope this helps.
1 Like
Thanks for your response, @Sean_Tcbn .
I solved my problem using iframe tag .
I hope it is helpful to the other kintone developers.
Regards.