Files
help365/platform/360009906679.html
2025-05-27 21:32:35 +04:00

212 lines
18 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>Integration with Google Docs using &lt;iframe&gt;</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="Integration with Google Docs allows several users to work with a document at the same time while still having access to standard BRIX features like sending documents for review..." />
<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><a href="360024498352.html">Modules</a> &gt; Examples of BRIX integration modules / Integration with Google Docs using &lt;iframe&gt;</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Integration with Google Docs using &lt;iframe&gt;</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; margin: 14px 0 0 0;"><span style="font-family: Inter;">Integration with Google Docs allows several users to work with a document at the same time while still having access to standard BRIX features like sending documents for review or approval.</span></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-family: Inter;">Linking a Google Docs document with an BRIX app item allows you to see all the necessary data (for example, information about the order or the client) and edit or view the content of the document on the same page.</span></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-family: Inter;">This article describes how to configure integration with Google Docs using </span><code><b>&lt;iframe&gt;</b></code><span style="font-family: Inter;">.</span></p>
<ol style="list-style-type:upper-roman">
<li value="1" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;"><a href="360007235031.html" class="topiclink">Create an app</a> in BRIX.</span></li></ol>
<p style="text-indent: -24px; line-height: 1.20; margin: 14px 0 0 48px;"><img alt="google-docs-integration-1" width="536" height="430" style="margin:0;width:536px;height:430px;border:none" src="google-docs-integration-1.png"/></p>
<ol style="list-style-type:upper-roman">
<li value="2" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;">Add a <a href="360009707032.html" class="topiclink">Link</a> type field (code </span><code><b>link</b></code><span style="font-family: Inter;">) and switch to the <a href="360028941032.html" class="topiclink">advanced mode</a>.</span></li></ol>
<p style="text-indent: -24px; line-height: 1.20; margin: 14px 0 0 48px;"><img alt="google-docs-integration-2" width="741" height="340" style="margin:0;width:741px;height:340px;border:none" src="google-docs-integration-2.png"/></p>
<ol style="list-style-type:upper-roman">
<li value="3" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;">Create a custom view form.</span></li></ol>
<p style="text-indent: -24px; line-height: 1.20; margin: 14px 0 0 48px;"><img alt="google-docs-integration-3" width="803" height="465" style="margin:0;width:803px;height:465px;border:none" src="google-docs-integration-3.png"/></p>
<ol style="list-style-type:upper-roman">
<li value="4" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;">Add the <a href="code_widget.html" class="topiclink">Code widget</a> to the form.</span></li></ol>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-family: Inter;">To embed a document into a form, use </span><code><b>&lt;iframe&gt;</b></code><span style="font-family: Inter;">. Insert the following code in the editor:</span></p>
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">&lt;% if (Context.data.link) { %&gt;</span><br />
<span class="f_CodeExample">&lt;div&gt;</span><br />
<span class="f_CodeExample"> &nbsp;&nbsp;&nbsp;Document</span><br />
<span class="f_CodeExample">&lt;/div&gt;</span><br />
<span class="f_CodeExample">&lt;iframe</span><br />
<span class="f_CodeExample"> &nbsp;&nbsp;&nbsp;width=&quot;900&quot;</span><br />
<span class="f_CodeExample"> &nbsp;&nbsp;&nbsp;height=&quot;700&quot;</span><br />
<span class="f_CodeExample"> &nbsp;&nbsp;&nbsp;frameborder=&quot;0&quot;</span><br />
<span class="f_CodeExample"> &nbsp;&nbsp;&nbsp;src=&quot;&lt;%= Context.data.link %&gt;&quot;</span><br />
<span class="f_CodeExample">&gt;&lt;/iframe&gt;</span><br />
<span class="f_CodeExample">&lt;% } %&gt;</span></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-family: Inter;">You can learn more about working with forms in the <a href="360029250931.html" class="topiclink">Form templates</a> article and <a href="https://tssdk.brix365.com/" target="_blank" class="weblink">BRIX TS SDK</a>.</span></p>
<ol style="list-style-type:upper-roman">
<li value="5" style="line-height: 1.20; margin-top: 14px; margin-right: 0; margin-bottom: 0;"><span style="font-family: Inter;">Save the form.</span></li></ol>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter;">Now a user can specify a link to a Google Docs document when creating a new app item. This makes it possible to work with the document directly on the app items view form:</span></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="google-docs-integration-4" width="632" height="380" style="margin:0;width:632px;height:380px;border:none" src="google-docs-integration-4.png"/></p>
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="google-docs-integration-5" width="978" height="560" style="margin:0;width:978px;height:560px;border:none" src="google-docs-integration-5.png"/></p>
<p style="line-height: 1.20; margin: 14px 0 0 0;"><span style="font-family: Inter;">Note that editing permissions are set up in Google Docs.</span></p>
<div class="bottom-nav">
<a id="prev-link" class="topic__navi_prev" href="external_viewer_intergation.html">
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
class="bottom-nav__link">external_viewer_intergation.html</span>
</a>
<a id="next-link" class="topic__navi_next" href="external-oauth2-integration.html">
<span class="bottom-nav__link">external-oauth2-integration.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>
</body>
</html>