Performs a basic Excel API call using plain JavaScript & Promises.

Basic API call (JavaScript).EXCEL.yaml

name: Basic API call (JavaScript)
description: Performs a basic Excel API call using plain JavaScript & Promises.
host: EXCEL
api_set: {}
script:
  content: "if(Office.context.document.settings.get(\"getDataFromWeb\")==null){\n  console.log(\"first run\")\n  getOrganizationList();\n  Office.context.document.settings.set(\"getDataFromWeb\", true);\n  persistSettings();\n}//else console.log(\"second run\")\n\nlistOrganizations();\ngetFirstTimeData();\n\nvar updateFlag = false;\nvar btn = document.getElementById(\"portfolioSelectButton\");\nOffice.context.document.settings.get(\"portfolioLength\") == 0 ? (btn.disabled = true) : (btn.disabled = false);\n\nvar i, organization_list, organization_id, organization_name;\n\nfunction listOrganizations() {\n  organization_list = document.querySelector(\"#organizations_list\");\n  for (i = 0; i < 12; i++) {\n    //Office.context.document.settings.get(\"length\")\n    organization_id = Office.context.document.settings.get(`${i}`).organizationId;\n    organization_name = Office.context.document.settings.get(`${i}`).organizationName;\n    organization_list.innerHTML += `\n         <li> <a> <input type=\"checkbox\" class=\"checkboxOrganizations\" id=\"${organization_id}\"/> ${organization_name} </a> </li>\n      `;\n  }\n}\n\nfunction searchFunction() {\n  var input, filter, ul, li, a, i, txtValue;\n  input = document.getElementById(\"searchBox\");\n  filter = input.value.toUpperCase();\n  ul = document.getElementById(\"organizations_list\");\n  li = ul.getElementsByTagName(\"li\");\n  for (i = 0; i < li.length; i++) {\n    a = li[i].getElementsByTagName(\"a\")[0];\n    txtValue = a.textContent || a.innerText;\n    if (txtValue.toUpperCase().indexOf(filter) > -1) {\n      li[i].style.display = \"\";\n    } else {\n      li[i].style.display = \"none\";\n    }\n  }\n}\n\nvar selectedInjections = [];\n\nfunction findInjections() {\n  var id_name, founded, list;\n  document.getElementById(\"checkAllInjections\").checked = false;\n  list = document.querySelector(\"#injections_list\");\n  list.innerHTML = \"\";\n  selectedInjections = [];\n  for (i = 0; i < 12; i++) {\n    //Office.context.document.settings.get(\"length\")\n    organization_id = Office.context.document.settings.get(`${i}`).organizationId;\n    founded = document.getElementById(`${organization_id}`);\n    if (founded.checked) {\n      document.getElementById(\"checkAllInjections\").disabled = false;\n      Office.context.document.settings.get(`${i}`).injectionsList.forEach((obj) => {\n        list.innerHTML += `\n         <li> <a> <input type=\"checkbox\" class=\"checkboxInjections\" id=\"${obj.id}\"/> ${obj.name}  </a> </li>\n      `;\n        selectedInjections.push(obj);\n      });\n    }\n  }\n}\n\nfunction refresh() {\n  document.getElementById(\"checkAllInjections\").checked = false;\n  var inputs = document.querySelectorAll(\".checkboxOrganizations\");\n  for (var i = 0; i < inputs.length; i++) {\n    inputs[i].checked = false;\n  }\n  list = document.querySelector(\"#injections_list\");\n  list.innerHTML = \"\";\n}\n\nfunction toggle(source) {\n  var checkboxes = document.querySelectorAll(\".checkboxInjections\");\n  for (var i = 0; i < checkboxes.length; i++) {\n    checkboxes[i].checked = source.checked;\n  }\n}\n\nfunction createPortfolio() {\n  var foundedInjection,\n    checkedInjections = [],\n    portfolioName;\n\n  for (var i = 0; i < selectedInjections.length; i++) {\n    foundedInjection = document.getElementById(`${selectedInjections[i].id}`);\n    if (foundedInjection.checked) {\n      checkedInjections.push(selectedInjections[i]);\n      //console.log(selectedInjections[i].name);\n    }\n  }\n  if (checkedInjections.length == 0) {\n    console.log(\"portfolioya santral ekleyiniz\");\n    return;\n  }\n  portfolioName = document.getElementById(\"portfolioSpace\").value;\n  if (portfolioName.length == 0) {\n    console.log(\"portfolio ismi giriniz\");\n    return;\n  } else {\n    Office.context.document.settings.get(\"portfolioLength\") == null\n      ? Office.context.document.settings.set(\"portfolioLength\", 0)\n      : \"\";\n    //Portfolio.portfolioCount = Office.context.document.settings.get(\"portfolioLength\");\n    var newPortfolio = new Portfolio(portfolioName, checkedInjections);\n\n    saveCreatedPortfolio(newPortfolio);\n    console.log(newPortfolio)\n    Portfolio.portfolioCount++;\n    selectedInjections = [];\n    document.getElementById(\"portfolioSpace\").value = \"\";\n    show(\"page2\", \"page1\");\n  }\n}\n//console.log(Office.context.document.settings.get(\"portfolioLength\"));\n\nprintAllPortfolios();\n\nfunction removePortfolio(item) {\n  if (Office.context.document.settings.get(item) != null) {\n    Office.context.document.settings.remove(item);\n\n    var old_length = Office.context.document.settings.get(\"portfolioLength\");\n    old_length - 1 <= 0\n      ? Office.context.document.settings.set(\"portfolioLength\", 0)\n      : Office.context.document.settings.set(\"portfolioLength\", old_length - 1);\n    persistSettings();\n    var opt = document.getElementById(`${item}`);\n    opt.remove(opt.selectedIndex);\n    var list = document.getElementById(\"portfolio-pages\");\n    list.innerHTML = \"\";\n    var btn = document.getElementById(\"portfolioSelectButton\");\n    Office.context.document.settings.get(\"portfolioLength\") == 0 ? (btn.disabled = true) : (btn.disabled = false);\n  }\n}\n\nfunction printAllPortfolios() {\n  for (var i = 0; i < Office.context.document.settings.get(\"portfolioLength\"); i++) {\n    console.log(Office.context.document.settings.get(\"p\" + `${i}`));\n  }\n}\n\nfunction saveCreatedPortfolio(newPortfolio) {\n  Office.context.document.settings.set(\n    \"p\" + `${Office.context.document.settings.get(\"portfolioLength\")}`,\n    newPortfolio\n  );\n  addPortfoliosToDropdown(\"p\" + `${Office.context.document.settings.get(\"portfolioLength\")}`);\n  Office.context.document.settings.set(\"portfolioLength\", Office.context.document.settings.get(\"portfolioLength\") + 1);\n  Portfolio.portfolioCount++;\n  var btn = document.getElementById(\"portfolioSelectButton\");\n  Office.context.document.settings.get(\"portfolioLength\") == 0 ? (btn.disabled = true) : (btn.disabled = false);\n  persistSettings();\n  refresh();\n}\n\nfunction persistSettings() {\n  Office.context.document.settings.saveAsync(function(asyncResult) {});\n}\n\nfunction show(shown, hidden) {\n  document.getElementById(shown).style.display = \"block\";\n  document.getElementById(hidden).style.display = \"none\";\n  return false;\n}\n\nfunction getFirstTimeData() {\n  document.getElementById(\"page2\").style.display = \"none\";\n  getPortfoliosFromOffice();\n}\n\nfunction checkButtonsState() {\n  var createButton = document.getElementById(\"createPortfolioButton\");\n  var updateButton = document.getElementById(\"updatePortfolioButton\");\n  if (updateFlag) {\n    updateButton.style.display = \"block\";\n    createButton.style.display = \"none\";\n  } else {\n    updateButton.style.display = \"none\";\n    createButton.style.display = \"block\";\n  }\n}\n\nvar global_index_for_item;\n\nfunction updatePortfolio(index) {\n  global_index_for_item = index;\n  var navbar = document.getElementById(\"main_navbar\");\n  navbar.style.display = \"none\";\n  selectedInjections = [];\n  updateFlag = true;\n  show(\"page1\", \"page2\");\n  checkButtonsState();\n  var injection_list = document.getElementById(\"injections_list\");\n  refresh();\n  var portfolioObject = Office.context.document.settings.get(index);\n  console.log(portfolioObject);\n  for (var i = 0; i < portfolioObject.injections.length; i++) {\n    injection_list.innerHTML += `\n      <li> <a> <input type=\"checkbox\" class=\"checkboxInjections\" checked id=\"${portfolioObject.injections[i].id}\"/> ${\n      portfolioObject.injections[i].name\n    }  </a> </li>\n    `;\n    selectedInjections.push(portfolioObject.injections[i]);\n  }\n  var portolioNameSpace = document.getElementById(\"portfolioSpace\");\n  portolioNameSpace.value = portfolioObject.portfolioName;\n}\n\nfunction saveAndUpdatePortfolio() {\n  var foundedInjection,\n    checkedInjections = [],\n    portfolioName;\n  for (var i = 0; i < selectedInjections.length; i++) {\n    foundedInjection = document.getElementById(`${selectedInjections[i].id}`);\n    if (foundedInjection.checked) {\n      checkedInjections.push(selectedInjections[i]);\n      //console.log(selectedInjections[i].name);\n    }\n  }\n  if (checkedInjections.length == 0) {\n    console.log(\"portfolioya santral ekleyiniz\");\n    return;\n  }\n  portfolioName = document.getElementById(\"portfolioSpace\").value;\n  if (portfolioName.length == 0) {\n    console.log(\"portfolio ismi giriniz\");\n    return;\n  } else {\n    var updatedObject = Office.context.document.settings.get(global_index_for_item);\n    updatedObject.injections = checkedInjections;\n    updatedObject.portfolioName = portfolioName;\n    saveUpdatedPortfolioToOffice(global_index_for_item, updatedObject);\n    updateFlag = false;\n    checkButtonsState();\n    var navbar = document.getElementById(\"main_navbar\");\n    navbar.style.display = \"block\";\n    selectedInjections = [];\n    document.getElementById(\"portfolioSpace\").value = \"\";\n    getPortfoliosFromOffice();\n    var list = document.getElementById(\"portfolio-pages\");\n    list.innerHTML = \"\";\n    refresh();\n    show(\"page2\", \"page1\");\n  }\n  //console.log(selectedInjections);\n}\n\nfunction saveUpdatedPortfolioToOffice(index, updatedPortfolio) {\n  Office.context.document.settings.set(index, updatedPortfolio);\n  persistSettings();\n}\n\nfunction addPortfolioItem(items, index) {\n  var list = document.getElementById(\"portfolio-pages\");\n  list.innerHTML = `\n  <form>\n  <section class=\"samples ms-font-m\">\n\t\t\t<div id=\"portfolioDiv\" class=\"container\">\n\t\t\t\t<ul id=\"portfolio_injections_list\">\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t\t<br>\n\t\t\t<button type=\"button\" onclick=\"removeSelected('${index}')\">Remove Selected</button>\n\t\t\t<button type=\"button\" onclick=\"clearList('${index}')\">Clear List</button>\n      <button type=\"button\" onclick=\"removePortfolio('${index}');\">Remove Portfolio</button>\n\t\t\t<button type=\"button\" onclick=\"updatePortfolio('${index}');\">Update Portfolio</button>\n      <br>\n      Select Time Interval:<br>\n      Start Date:<input type=\"date\" value=\"2020-07-14\" id=\"startDate\">\n      End Date:<input type=\"date\" value=\"2020-08-13\" id=\"endDate\">\n      <div class=\"multiSelect\">\n      <div class=\"selectBox\" onClick=\"showCheckboxes()\">\n        <select>\n          \n        </select>\n        <div class=\"overSelect\"></div>\n      <div id=\"checkboxList\">\n      <label for=\"kgup\"><input type=\"checkbox\" class=\"option-checkbox\" name=\"kgup\" id=\"kgup\"/>KGÜP</label>\n      <label for=\"eak\"><input type=\"checkbox\" class=\"option-checkbox\" name=\"eak\" id=\"eak\"/>EAK</label>\n      <label for=\"uretim\"><input type=\"checkbox\" class=\"option-checkbox\" name=\"uretim\" id=\"uretim\"/>ÜRETİM</label>\n      </div>\n\n      </div>\n      </div>\n      <input type=\"submit\" onclick=\"event.preventDefault();getDataAndStore('${index}');\" value=\"Get Data\">\n\t\t</section>\n    </form>`;\n  var listItems = document.getElementById(\"portfolio_injections_list\");\n  listItems.innerHTML = \"\";\n  for (var i = 0; i < items.injections.length; i++) {\n    listItems.innerHTML += `\n      <li id=\"${items.injections[i].id + \"l\"}\">  \n        <input type=\"checkbox\" id=\"${items.injections[i].id}\" /> ${items.injections[i].name}\n      </li>\n    `;\n  }\n}\n\nvar globalCheckboxes = []\nvar globalInjections = []\n\nfunction getDataAndStore(index) {\n  var requestedPortfolio = Office.context.document.settings.get(index);\n  //console.log(requestedPortfolio)\n  globalCheckboxes = []\n  globalInjections = []\n  var list_object;\n  var startDate = document.getElementById(\"startDate\").value;\n  var endDate = document.getElementById(\"endDate\").value;\n  var kgupCheckbox = document.getElementById(\"kgup\");\n  var eakCheckbox = document.getElementById(\"eak\");\n  var uretimCheckbox = document.getElementById(\"uretim\");\n  requestedPortfolio.injections.forEach((inj) => {\n    list_object = document.getElementById(`${inj.id}`);\n    //console.log(\"ge\")\n    if (list_object.checked == true) {\n      globalInjections.push(inj)\n      if (kgupCheckbox.checked){\n        kgupRequest(\"production/dpp\", endDate, inj.org_eic, startDate, inj.eic, index);\n        globalCheckboxes[0] = \"kgüp\"\n      }\n      if (eakCheckbox.checked){\n        eakRequest(\"production/aic\", endDate, inj.org_eic, startDate, inj.eic, index);\n        globalCheckboxes[1] = \"eak\"\n      }\n      if (uretimCheckbox.checked){\n        uretimRequest(\"production/real-time-generation_with_powerplant\", endDate, inj.id, startDate, index);\n        globalCheckboxes[2] = \"üretim\"\n      }\n        \n    }\n  });\n  console.log(globalCheckboxes)\n  console.log(globalInjections)\n  if (globalInjections != [] && (kgupCheckbox.checked || eakCheckbox.checked || uretimCheckbox.checked)){\n    run(globalInjections, globalCheckboxes)\n  }\n  kgupCheckbox.checked = false;\n  eakCheckbox.checked = false;\n  uretimCheckbox.checked = false;\n  //console.log(kgupCheckbox.checked)\n}\n\nfunction santralTipiCheck(data) {\n  var santralTipi = \"\";\n  data.dogalgaz > 0 ? (santralTipi = \"Doğalgaz\") : \"\";\n  data.ruzgar > 0 ? (santralTipi = \"Rüzgar\") : \"\";\n  data.linyit > 0 ? (santralTipi = \"Linyit\") : \"\";\n  data.tasKomur > 0 ? (santralTipi = \"Taş Kömür\") : \"\";\n  data.ithalKomur > 0 ? (santralTipi = \"İthal Kömür\") : \"\";\n  data.fuelOil > 0 ? (santralTipi = \"Benzin\") : \"\";\n  data.jeotermal > 0 ? (santralTipi = \"Jeotermal\") : \"\";\n  data.barajli > 0 ? (santralTipi = \"Baraj\") : \"\";\n  data.nafta > 0 ? (santralTipi = \"Nafta\") : \"\";\n  data.biokutle > 0 ? (santralTipi = \"Biokütle\") : \"\";\n  data.akarsu > 0 ? (santralTipi = \"Akarsu\") : \"\";\n  data.diger > 0 ? (santralTipi = \"Diğer\") : \"\";\n  return santralTipi;\n}\n\nfunction kgupRequest(url_added, endDate, org_eic, startDate, eic, index) {\n  var toplam = [];\n  var tarih = [];\n  var saat = [];\n  var santralTipi, santralTipiAtanan;\n  var url = `https://seffaflik.epias.com.tr/transparency/service/${url_added}?endDate=${endDate}&organizationEIC=${org_eic}&startDate=${startDate}&uevcbEIC=${eic}`;\n  var xhr = new XMLHttpRequest();\n  xhr.open(\"GET\", url, true);\n  xhr.onload = function() {\n    if (this.status === 200) {\n      //console.log(\"kgup req\");\n      var posts = JSON.parse(this.responseText);\n      //console.log(posts.body);\n      posts.body.dppList.forEach((data) => {\n        toplam.push(data.toplam);\n        tarih.push(data.tarih);\n        saat.push(data.saat);\n        santralTipi = santralTipiCheck(data);\n        santralTipi != \"\" ? santralTipiAtanan = santralTipi : \"\"\n      });\n    }\n    var portfolio = Office.context.document.settings.get(index);\n    var santraller = portfolio.injections;\n    santraller.forEach((data) => {\n      if ((data.santral_tipi == undefined || data.santral_tipi == \"\") && data.eic == eic && santralTipiAtanan != \"\") {\n        data.santral_tipi = santralTipiAtanan;\n        Office.context.document.settings.set(index, portfolio);\n        persistSettings();\n      }\n    });\n  };\n  xhr.send();\n  \n}\n\nasync function run(injections,checkboxes) {\n  await Excel.run(async (context) => {\n    const sheet = context.workbook.worksheets.getActiveWorksheet();\n    var celda = sheet.getRange();\n    celda.clear();\n    await context.sync();\n    var tr = sheet.getRange(\"A2\");\n    tr.values = \"tarih\"\n    var ce = sheet.getRange(\"B2\");\n    var se = sheet.getRange(\"C1\");\n    var length = 0;\n    checkboxes.length == 3 ? length = 4 : checkboxes.length == 2 ? length = 6 : checkboxes.length == 1 ? length = 8 : \"\"\n    var counter = 1;\n    for (var i = 0; i < injections.length; i++) {\n      i == 0 ? se.getOffsetRange(0, i).values = injections[i].name + \" (\" + injections[i].santral_tipi + \")\" : se.getOffsetRange(0, counter-1).values = injections[i].name + \" (\" + injections[i].santral_tipi + \")\";\n      for (var j = 0; j < checkboxes.length; j++) {\n        \n        ce.getOffsetRange(0, counter).values = checkboxes[j]\n        j == checkboxes.length - 1 ? counter += 5 : counter++;\n      }\n    }\n\n   \n    \n    //console.log(celda,fila,ce)\n  });\n}\n\nfunction eakRequest(url_added, endDate, org_eic, startDate, eic, index) {\n  var toplam = [];\n  var tarih = [];\n  var saat = [];\n  var santralTipi, santralTipiAtanan;\n  var url = `https://seffaflik.epias.com.tr/transparency/service/${url_added}?endDate=${endDate}&organizationEIC=${org_eic}&startDate=${startDate}&uevcbEIC=${eic}`;\n  var xhr = new XMLHttpRequest();\n  xhr.open(\"GET\", url, true);\n  xhr.onload = function() {\n    if (this.status === 200) {\n      //console.log(\"eak req\");\n      var posts = JSON.parse(this.responseText);\n      //console.log(posts.body);\n      posts.body.aicList.forEach((data) => {\n        toplam.push(data.toplam);\n        tarih.push(data.tarih);\n        saat.push(data.saat);\n        santralTipi = santralTipiCheck(data);\n        santralTipi != \"\" ? santralTipiAtanan = santralTipi : \"\"\n      });\n    }\n    var portfolio = Office.context.document.settings.get(index);\n    var santraller = portfolio.injections;\n    santraller.forEach((data) => {\n      if ((data.santral_tipi == undefined || data.santral_tipi == \"\") && data.eic == eic && santralTipiAtanan != \"\") {\n        data.santral_tipi = santralTipi;\n        Office.context.document.settings.set(index, portfolio);\n        persistSettings();\n      }\n    });\n    console.log(portfolio.injections);\n  };\n  xhr.send();\n}\n\nfunction uretimRequest(url_added, endDate, id, startDate, index) {\n  var url = `https://seffaflik.epias.com.tr/transparency/service/${url_added}?endDate=${endDate}&powerPlantId=${id}&startDate=${startDate}`;\n  var xhr = new XMLHttpRequest();\n  xhr.open(\"GET\", url, true);\n  xhr.onload = function() {\n    if (this.status === 200) {\n      var posts = JSON.parse(this.responseText);\n      console.log(\"uretim req\");\n      console.log(posts);\n    }\n  };\n  xhr.send();\n}\n\nfunction removeSelected(index) {\n  var checker = true;\n  if (Office.context.document.settings.get(index).injections.length > 0) {\n    var list_object,\n      list_object2,\n      temp = [];\n    var valid_object = Office.context.document.settings.get(index);\n    valid_object.injections.forEach((inj) => {\n      list_object = document.getElementById(`${inj.id}`);\n      if (list_object.checked == true) {\n        list_object2 = document.getElementById(`${inj.id + \"l\"}`);\n        list_object2.remove(list_object2.selectedIndex);\n        checker = false;\n      } else {\n        temp.push(inj);\n      }\n    });\n    if (!checker) {\n      valid_object.injections = temp;\n      Office.context.document.settings.set(index, valid_object);\n      persistSettings();\n    }\n  } else return;\n}\n\nfunction clearList(index) {\n  if (Office.context.document.settings.get(index).injections != 0) {\n    var list_object;\n    var valid_object = Office.context.document.settings.get(index);\n    valid_object.injections.forEach((inj) => {\n      list_object = document.getElementById(`${inj.id + \"l\"}`);\n      list_object.remove(list_object.selectedIndex);\n    });\n    valid_object.injections = [];\n    Office.context.document.settings.set(index, valid_object);\n    persistSettings();\n  } else return;\n}\n\nvar expanded = false;\n\nfunction showCheckboxes() {\n  var checkboxes = document.getElementById(\"checkboxList\");\n  if (!expanded) {\n    checkboxes.style.display = \"block\";\n    expanded = true;\n  } else {\n    checkboxes.style.display = \"none\";\n    expanded = false;\n  }\n}\n\nfunction onFormSubmit() {}\n\nfunction readFormData() {}\n\nfunction addPortfoliosToDropdown(item) {\n  var list = document.getElementById(\"portfolioSelect\");\n  list.innerHTML += `\n      <option id=\"${item}\" value=\"${item}\">\n        ${Office.context.document.settings.get(item).portfolioName}\n      </option>\n    `;\n}\n\nfunction getPortfoliosFromOffice() {\n  //console.log(Office.context.document.settings.get(\"portfolioLength\"));\n  var list = document.getElementById(\"portfolioSelect\");\n  list.innerHTML = \"\";\n  for (var i = 0; i < Office.context.document.settings.get(\"portfolioLength\"); i++) {\n    Office.context.document.settings.get(\"p\" + i) != null\n      ? (list.innerHTML += `\n      <option id=\"${\"p\" + i}\" value=\"${\"p\" + i}\">\n        ${Office.context.document.settings.get(\"p\" + i).portfolioName}\n      </option>\n    `)\n      : \"\";\n  }\n}\n\nfunction selectedPortfolioLoad() {\n  var opt = document.getElementById(\"portfolioSelect\");\n  var opts = opt.options[opt.selectedIndex].value;\n  addPortfolioItem(Office.context.document.settings.get(opts), opts);\n  console.log(opts);\n}\n\nclass Injection {\n  constructor(id, name, eic, org_eic, santral_tipi) {\n    this.id = id;\n    this.name = name;\n    this.eic = eic;\n    this.org_eic = org_eic;\n    this.santral_tipi = santral_tipi;\n  }\n}\n\nclass Organization {\n  constructor(organizationId, organizationName, organizationETSOCode, injectionsList) {\n    this.organizationId = organizationId;\n    this.organizationName = organizationName;\n    this.organizationETSOCode = organizationETSOCode;\n    this.injectionsList = null;\n  }\n}\n\nclass Portfolio {\n  static portfolioCount = 0;\n  constructor(portfolioName, injections) {\n    this.portfolioName = portfolioName;\n    this.injections = injections;\n  }\n}\n\nvar list;\nvar organizationList = [];\n\nfunction getOrganizationList() {\n  var url = \"https://seffaflik.epias.com.tr/transparency/service/production/dpp-organization?organizationName=\";\n  var xhr = new XMLHttpRequest();\n  xhr.open(\"GET\", url, true);\n  var i = 0;\n  xhr.onload = function() {\n    if (this.status === 200) {\n      var posts = JSON.parse(this.responseText);\n      posts.body.organizations.forEach((obj) => {\n        organizationList.push(\n          new Organization(obj.organizationId, obj.organizationName, obj.organizationETSOCode, obj.injectionsList)\n        );\n        var temp = [];\n        var url_inj = `https://seffaflik.epias.com.tr/transparency/service/production/dpp-injection-unit-name?organizationEIC=${\n          obj.organizationETSOCode\n        }`;\n        var xhr2 = new XMLHttpRequest();\n        xhr2.open(\"GET\", url_inj, true);\n        xhr2.onload = function() {\n          if (this.status === 200) {\n            var posts = JSON.parse(this.responseText);\n            posts.body.injectionUnitNames.forEach((obj2) => {\n              if (!document.getElementById(`${obj2.id}`)) {\n                var injection = new Injection(obj2.id, obj2.name, obj2.eic, obj.organizationETSOCode, \"\");\n                temp.push(injection);\n              }\n            });\n          } else {\n            console.log(\"error findInections\");\n          }\n        };\n        xhr2.send();\n        organizationList[i].injectionsList = temp;\n        Office.context.document.settings.set(`${i}`, organizationList[i]);\n        i++;\n      });\n      Office.context.document.settings.set(\"length\", i);\n    } else {\n      console.log(\"error getOrganizationList\");\n    }\n  };\n  xhr.send();\n}\n\n// function findInjections() {\n//   var id_name, founded, list;\n//   list = document.querySelector(\"#injections_list\");\n//   list.innerHTML = \"\";\n//   organizationList.forEach((obj) => {\n//     id_name = obj.organizationId;\n//     founded = document.getElementById(`${id_name}`);\n//     obj.injectionsList = [];\n//     if (founded.checked == true) {\n//       document.getElementById(\"checkAllInjections\").disabled = false;\n//       var url = `https://seffaflik.epias.com.tr/transparency/service/production/dpp-injection-unit-name?organizationEIC=${\n//         obj.organizationETSOCode\n//       }`;\n//       var xhr = new XMLHttpRequest();\n//       xhr.open(\"GET\", url, true);\n//       xhr.onload = function() {\n//         if (this.status === 200) {\n//           var posts = JSON.parse(this.responseText);\n//           posts.body.injectionUnitNames.forEach((obj2) => {\n//             if (!document.getElementById(`${obj2.id}`)) {\n//               var injection = new Injection(obj2.id, obj2.name, obj2.eic);\n//               obj.injectionsList.push(injection);\n//               list.innerHTML += `\n//          <li> <a> <input type=\"checkbox\" class=\"checkboxInjections\" id=${obj2.id}/> ${obj2.name} </a> </li>\n//       `;\n//             }\n//           });\n//         } else {\n//           console.log(\"error findInections\");\n//         }\n//       };\n//       xhr.send();\n//     }\n//   });\n//   console.log(organizationList);\n// }\n"
  language: typescript
template:
  content: "<ul class=\"navbar\" id=\"main_navbar\">\n\t<li class=\"navbar\"><a href=\"#home\" onclick=\"show('page1','page2')\">Home</a></li>\n\t<li class=\"navbar\"><a href=\" #news\" onclick=\"show('page2','page1')\">Test</a></li>\n</ul>\n<div id=\"page1\">\n\t<form onsubmit=\"event.preventDefault();onFormSubmit();\" autocomplete=\"off\">\n\n\t\t<section class=\"ms-font-m\">\n\t\t\t<span>Organization List:</span><br>\n\t\t\t<input type=\"text\" id=\"searchBox\" onkeyup=\"searchFunction()\" placeholder=\"Search\">\n\t\t\t</section>\n\n\t\t\t<section class=\"samples ms-font-m\">\n\t\t\t\t<div id=\"organizations\" class=\"container\">\n\t\t\t\t\t<ul id=\"organizations_list\">\n\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t\t<br>\n\t\t\t\t<button type=\"button\" onclick=\"findInjections()\">Select</button>\n\t\t\t\t<button type=\"button\" onclick=\"refresh()\">Refresh</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"samples ms-font-m\">\n\t\t\t\t<p> Selected Organization's Injection Unit List: </p>\n\t\t\t\t<span>\n\t\t\t\t\t\tCheck All:\n\t\t\t\t\t\t<input type=\"checkbox\" id=\"checkAllInjections\" onClick=\"toggle(this)\" >\n\t\t\t\t\t</span>\n\t\t\t\t<div id=\"injections\" class=\"container\">\n\t\t\t\t\t<ul id=\"injections_list\">\n\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t\t<br>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"samples ms-font-m\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\tPortfolio Name: <br>\n\t\t\t\t\t\t<input type=\"text\" id=\"portfolioSpace\">\n\t\t\t\t\t\t\n\t\t\t\t\t</span>\n\n\t\t\t\t</section>\n\t\t\t\t<div class=\"form-action-buttons\">\n\t\t\t\t\t<input type=\"submit\" id=\"createPortfolioButton\" onclick=\"createPortfolio();\" value=\"Create Portfolio\"/>\n\t\t\t\t</div>\n\t\t\t\t\t<div class=\"form-action-buttons\">\n\t\t\t\t\t\t<input type=\"submit\" style=\"display:none\" id=\"updatePortfolioButton\" onclick=\"saveAndUpdatePortfolio();\" value=\"Update Portfolio\"/>\n\t\t\t\t\t</div>\n\t</form>\n\n</div>\n<div id=\"page2\">\n\n\t<form onsubmit=\"event.preventDefault();selectedPortfolioLoad();\">\n\t\t<label for=\"portfolios\">Select portfolio: </label>\n\t\t<select name=\"portfolios\" id=\"portfolioSelect\">\n\t  </select>\n\t\t<br><br>\n\t\t<input id=\"portfolioSelectButton\" type=\"submit\" value=\"Select Portfolio\">\n\t</form>\n\t\t<div id=\"portfolio-pages\">\n\n\t\t</div>\n</div>\n<div id=\"message\"> </div>"
  language: html
style:
  content: >
    section.samples {
        margin-top: 20px;
    }


    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }


    .container { border:2px solid #ccc; width:300px; height: 100px; overflow-y:
    scroll; }


    ul {
      list-style:none
    }


    ul.navbar {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: lightcyan
    }


    li.navbar {
      float: left;
      border: green;
    }


    li.navbar a {
      
      display: block;
      color: black;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }


    li.navbar a:hover {
      background-color: green;
    }


    .multiSelect{
      width: 200px;
    }


    .selectBox{
      position:relative;
    }


    .selectBox select{
      font-weight: bold;
      width: 100%;
    }


    .overSelect{
      position: absolute;
      left: 0; right: 0; top: 0; left: 0;
    }


    #checkboxList {
      display: none;
      border: 6px #dadada solid;
    }


    #checkboxList label {
      display:block;
    }

    #checkboxList label:hover {
      background-color: #1e90ff;
    }
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  [email protected]/dist/css/fabric.min.css
  [email protected]/dist/css/fabric.components.min.css

  [email protected]/client/core.min.js
  @types/core-js

  [email protected]
  @types/[email protected]