Files
help365/platform/common_widget_settings.html
koziavin 00717a92fb
All checks were successful
Deploy Static Site / deploy (push) Successful in 6m6s
update
2025-05-29 16:42:45 +04:00

233 lines
27 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<title>System widget settings</title>
<meta name="generator" content="Help+Manual" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="System settings are the same for all the widgets. They are used to configure a widgets visibility and access to its data, define what happens, when the user moves or hovers..." />
<meta name="picture" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Full documentation for BRIX365 platform. Low-code developer guide. User guide. Admin guide. Developer guide." />
<meta property="og:url" content="https://brix365.com/en/help" />
<meta property="og:image" content="" />
<link rel="icon" href="favicon.png" type="image/png" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./jquery-ui.min.css" />
<link rel="stylesheet" href="default.css" />
<link rel="stylesheet" href="./search-yandex.css" />
<link rel="stylesheet" href="./article.css" />
<link rel="stylesheet" href="./glossary.css" />
<link rel="stylesheet" href="./theme.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="helpman_settings.js"></script>
<script type="text/javascript" src="helpman_topicinit.js"></script>
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
$(document).ready(function(){highlight();});
</script>
</head>
<body>
<script>!function(e,t,c,n,r,a,m){e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=1*new Date;for(var s=0;s<document.scripts.length;s++)if(document.scripts[s].src===n)return;a=t.createElement(c),m=t.getElementsByTagName(c)[0],a.async=1,a.src=n,m.parentNode.insertBefore(a,m)}(window,document,"script","https://mc.yandex.ru/metrika/tag.js"),ym(83179930,"init",{clickmap:!0,trackLinks:!0,accurateTrackBounce:!0,webvisor:!0})</script><noscript><div><img alt=""src=https://mc.yandex.ru/watch/83179930 style=position:absolute;left:-9999px></div></noscript>
<header class="header elma-365">
<div class="container">
<a class="header__logo" href="https://brix365.com/en/help">
<img src="./logo-en.svg" alt="header logo">
</a>
<!-- <div class="hero__search-form" id="search-panel">
<form class="search-form" onsubmit="ym(83180416,'reachGoal','poisk')">
<label class="search-form__label">
<span id="reset-search" class="search__icon"></span>
<input class="search-form__input" type="text">
</label>
<input class="search-form__submit" type="submit" value="Submit">
</form>
</div> -->
<div class="hero__search-form" id="search-panel"> <form class="search-form"> <label class="search-form__label"> <span id="reset-search" class="search__icon"></span> <input class="search-form__input" type="text"> </label> <input class="search-form__submit" type="submit" value="Submit"> </form> </div>
<div class="hero__search">
<a href="#" id="search-icon" class="hero__search-icon">
<img src="search-icon-white.svg" alt="search string">
</a>
<a href="#" id="side-menu-icon" class="hero__side-icon">
<img src="side_menu.svg" alt="side menu">
</a>
</div>
<div class="header__navi">
<ul class="header__list"><li><span class="solution-select"><span class="solution-select__selected"></span><svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3.5L6 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg><ul class="solution-select__list"><li><a class="project-link" href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a class="project-link" href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://brix365.com/en/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li><li><a class="project-link" href="https://brix365.com/en/help/business_solutions/-elma365-store.html">Business Solutions</a></li></ul></span></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li><li><a href="https://tssdk.brix365.com/" target="_blank">SDK</a></li></ul>
</div>
</div>
</header>
<main class="main container">
<aside class="sidebar" id="sidebar">
<div class="sidebar__header">
<a class="header__logo" href="https://brix365.com/en/help">
<img src="./logo-light-en.svg">
</a>
<span class="sidebar__close elma-365-close" id="close"></span>
</div>
<div class="sidebar__wrapper" id="side-menu">
</div>
</aside>
<article class="article" id="article">
<div class="article-inner">
<div class="content">
<header class="article__header">
<div class="article__bread" style="display:flex; gap:10px;">
<span id="subcategory" class="search-res__item-category search-res__item-category_subcategory subcategory article__badge"></span>
<div class="topic__breadcrumbs">
<p>Low-code designer &gt; <a href="interface_settings.html">Set up interfaces</a> / System widget settings</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">System widget settings</span></h1>
</div>
</header>
<section class="article__content">
<div class="scroll-top-inner">
<a href="#h1-article" class="scroll-top"></a>
</div>
<!-- Placeholder for topic body. -->
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;">System settings are the same for all the widgets. They are used to configure a widgets visibility and access to its data, define what happens, when the user moves or hovers the pointer over the widget, etc. </p>
<h2 class="p_Heading2"><a id="events-tab" class="hmanchor"></a><span class="f_Heading2">Events tab</span></h2>
<p class="p_Normal"><img alt="system_events_tab" width="635" height="238" style="margin:0;width:635px;height:238px;border:none" src="system_events_tab.png"/></p>
<p style="line-height: 1.20;">On this tab, you can specify a script that will run after a certain event:</p>
<ul style="list-style-type:disc">
<li style="line-height: 1.20;"><span style="font-weight: bold;">On mouse enter handler</span>. The script runs when the user hovers their mouse over the widget. For example, a pop-up window with a tip may be shown.</li><li style="line-height: 1.20;"><span style="font-weight: bold;">On mouse leave handler</span>. The script runs the user moves their mouse away from the widget. For example, the tip window shown when hovering over the widget may be hidden.</li></ul>
<p style="line-height: 1.20;"><span style="font-size: 13px; color: #000000;">&nbsp;</span></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">You can use a variable of the <a href="360009707032.html#event" class="topiclink">Event</a> type in the context of a custom widget to send event data to the parent widget. This variable will then appear on the <span style="font-weight: bold;">Events</span> tab. For more information, read the <a href="event-in-widgets.html" class="topiclink">Send an event from a child widget to a parent one</a> article.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">To configure the script to be executed:</p>
<ol style="list-style-type:decimal">
<li value="1" style="line-height: 1.20;">Click the <span style="font-weight: bold;">Create</span> button next to the desired event.</li><li value="2" style="line-height: 1.20;">Enter the name of the function and click <span style="font-weight: bold;">Open</span>.</li><li value="3" style="line-height: 1.20;">Write the script in the opened <span style="font-weight: bold;">Scripts</span> tab.</li><li value="4" style="line-height: 1.20;">The script is saved automatically. To exit the <a href="interface_designer.html" class="topiclink">interface designer</a>, click <span style="font-weight: bold;">Save</span> and <span style="font-weight: bold;">Publish</span>.</li></ol>
<h2 class="p_Heading2"><span class="f_Heading2">System tab</span></h2>
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;"><img alt="system_system_tab" width="700" height="370" style="margin:0;width:700px;height:370px;border:none" src="system_system_tab.png"/></p>
<ul style="list-style-type:disc">
<li style="line-height: 1.20;"><span style="font-weight: bold;">Visibility</span>. Specify when a widget is shown on the form:<a id="options" class="hmanchor"></a><ul style="list-style-type:circle">
<li style="line-height: 1.20;"><span style="font-weight: bold;">Always show</span>. The widget is always visible to the users.</li><li style="line-height: 1.20;"><span style="font-weight: bold;">Show conditionally</span>,<span style="font-weight: bold;"> Hide on condition</span>. Specify a condition for hiding or showing the widget. To do that, <a href="common_widget_settings.html#bind-app" class="topiclink">bind</a> a context variable to this field. For example, select <span style="font-weight: bold;">Hide on condition</span> and bind it to a <a href="360009707032.html#yes-no-switch" class="topiclink">Yes/No switch</a> variable. The widget will be shown to the user if the user selects <span style="font-weight: bold;">No</span> when filling out the form. If the user selects <span style="font-weight: bold;">Yes</span>, the widget will be hidden. Below you will find an <a href="common_widget_settings.html#use-case" class="topiclink">example</a> of how this option is used.</li><li style="line-height: 1.20;"><span style="font-weight: bold;">Show for groups</span>. Select user groups that will be able to see the widget. Users who are not included in these groups will not see the widget.</li><li style="line-height: 1.20;"><span style="font-weight: bold;">Always hide</span>. The widget will remain hidden all the time.</li></ul></li></ul>
<ul style="list-style-type:disc">
<li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><a id="read-only" class="hmanchor"></a><span style="font-weight: bold;">Read only</span>. Configure access to the widget:<ul style="list-style-type:circle">
<li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Inherit from parent</span>. The option is used when you use one widget inside of another. For example, you place the <span style="font-weight: bold;">Associated items</span> widget into the <a href="columns.html" class="topiclink">Column</a> widget that has the <span style="font-weight: bold;">Read only</span> setting. If you select the <span style="font-weight: bold;">Inherit from parent </span>option for <span style="font-weight: bold;">Associated items</span>, users won't be able to edit the list of items.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">If you select <span style="font-weight: bold;">Yes</span>, the user wont be able to edit the widgets data.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Select <span style="font-weight: bold;">No</span> to allow users to edit the widgets data.</li></ul>
<li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">HTML styles</span>. Here you can specify the CSS styles for the widget. For example, to enter its width.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">HTML classes</span>. You can create an HTML style using the <a href="code_widget.html" class="topiclink">Code</a> widget and apply it to the current widget. To apply a style, enter its name specified in the script in this field. You can use the same style in several widgets. For example, you can quickly apply one background color to all widgets on a form.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><a id="load-asynchronously" class="hmanchor"></a><span style="font-weight: bold;">Load the contents asynchronously</span>. This option is available for widgets that contain data, for example, <a href="columns.html" class="topiclink">Columns</a>, <a href="incoming_tasks.html" class="topiclink">My Tasks</a>, <a href="panel_with_heading.html" class="topiclink">Panel with Header</a>. Enable the option to display content only when the page or app form is fully loaded.</li></ul>
<p class="p_Normal"><a class="dropdown-toggle" style="font-style: normal; font-weight: normal; color: #000000; background-color: transparent; text-decoration: none;" href="javascript:HMToggle('toggle','TOGGLE0186A1')">Applying the same background color to several widgets using the HTML classes field</a></p>
<div id="TOGGLE0186A1" class="dropdown-toggle-body" style="text-align: left; text-indent: 0; line-height: 1.80; padding: 0 0 0 0; margin: 0 0 0 0;"><table style="border:none; border-spacing:0;">
<tr>
<td style="vertical-align:top; padding:0; border:none"><ol style="list-style-type:decimal">
<li value="1" class="p_Normal">Add the <span style="font-weight: bold;">Code</span> widget to the form. Write the following script:</li></ol>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">&lt;style&gt;</span><br />
<span class="f_CodeExample" style="color: #ffffff;">&nbsp;&nbsp;</span><span class="f_CodeExample">.my-custom-style</span><span class="f_CodeExample" style="color: #ffffff;">&nbsp;</span><span class="f_CodeExample">{</span><br />
<span class="f_CodeExample" style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="f_CodeExample">background:</span><span class="f_CodeExample" style="color: #ffffff;">&nbsp;</span><span class="f_CodeExample">yellow;</span><br />
<span class="f_CodeExample" style="color: #ffffff;">&nbsp;&nbsp;</span><span class="f_CodeExample">}</span><br />
<span class="f_CodeExample">&lt;/style&gt;</span></p>
<ol style="list-style-type:decimal" start="2">
<li value="2" class="p_Normal">Then add a widget to the form, for example, <a href="title_widget.html" class="topiclink">Text box</a>. In its settings, enter <span style="font-weight: bold;">my-custom-style</span> in the <span style="font-weight: bold;">HTML classes</span> field. The widgets background will become yellow.</li><li value="3" class="p_Normal">To quickly change their background color, edit the script in the <span style="font-weight: bold;">Code</span> widget.</li></ol>
</td>
</tr>
</table>
</div>
<h2 class="p_Heading2"><a id="bind-app" class="hmanchor"></a><span class="f_Heading2">Link with a variable</span></h2>
<p style="line-height: 1.28; margin: 0 0 11px 0;">You can bind the widget settings fields to context variables. This is convenient if you need to dynamically change widget settings on a page or during a business process. To bind a field:</p>
<ol style="list-style-type:decimal">
<li value="1" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Click the <img alt="bind_table-icon" width="17" height="17" style="margin:0;width:17px;height:17px;border:none" src="bind_table-icon.png"/> icon next to the field name. In the <span style="font-weight: bold;">Visibility</span> field, select <span style="font-weight: bold;">Show conditionally</span> or <span style="font-weight: bold;">Hide on condition</span>.</li><li value="2" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Click <span style="font-weight: bold;">&lt;Not defined&gt;</span>.</li><li value="3" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Select a context variable from the drop-down list. The list only displays variables with the same data type as the bound field.</li><li value="4" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Save and publish the widget.</li></ol>
<p style="line-height: 1.28; margin: 0 0 11px 0;">The setting is now defined by the selected context variable.</p>
<h3 class="p_Heading3"><a id="use-case" class="hmanchor"></a><span class="f_Heading3">Use case</span></h3>
<p style="line-height: 1.28; margin: 0 0 11px 0;">Let<span style="font-family: Inter;"></span>s say we have the <span style="font-weight: bold;">Orders</span> app to handle customers requests. For orders without prepayment, it is required to determine the payment schedule. In this case, the sales rep fills out a table with the schedule information on a separate tab. The tab can be hidden or displayed depending on whether the sales rep checks the<span style="font-weight: bold;"> Prepayment of 100%</span> box or not.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;">This can be done with the following settings:</p>
<ol style="list-style-type:upper-roman">
<li value="1" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Go to the <span style="font-weight: bold;">Orders</span> app menu and click <span style="font-weight: bold;">Form Settings</span>.</li><li value="2" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">In the window that opens, add the following <a href="how_to_create_an_app.html#add-properties" class="topiclink">properties</a> on the <a href="360028941112.html" class="topiclink">Context tab</a>: <span style="font-weight: bold;">Payments</span> of the <a href="360009707032.html#table" class="topiclink">Table</a> type and <span style="font-weight: bold;">Prepayment of 100%</span> of the <a href="360009707032.html#yes-no-switch" class="topiclink">Yes/No switch</a> type.</li><li value="3" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Go to the <span style="font-weight: bold;">Create</span> tab and click <span style="font-weight: bold;">&lt;Default&gt;</span>, and then click <span style="font-weight: bold;">+Create Form</span>, or <span style="font-weight: bold;">Edit Form</span> if the form has been created earlier. The <a href="interface_designer.html" class="topiclink">interface designer</a> will open.</li><li value="4" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Drag the <a href="tabs.html" class="topiclink">Tabs</a> widget to the top panel and add the <span style="font-weight: bold;">Order</span> and <span style="font-weight: bold;">Payment schedule</span> tabs. Add the <span style="font-weight: bold;">Prepayment of 100%</span> property to the first tab and the <span style="font-weight: bold;">Payments</span> table to the second one.</li><li value="5" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Go to the <span style="font-weight: bold;">Payment schedule</span> tabs <a href="common_widget_settings.html" class="topiclink">system settings</a>. In the <span style="font-weight: bold;">Visibility</span> field, select the <span style="font-weight: bold;">Hide on condition</span> option and bind it with the <span style="font-weight: bold;">Prepayment of 100%</span> property.<br />
<img alt="use_case_hide_condition" width="748" height="381" style="margin:0;width:748px;height:381px;border:none" src="use_case_hide_condition.png"/></li></ol>
<ol style="list-style-type:upper-roman" start="6">
<li value="6" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Click <span style="font-weight: bold;">Save</span> and <span style="font-weight: bold;">Publish</span> on the designer top panel.</li></ol>
<p style="text-align: justify; line-height: 1.20; margin: 0 0 11px 0;">Now, if the <span style="font-weight: bold;">Prepayment of 100%</span> box is unchecked, a new <span style="font-weight: bold;">Payment schedule </span>tab will appear on the page, where the user can specify order details. If the <span style="font-weight: bold;">Prepayment 100%</span> box is checked, the new tab will not appear.</p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="common_widget_settings-3" width="607" height="437" style="margin:0;width:607px;height:437px;border:none" src="common_widget_settings-3.png"/></p>
<div class="bottom-nav">
<a id="prev-link" class="topic__navi_prev" href="field-masks.html">
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
class="bottom-nav__link">field-masks.html</span>
</a>
<a id="next-link" class="topic__navi_next" href="360027211631.html">
<span class="bottom-nav__link">360027211631.html</span> <span
class="bottom-nav__arrow bottom-nav__arrow--next"></span>
</a>
</div>
<!-- добавляет на страницу строку блок Была ли статья полезной? -->
<div class="feedback" id="feedback"><div class="feedback-help"><span><b>Was this helpful?</b></span><form action="" method="POST" class="feedback-form" id="feedback-form"><div class="feedback__popup feedback__popup-response" id="feedback__popup_thx" style="display: none;">Thanks for your feedback!</div><div class="feedback__popup" id="feedback__popup_why" style="display: none;"><div class="feedback__popup-header">Please specify why:</div><input type="radio" name="category" id="bad_recommendation" value="bad_recommendation"><label for="bad_recommendation">Recommendations did not help me</label><input type="radio" name="category" id="difficult_text" value="difficult_text"><label for="difficult_text">Article is hard to understand</label><input type="radio" name="category" id="no_answer" value="no_answer"><label for="no_answer">Didn`t answer my question</label><input type="radio" name="category" id="bad_header" value="bad_header"><label for="bad_header">Content does not match the topic</label><input type="radio" name="category" id="other_reason" value="other_reason"><label for="other_reason">Other</label></div><div class="feedback__popup" id="feedback__popup-other" style="display: none;"><div class="feedback__popup-header">How we can improve it?</div><textarea class="feedback__textarea" name="other" id=""></textarea><input type="submit" class="feedback__other-btn" value="Submit"></div><div class="feedback-form__btn-group"><input type="radio" name="useful" id="feedback__useful_yes" value="true"><label for="feedback__useful_yes"><img src="like.svg" class="small-img" alt="like"><spanclass="feedback-form__btn-group_yes-btn">Yes</spanclass="feedback-form__btn-group_yes-btn"></label><input type="radio" name="useful" id="feedback__useful_no" value="false"><label for="feedback__useful_no"><img src="dislike.svg" class="small-img" alt="dislike"><spanclass="feedback-form__btn-group_no-btn">No</spanclass="feedback-form__btn-group_no-btn"></label></div><select name="category"><option disabled="">Please specify why</option><option value="bad_recommendation" selected="">Recommendations did not help me</option><option value="difficult_text">Article is hard to understand</option><option value="no_answer">Didn`t answer my question</option><option value="bad_header">Content does not match the topic</option><option value="other_reason">Other</option></select><input type="submit"></form></div><div class="found_typo"><p style="margin: 0px; margin-top: 16px !important;"><span><b>Found a typo?</b></span> Select it and press <i>Ctrl+Enter</i> to send us feedback</p></div></div>
</section>
</div>
<aside class="article__sidebar" style="display:none">
<input type="checkbox" />
<div class="article__arrow"></div>
<div class="table-of-contents elma365-right" id="toc2Content">
<h3 class="h3-toc">In this topic</h3>
<nav id="toc2"></nav>
</div>
</aside>
</div>
</article>
</main>
<footer class="footer">
<div class="footer-container">
<div class="footer-mobile">
<ul class="footer-mobile__list"><li><a href="https://brix365.com/en/" target="_blank">BRIX</a></li><li><a href="https://tssdk.brix365.com/en/latest/" target="_blank">SDK</a></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li></ul><ul class="footer-mobile__list"><li><a href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li></ul>
</div>
<div class="footer-wrap">
<div><span class="mobile-question-popup">Send feedback</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Ask a question</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Send"></div></form><div class="hidden fade-in question-success-xs">Sent</div></div>
<div class="footer-flex-b">
<span class="footer-copy">&copy; 2025 BRIX</span>
<ul class="footer-list">
<li class="footer-item">
<a href="#" class="arrow-top" style="display: block;"></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<iframe name="hmnavigation" style="display:none!important"></iframe>
<script src="./jquery-ui.js"></script>
<!--script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script-->
<script src="./jquery.tocify.min.js"></script>
<script src="./TypoReporter.min.js"></script>
<script src="./google-search.js"></script>
<script src="./main.js"></script>
<script type="text/javascript">
HMInitToggle('TOGGLE0186A1','hm.type','dropdown','hm.state','0');
</script>
</body>
</html>