How to Show Other App Fields in an App using Bootstrap Modal Components?

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">
                &times;
              </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.

image

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">
&times;
</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.