kintone:フィールドタイプごとのエレメントの出しわけ(getFieldElement)

目次

サンプル(JavaScript)の利用方法について

サンプル(JavaScript)の利用方法について

ファイル

cstap_lib_get_field_element.js

ソースコード

/**<br />
 * タイプ：ライブラリー<br />
 *<br />
 * 説明<br />
 *  フィールドタイプごとのエレメントの出しわけを行います<br />
 *  主に一覧画面でのカスタマイズビューでの利用を想定しています<br />
 *<br />
 * 使い方<br />
 *  getFieldElement(record[&#039;レコード番号&#039;])<br />
 *<br />
 * URL<br />
 *  http://toyokumo-blog.kintoneapp.com/wp-content/uploads/2014/05/cstap_lib_get_field_element.js<br />
 *<br />
 * @author Yuichi Ochiai &lt;ochiai@cstap.com&gt;<br />
 */</p>
<p>/* フィールドタイプごとのデータの出しわけ */<br />
var getFieldElement = function(column) {<br />
  var type = column[&#039;type&#039;];<br />
  var element = document.createElement(&#039;div&#039;);</p>
<p>  switch (type) {<br />
    case &#039;SINGLE_LINE_TEXT&#039;:<br />
    case &#039;MULTI_LINE_TEXT&#039;:<br />
    case &#039;RADIO_BUTTON&#039;:<br />
    case &#039;DROP_DOWN&#039;:<br />
    case &#039;STATUS&#039;:<br />
    case &#039;NUMBER&#039;:<br />
    case &#039;CALC&#039;:<br />
    case &#039;RECORD_NUMBER&#039;:<br />
      element.innerHTML = column[&#039;value&#039;];<br />
      break;</p>
<p>    case &#039;LINK&#039;:<br />
      var link = column[&#039;value&#039;];<br />
      element.innerHTML = &#039;&lt;a target=&quot;_blank&quot; href=&quot;&#039; + link + &#039;&quot;&gt;&#039; + link + &#039;&lt;/a&gt;&#039;;<br />
      break;</p>
<p>    case &#039;CHECK_BOX&#039;:<br />
    case &#039;MULTI_SELECT&#039;:<br />
      element.innerHTML = column[&#039;value&#039;].join(&#039;&lt;br /&gt;&#039;);<br />
      break;</p>
<p>    case &#039;CREATOR&#039;:<br />
    case &#039;MODIFIER&#039;:<br />
      element.innerHTML = userLink(column[&#039;value&#039;]);<br />
      break;</p>
<p>    case &#039;USER_SELECT&#039;:<br />
      var values = column[&#039;value&#039;];<br />
      var users = [];<br />
      for (var i = 0, l = values.length; i &lt; l; i++) {<br />
        users[i] = userLink(values[i]);<br />
      }<br />
      element.innerHTML = users.join(&#039;&lt;br /&gt;&#039;);<br />
      break;</p>
<p>    case &#039;DATE&#039;:<br />
      var value = new Date(column[&#039;value&#039;]);<br />
      element.innerHTML = value.toLocaleDateString();<br />
      break;</p>
<p>    case &#039;TIME&#039;:<br />
      var value = new Date(column[&#039;value&#039;]);<br />
      element.innerHTML = value.toLocaleTimeString();<br />
      break;</p>
<p>    case &#039;DATETIME&#039;:<br />
    case &#039;CREATED_TIME&#039;:<br />
    case &#039;UPDATED_TIME&#039;:<br />
      var value = new Date(column[&#039;value&#039;]);<br />
      element.innerHTML = value.toLocaleString();<br />
      break;</p>
<p>    case &#039;FILE&#039;:<br />
      var values = column[&#039;value&#039;];<br />
      for (var i = 0, l = values.length; i &lt; l; i++) {<br />
        element.appendChild(fileLink(values[i]));<br />
      }<br />
      break;</p>
<p>    case &#039;SUBTABLE&#039;:<br />
      var records = column[&#039;value&#039;];<br />
      var t = document.createElement(&#039;table&#039;);<br />
      var thead = document.createElement(&#039;thead&#039;);</p>
<p>      for (var i = 0, l = records.length; i &lt; l; i++) {<br />
        var record = records[i][&#039;value&#039;];<br />
        var row = t.insertRow(i);<br />
        for (var k in record)<br />
          if (record.hasOwnProperty(k)) {<br />
            if (i === 0) {<br />
              var th = document.createElement(&#039;th&#039;);<br />
              th.innerHTML = &#039;&lt;th&gt;&#039; + k + &#039;&lt;/th&gt;&#039;;<br />
              thead.appendChild(th);<br />
            }<br />
            var cell = row.insertCell(row.cells.length);<br />
            cell.appendChild(getFieldElement(record[k]));<br />
          }<br />
      }<br />
      t.appendChild(thead);<br />
      element.appendChild(t);<br />
      break;<br />
  }</p>
<p>  return element;<br />
};</p>
<p>/* ユーザーへのリンク */<br />
var userLink = function(user) {<br />
  var code = user[&#039;code&#039;];<br />
  var name = user[&#039;name&#039;];<br />
  return &#039;&lt;a target=&quot;_blank&quot; href=&quot;/k/#/people/user/&#039; + code + &#039;&quot;&gt;&#039; + name + &#039;&lt;/a&gt;&#039;;<br />
};</p>
<p>/* ファイルのダウンロードリンク */<br />
var fileLink = function(file) {<br />
  var fname = file[&#039;name&#039;];<br />
  var fileKey = file[&#039;fileKey&#039;];<br />
  var url = &#039;/k/v1/file.json?fileKey=&#039; + fileKey;<br />
  var ele = document.createElement(&#039;div&#039;);<br />
  var a = document.createElement(&#039;a&#039;);<br />
  a.href = &quot;#&quot;;<br />
  a.innerHTML = fname;<br />
  a.onclick = function() {<br />
    var xhr = new XMLHttpRequest();<br />
    xhr.open(&#039;GET&#039;, url, false);<br />
    xhr.setRequestHeader(&#039;X-Requested-With&#039;, &#039;XMLHttpRequest&#039;);<br />
    xhr.setRequestHeader(&quot;Accept-Charset&quot;, &quot;x-user-defined&quot;);</p>
<p>    xhr.onreadystatechange = function(event) {<br />
      if ((xhr.readyState === 4) &amp;&amp; (xhr.status === 200)) {<br />
        var blob = new Blob([xhr.response], {type: &#039;application/octet-stream&#039;});<br />
        var burl = window.URL || window.webkitURL;<br />
        var blobUrl = burl.createObjectURL(blob);<br />
        var alink = document.createElement(&quot;a&quot;);<br />
        alink.href = blobUrl;<br />
        alink.download = fname;<br />
        alink.click();<br />
        return true;<br />
      }<br />
    };<br />
    xhr.send();<br />
  };<br />
  ele.appendChild(a);</p>
<p>  return ele;<br />
};<br />

▼複数製品も同時に無料お試し！▼

JS/CSSカスタマイズの最新記事4件