Sample special solution with JSON data
For necessary information that needs integrating to your website from a personal database and for which our components do not offer a standard solution, then there are options for website owners to program their own solutions.
In order to have an own solution, you would need to apply for an application integration and if approved, you will receive either a JSON or a Scriptnode component depending on your needs.
Implementation, scripting and maintenance of special solutions is the responsibility of the website owner. We cannot provide assistance with this. There is the option to apply for Software Services to program a special solution for a customer, but the cost of the solution will be borne by the website owner and there is no guarantee of time of implementation as internal projects and resources take precedence.
The following example spinoff table solution is provided for informational purposes only to gain an understanding of how the special components can be used. Further explanations can be found in the DownloadScripting Course Handout (PDF, 406 KB)vertical_align_bottom.
All special solutions must follow the current corporate web and application design guidelines (Link to styleguide will follow soon), as well as meet AA accessible requirements.
Example Spinoff table using a JSON display component
Name | Field | Founding Year | |
---|---|---|---|
3R Technics GmbH | Mechanical engineering and aerospace | 2003 | Detailsadd |
http://www.3r-technics.com/call_made | |||
4QT Holding AG | Electrical Engineering and electronics / Mechanical engineering and aerospace / Cleantech / Artificial Intelligence and Machine Learning / Energy / IoT / Construction / Sustainability | 2023 | Detailsadd |
https://www.4qt.chcall_made | |||
9T Labs AG | Materials / Additive Manufacturing | 2018 | Detailsadd |
https://www.9tlabs.com/call_made | |||
ABILITY Switzerland AG (acquired by medica Medizintechnik) | Mechanical engineering and aerospace | 2010 | Detailsadd |
https://www.ability-switzerland.comcall_made | |||
AEON Scientific AG | Mechanical engineering and aerospace | 2010 | Detailsadd |
http://www.aeon-scientific.com/call_made | |||
AEROTAIN AG | Mechanical engineering and aerospace | 2016 | Detailsadd |
http://www.aerotain.comcall_made | |||
AFC AG | Mechanical engineering and aerospace / Sensors and Analytics | 1996 | Detailsadd |
https://www.afc.ch/call_made | |||
AI2C Technologies AG | Information and Communications Technology | 2021 | Detailsadd |
https://www.ai2c.ch/call_made | |||
ANSYS Switzerland GmbH | Mechanical engineering and aerospace | 2004 | Detailsadd |
https://www.ansys.com/call_made | |||
ANYbotics AG | Mechanical engineering and aerospace / Robotics | 2016 | Detailsadd |
http://www.anybotics.com/call_made | |||
ASCOMP AG | Mechanical engineering and aerospace | 2004 | Detailsadd |
https://N/Acall_made | |||
Additively AG | Mechanical engineering and aerospace | 2013 | Detailsadd |
https://www.additively.comcall_made | |||
Alivion AG | Medtech / Sensors and Analytics / Foodtech | 2020 | Detailsadd |
https://www.alivion.ch/call_made | |||
Antefil Composite Tech AG | Materials / Micro and Nanotechnology / Cleantech / Energy / Sustainability | 2022 | Detailsadd |
https://www.antefil.com/call_made | |||
Archlet AG | Information and Communications Technology | 2020 | Detailsadd |
https://www.archlet.io/call_made | |||
AtlasVR AG | Information and Communications Technology / Artificial Intelligence and Machine Learning | 2022 | Detailsadd |
https://atlasvr.ch/call_made | |||
AutoForm AG (acquired by Astorg Partners) | Information and Communications Technology / Mechanical engineering and aerospace | 1995 | Detailsadd |
https://www.autoform.comcall_made | |||
Bota Systems AG | Mechanical engineering and aerospace / Sensors and Analytics / Robotics | 2020 | Detailsadd |
https://www.botasys.com/call_made | |||
Bottleplus AG | Mechanical engineering and aerospace / Consumer Goods / Foodtech | 2022 | Detailsadd |
https://bottleplus.com/call_made | |||
Chiral Nano AG | Materials / Electrical Engineering and electronics / Micro and Nanotechnology / Robotics | 2023 | Detailsadd |
https://www.chiralnano.com/call_made | |||
Citus AG | Medtech | 2023 | Detailsadd |
https://www.citus-ag.com/call_made | |||
Climeworks AG | Mechanical engineering and aerospace | 2009 | Detailsadd |
http://www.climeworks.com/call_made | |||
Compliant concept AG | Mechanical engineering and aerospace | 2009 | Detailsadd |
https://www.compliant-concept.ch/call_made | |||
Delta 3D GmbH | Mechanical engineering and aerospace | 1998 | Detailsadd |
http://www.3d-sw.com/call_made | |||
Distran AG | Electrical Engineering and electronics | 2013 | Detailsadd |
https://distran.swiss/call_made | |||
Duckieworks AG | Information and Communications Technology | 2020 | Detailsadd |
http://www.duckieworks.chcall_made | |||
Dynamore Swiss GmbH | Materials | 2011 | Detailsadd |
https://www.dynamore.ch/en/call_made | |||
EMFab GmbH | Electrical Engineering and electronics | 2014 | Detailsadd |
http://www.em-fab.chcall_made | |||
ENANTIOS GmbH | Biotech & Pharma / Mechanical engineering and aerospace | 2023 | Detailsadd |
https://enantios.com/call_made | |||
EVTEC AG | Electrical Engineering and electronics | 2010 | Detailsadd |
https://www.evtec.ch/call_made | |||
ElectricFeel AG | Information and Communications Technology | 2012 | Detailsadd |
http://www.electricfeel.com/call_made | |||
FemtoTools GmbH | Micro and Nanotechnology | 2007 | Detailsadd |
https://www.femtotools.com/call_made | |||
Fision AG | Information and Communications Technology | 0 | Detailsadd |
https://zalando.chcall_made | |||
Floating Robotics AG | Information and Communications Technology / Mechanical engineering and aerospace | 2023 | Detailsadd |
https://www.floatingrobotics.com/call_made | |||
Foodlab GmbH/ Tastelab | others / Foodtech | 2017 | Detailsadd |
https://www.tastelab.chcall_made | |||
Forminnotech GmbH | Mechanical engineering and aerospace | 2002 | Detailsadd |
http://www.forminnotech.ethz.ch/call_made | |||
Fotokite AG | Electrical Engineering and electronics / Mechanical engineering and aerospace / Drone Technologies | 2014 | Detailsadd |
https://fotokite.com/de/call_made | |||
Frontier Lattices GmbH | Information and Communications Technology | 2010 | Detailsadd |
GeoNum GmbH | others | 2006 | Detailsadd |
Gravis Robotics AG | Mechanical engineering and aerospace / Construction / Robotics | 2022 | Detailsadd |
https://gravisrobotics.com/call_made | |||
Hallcube GmbH | Micro and Nanotechnology / Sensors and Analytics | 2019 | Detailsadd |
https://N/Acall_made | |||
HeiQ Materials AG | Chemicals and Processes | 2005 | Detailsadd |
https://heiq.com/call_made | |||
Hylomorph AG | Medtech / Micro and Nanotechnology | 2014 | Detailsadd |
http://www.hylomorph-medical.com/call_made | |||
Ingenieurbüro G?tsch AG | Information and Communications Technology | 2000 | Detailsadd |
https://kmu-informatik.ch/decall_made | |||
Ingeno Solutions AG | Information and Communications Technology | 1980 | Detailsadd |
https://N/Acall_made | |||
InkVivo Technologies SA | Biotech & Pharma / LifeSciences | 2023 | Detailsadd |
https://inkvivo.tech/call_made | |||
Inspacion AG | Information and Communications Technology / Mechanical engineering and aerospace | 2017 | Detailsadd |
https://www.inspacion.comcall_made | |||
Instructive Construction AG | Information and Communications Technology / Mechanical engineering and aerospace / PropTech | 2021 | Detailsadd |
http://incon.ai/call_made | |||
Intelliact AG | Information and Communications Technology | 1999 | Detailsadd |
https://intelliact.ch/call_made | |||
JAUMANN Werke GmbH (Prazoplan) | Mechanical engineering and aerospace | 2008 | Detailsadd |
Jourdan Software Engineering | Information and Communications Technology | 2003 | Detailsadd |
http://www.jourdan-software.ch/call_made | |||
Kobe Consulting | Consulting and Services | 2008 | Detailsadd |
http://www.kobe-consulting.ch/call_made | |||
Kringlan Composites AG | Chemicals and Processes | 2007 | Detailsadd |
LLS Biomechanics GmbH | Medtech / Mechanical engineering and aerospace | 2015 | Detailsadd |
https://llsbiomechanics.ch/call_made | |||
Limmat Scientific AG | Mechanical engineering and aerospace | 2005 | Detailsadd |
https://www.limmatscientific.ch/call_made | |||
MSE MEILI - Multiphase Systems Engineering | Mechanical engineering and aerospace | 0 | Detailsadd |
https://www.msemeili.ch/call_made | |||
Magnebotix AG | Mechanical engineering and aerospace / Micro and Nanotechnology | 2014 | Detailsadd |
https://www.magnebotix.com/call_made | |||
Magnes AG | Mechanical engineering and aerospace / Healthtech | 2015 | Detailsadd |
https://www.magnes.chcall_made | |||
Mantis Technologies GmbH | Information and Communications Technology | 2020 | Detailsadd |
https://www.mantistechnologies.chcall_made | |||
Manukai AG | Information and Communications Technology / Medtech / Mechanical engineering and aerospace / Artificial Intelligence and Machine Learning / Industry 4.0 / Consulting and Services / IoT / Robotics / Sustainability | 2023 | Detailsadd |
https://www.manukai.chcall_made | |||
Mecos AG | Mechanical engineering and aerospace | 1988 | Detailsadd |
https://www.mecos.comcall_made | |||
MicroGauge AG | Mechanical engineering and aerospace | 2016 | Detailsadd |
http://www.microgauge.ch/call_made | |||
NLP GmbH | Information and Communications Technology / Mechanical engineering and aerospace | 2019 | Detailsadd |
https://www.beratics.comcall_made | |||
NanoFlex Robotics AG | Diagnostics / Medtech / Artificial Intelligence and Machine Learning / Robotics | 2021 | Detailsadd |
https://nanoflexrobotics.com/call_made | |||
Neustark AG | Materials / Mechanical engineering and aerospace / Cleantech / Sustainability | 2019 | Detailsadd |
https://neustark.com/call_made | |||
OptoTune Switzerland AG | Micro and Nanotechnology | 2008 | Detailsadd |
http://www.optotune.com/call_made | |||
Oxyle AG | Micro and Nanotechnology / Cleantech | 2020 | Detailsadd |
https://oxyle.chcall_made | |||
Pathos Labs GmbH | Mechanical engineering and aerospace / others | 2022 | Detailsadd |
https://www.wysszurich.ch/projects/pathoscall_made | |||
Pregnolia AG | Diagnostics / Medtech / Mechanical engineering and aerospace | 2016 | Detailsadd |
https://www.pregnolia.com/call_made | |||
Rapyuta Robotics AG | Information and Communications Technology / Mechanical engineering and aerospace / Robotics | 2014 | Detailsadd |
https://www.rapyuta-robotics.com/call_made | |||
ReClimate Energy Capital AG | Information and Communications Technology | 2011 | Detailsadd |
Rehaptix GmbH | Medtech | 2013 | Detailsadd |
http://www.rehaptix.comcall_made | |||
Rheonics GmbH (former Viscoteers) | Mechanical engineering and aerospace | 2011 | Detailsadd |
http://www.rheonics.com/call_made | |||
Rimon Technologies GmbH | Information and Communications Technology / Mechanical engineering and aerospace / Artificial Intelligence and Machine Learning / Industry 4.0 | 2020 | Detailsadd |
https://rimon-ar.ch/call_made | |||
RosieReality GmbH | Information and Communications Technology | 2018 | Detailsadd |
http://rosiereality.ch/call_made | |||
Rotavis AG | Mechanical engineering and aerospace | 2011 | Detailsadd |
https://www.rotavis.ch/call_made | |||
SIGMAtools GmbH | Electrical Engineering and electronics / Mechanical engineering and aerospace / Energy / Consulting and Services | 2014 | Detailsadd |
http://www.sigmatools.chcall_made | |||
Scewo AG | Mechanical engineering and aerospace / Consumer Goods / Robotics | 2017 | Detailsadd |
https://scewo.ch/call_made | |||
Scrona AG | Materials / Information and Communications Technology | 2014 | Detailsadd |
http://www.scrona.comcall_made | |||
Senecell AG | Biotech & Pharma | 2021 | Detailsadd |
Sevensense Robotics AG (aquired by ABB Switzerland) | Information and Communications Technology / Mechanical engineering and aerospace | 2018 | Detailsadd |
https://sevensense.aicall_made | |||
Skybotix AG (aquired by GoPro Switzerland AG) | Mechanical engineering and aerospace | 2009 | Detailsadd |
Streamwise GmbH | Mechanical engineering and aerospace | 2010 | Detailsadd |
http://www.streamwise.ch/call_made | |||
Sunbiotec AG | Mechanical engineering and aerospace | 2012 | Detailsadd |
https://sunbiotec.chcall_made | |||
Swiss AI AG | Information and Communications Technology / Mechanical engineering and aerospace | 2019 | Detailsadd |
https://swissai.com/call_made | |||
Swiss-Mile Robotics AG | Mechanical engineering and aerospace / Robotics | 2023 | Detailsadd |
https://www.swiss-mile.comcall_made | |||
Synhelion SA | Mechanical engineering and aerospace / Cleantech / Energy / Sustainability | 2017 | Detailsadd |
https://synhelion.comcall_made | |||
TellWare GmbH | Information and Communications Technology / others | 1998 | Detailsadd |
https://N/Acall_made | |||
TomFit AG | LifeSciences | 2023 | Detailsadd |
https://www.tom.fitcall_made | |||
Tribecraft AG | Mechanical engineering and aerospace | 1999 | Detailsadd |
https://www.tribecraft.ch/call_made | |||
UNISERS AG | Materials / Micro and Nanotechnology | 2019 | Detailsadd |
http://unisers.ch/call_made | |||
VAY AG (acquired by Nautilus) | Information and Communications Technology / Artificial Intelligence and Machine Learning | 2020 | Detailsadd |
https://vay.ai/call_made | |||
Verity AG | Information and Communications Technology / Mechanical engineering and aerospace / Drone Technologies | 2014 | Detailsadd |
https://www.veritystudios.com/call_made | |||
Vir2sense GmbH | Mechanical engineering and aerospace | 2016 | Detailsadd |
https://www.vir2sense.com/call_made | |||
Voliro AG | Information and Communications Technology / Mechanical engineering and aerospace / Drone Technologies | 2019 | Detailsadd |
https://www.voliro.comcall_made | |||
Waygate Technologies Robotics AG | Mechanical engineering and aerospace | 2006 | Detailsadd |
http://www.inspection-robotics.comcall_made | |||
Wingtra AG | Information and Communications Technology / Mechanical engineering and aerospace / Drone Technologies | 2016 | Detailsadd |
https://wingtra.com/call_made | |||
a-metal | Electrical Engineering and electronics / Mechanical engineering and aerospace / Industry 4.0 / IoT / Sustainability / Additive Manufacturing | 2024 | Detailsadd |
https://www.a-metal.comcall_made | |||
adlyte AG | Mechanical engineering and aerospace | 2010 | Detailsadd |
http://www.adlyte.com/call_made | |||
aeroscout GmbH | Mechanical engineering and aerospace | 2006 | Detailsadd |
https://www.aeroscout.ch/call_made | |||
aiEndoscopic AG | Medtech / Artificial Intelligence and Machine Learning | 2023 | Detailsadd |
https://aiendoscopic.com/call_made | |||
anronaut GmbH | Mechanical engineering and aerospace | 1998 | Detailsadd |
https://www.anronaut.ch/call_made | |||
breathe medical AG | Electrical Engineering and electronics / Medtech / Healthtech | 2023 | Detailsadd |
https://breathe-medical.ch/call_made | |||
combustion and flow solutions GmbH | Information and Communications Technology / Mechanical engineering and aerospace | 2006 | Detailsadd |
http://www.combustion-flow-solutions.com/call_made | |||
etavalve GmbH | Mechanical engineering and aerospace / Industry 4.0 / Sustainability | 2023 | Detailsadd |
https://www.etavalve.comcall_made | |||
greenTEG AG | Electrical Engineering and electronics | 2009 | Detailsadd |
https://www.greenteg.com/call_made | |||
gs-soft AG | Information and Communications Technology | 1986 | Detailsadd |
https://www.gs-soft.comcall_made | |||
iCapp GmbH | Mechanical engineering and aerospace | 2000 | Detailsadd |
https://www.icapp.ch/call_made | |||
mimic robotics AG | Artificial Intelligence and Machine Learning / Robotics | 2024 | Detailsadd |
https://www.mimicrobotics.comcall_made | |||
monolitix AG | Materials | 2012 | Detailsadd |
http://www.monolitix.com/call_made | |||
noonee AG | Mechanical engineering and aerospace / Consumer Goods | 2014 | Detailsadd |
http://www.noonee.com/call_made | |||
swissQuant Group AG | Information and Communications Technology | 2005 | Detailsadd |
https://www.swissquant.com/de/call_made | |||
swissbiomechanics AG | Medtech | 2008 | Detailsadd |
https://www.swissbiomechanics.ch/call_made | |||
ucentrics AG | Information and Communications Technology / Mechanical engineering and aerospace / Artificial Intelligence and Machine Learning / Industry 4.0 | 2024 | Detailsadd |
https://N/Acall_made | |||
weControl GmbH | Mechanical engineering and aerospace | 2000 | Detailsadd |
https://www.wecontrol.ch/call_made |
Component dialogue
The component uses an Entry Point file (index.esp). This file can reference other files such as other script files or style sheet files such as the SpinOff.css shown in Figure 1.
Either the JSON data can be added in the component as a file itself, if static, but if updated continuously, this file might exist on an external server and can be referenced from the URL field.
The LABELS tab provides a place for the consolidation of labels used in the final solution's display (Figure 2).
Index.esp file example
<link rel="stylesheet" type="text/css" href="<%=scriptHelper.mapToUri(scriptHelper.getPath()) %>/SpinOffs.css" />
<div><b><ethz:label value="intro" /></b></div>
<!-- removed "full-width spacing-top" -->
<div class="table-matrix">
<div class="scrollarea">
<div class="scrollarea-main">
<div class="scrollarea-scroll-window">
<div class="scrollarea-content">
<table id="spinOffTable" class="spinoff expandableTable tablesorter">
<colgroup>
<col class="col1">
<col class="col2">
<col class="col3">
<col class="col4">
</colgroup>
<thead>
<tr class="last-child">
<th><ethz:label value="name" /></th>
<th><ethz:label value="field" /></th>
<th><ethz:label value="year" /></th>
<th></th>
</tr>
</thead>
<tbody id="spinOffTableBody">
<ethz:iter var="row" root="data">
<tr class="trSubtext">
<td><%=row.get("attributes.name") %></td>
<td><%=JSON.parse(row.get("attributes.areas")).join(" / ") %></td>
<td><%=row.get("attributes.year") %></td>
<td class="right-align detail"><a href="#" class="toggle eth-link" title="more"><ethz:label value="details" /><span class="material-icons">add</span></a></td></tr>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4" style="display: none;">
<%
var url = row.get("attributes.url");
if (!"".equals(url) && url.substr(7)) {
%>
<a class="eth-link" href='<%=url %>' title='<%=row.get("attributes.name") %>' target="_blank">
<%=url %><span aria-hidden="true" class="material-icons">call_made</span>
</a>
<%
}
%>
</td>
</tr>
</ethz:iter>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// table sorter (jQuery)
$('#spinOffTable').tablesorter({
cssChildRow: "tablesorter-childRow",
headers: {
3: {sorter: false}
}
});
$('#spinOffTable').delegate('.toggle', 'click', function() {
if ($(this).find("span:contains(add)").length > 0) {
$(this).html("<ethz:label value="hide" /><span class='material-icons'>remove</span>");
} else {
$(this).html("<ethz:label value="details" /><span class='material-icons'>add</span>");
}
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
return false;
});
</script>
SpinOffs.css file example
fieldset.spin-off {
background-color: #ffffff;
border: medium none;
padding: 0;
}
fieldset.spin-off div.grouping-box {
display: inline-block;
}
fieldset.spin-off div.filter-type div.box.full {
padding: 0;
width: 10rem;
}
fieldset.spin-off div.filter-value div.box.full {
padding: 0;
width: 20rem;
}
.comment-form.spin-off div.grouping-box {
width: inherit;
}
.table-matrix .scrollarea table.spinoff colgroup col.col1 {
width: 220px;
}
.table-matrix .scrollarea table.spinoff colgroup col.col2 {
width: 217px;
}
.table-matrix .scrollarea table.spinoff colgroup col.col3 {
width: 123px;
}
.table-matrix .scrollarea table.spinoff colgroup col.col4 {
width: 83px;
}
@media screen and (max-width: 1024px) {
.table-matrix .scrollarea table.spinoff thead th:nth-child(1) {
width: 220px;
}
.table-matrix .scrollarea table.spinoff thead th:nth-child(2) {
width: 217px;
}
.table-matrix .scrollarea table.spinoff thead th:nth-child(3) {
width: 123px;
}
.table-matrix .scrollarea table.spinoff thead th:nth-child(4) {
width: 83px;
}
}