Displaying the results - Wikidot - Free and Pro Wiki Hosting

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Displaying the results - Wikidot - Free and Pro Wiki Hosting</title> <script type="text/javascript" src="http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--javascript/init.combined.js"></script> <script type="text/javascript"> var URL_HOST = 'www.wikidot.com'; var URL_DOMAIN = 'wikidot.com'; var USE_SSL = true ; var URL_STATIC = 'http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327'; // global request information var WIKIREQUEST = {}; WIKIREQUEST.info = {}; WIKIREQUEST.info.domain = "www.wikidot.com"; WIKIREQUEST.info.siteId = 648902; WIKIREQUEST.info.siteUnixName = "www"; WIKIREQUEST.info.categoryId = 4388023; WIKIREQUEST.info.themeId = 192065; WIKIREQUEST.info.requestPageName = "doc-data-forms:displaying"; OZONE.request.timestamp = 1732825484; OZONE.request.date = new Date(); WIKIREQUEST.info.lang = 'en'; WIKIREQUEST.info.pageUnixName = "doc-data-forms:displaying"; WIKIREQUEST.info.pageId = 22129647; WIKIREQUEST.info.lang = "en"; OZONE.lang = "en"; var isUAMobile = !!/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); </script> <script type="text/javascript"> require.config({ baseUrl: URL_STATIC + '/common--javascript', paths: { 'jquery.ui': 'jquery-ui.min', 'jquery.form': 'jquery.form' } }); </script> <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> <meta http-equiv="content-language" content="en"/> <script type="text/javascript" src="http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--javascript/WIKIDOT.combined.js"></script> <script type="text/javascript" src="http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--bootstrap/3.0.0/bootstrap.min.js"></script>  <link href="http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--fonts/awesome/3.2.1/font-awesome.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css" id="internal-style"> /* modules */ /* bootstrap */ @import url(http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--bootstrap/3.0.0/bootstrap.min.css); /* theme */ @import url(http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--theme/bootstrap-base/css/style.css); @import url(http://www.wdfiles.com/local--theme/wikidot-3-0-content/style.css); </style>   <script type="text/javascript" src="http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--javascript/skrollr.min.js"></script> <link rel="shortcut icon" href="/local--favicon/favicon.gif"/> <link rel="icon" type="image/gif" href="/local--favicon/favicon.gif"/> <link rel="apple-touch-icon" href="/common--images/apple-touch-icon-57x57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/common--images/apple-touch-icon-72x72.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/common--images/apple-touch-icon-114x114.png" /> <link rel="alternate" type="application/wiki" title="Edit this page" href="javascript:WIKIDOT.page.listeners.editClick()"/> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18234656-1']); _gaq.push(['_setDomainName', 'none']); _gaq.push(['_setAllowLinker', true]); _gaq.push(['_trackPageview']); _gaq.push(['old._setAccount', 'UA-68540-5']); _gaq.push(['old._setDomainName', 'none']); _gaq.push(['old._setAllowLinker', true]); _gaq.push(['old._trackPageview']); </script> <script type="text/javascript"> window.google_analytics_uacct = 'UA-18234656-1'; window.google_analytics_domain_name = 'none'; </script> <link rel="manifest" href="/onesignal/manifest.json" /> <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" acync=""></script> <script> var OneSignal = window.OneSignal || []; OneSignal.push(function() { OneSignal.init({ appId: null, }); }); </script> </head> <body id="html-body"> <div id="skrollr-body"> <script type="text/javascript"> jQuery(document).ready(function() { if(!(/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)) { var s = skrollr.init(); } }); </script> <div class="topbar"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".wikidot-menu-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="site-name"> <a class="navbar-brand" href="/"></a> </div> <div class="site-subtitle"> your place on the web </div> <div class="loginStatus"> <a href="javascript:;" onclick="WIKIDOT.page.listeners.createAccount(event)" class="login-status-create-account btn">Create account</a> <span>or</span> <a href="javascript:;" onclick="WIKIDOT.page.listeners.loginClick(event)" class="login-status-sign-in btn btn-primary">Sign in</a> </div> </div> <div class="collapse navbar-collapse wikidot-menu-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"><a class="dropdown-toggle" href="" data-toggle="dropdown">Documentation <span class="caret"><span style="white-space: pre-wrap;"> </span></span><br /></a> <ul class="dropdown-menu"> <li><a href="/doc-wiki-syntax:start">Wiki syntax</a></li> <li><a href="/doc:quick-reference">Quick reference</a></li> <li><a href="/doc-modules:start">Modules</a></li> <li><a href="/doc-data-forms:start">Data forms</a></li> <li><a href="/doc:embedding">Embedding services</a></li> <li><a href="/doc:templates">Templates</a></li> <li><a href="/doc:searching">Searching</a></li> <li><a href="/doc:site-structure">Site structure</a></li> <li><a href="/doc:users">Managing users</a></li> <li><a href="/doc:layout-reference">Layout reference</a></li> <li><a href="/doc:video">Video tutorials</a></li> <li><a href="/doc:advertising">Advertising</a></li> <li><a href="/doc:api">Wikidot API</a></li> </ul> </li> <li class="dropdown"><a class="dropdown-toggle" href="" data-toggle="dropdown">Community sites <span class="caret"><span style="white-space: pre-wrap;"> </span></span></a> <ul class="dropdown-menu"> <li><a href="http://community.wikidot.com">Wikidot Community</a></li> <li><a href="http://handbook.wikidot.com">Wikidot Handbook</a></li> <li><a href="http://snippets.wikidot.com">Code snippets</a></li> </ul> </li> <li class="dropdown"><a class="dropdown-toggle" href="" data-toggle="dropdown">FAQ <span class="caret"><span style="white-space: pre-wrap;"> </span></span></a> <ul class="dropdown-menu"> <li><a href="/faq:user-accounts">User accounts</a></li> <li><a href="/faq:upgrades">Upgrades</a></li> <li><a href="/faq:site-features">Site features</a></li> <li><a href="/faq:private-sites">Private Sites</a></li> <li><a href="/faq:editing-pages">Editing Pages</a></li> <li><a href="/faq:technical">Technical</a></li> <li><a href="/faq:watching">Watching</a></li> </ul> </li> </ul> </div> </div> <div class="horizontal-scrollbar" data-start="width: 0%;" data-end="width: 100%"></div> </nav> </div> <div class="content-wrap"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="search-box"> <div id="search-top-box" class="form-search"> <form id="search-top-box-form" action="dummy" class="input-append"> <input id="search-top-box-input" class="text empty search-query" type="text" size="15" name="query" value="Search this site" onfocus="if(YAHOO.util.Dom.hasClass(this, 'empty')){YAHOO.util.Dom.removeClass(this,'empty'); this.value='';}"/><input class="button btn" type="submit" name="search" value="Search"/> </form> </div> </div> <nav role="navigation"> <div class="container"> <div class="navbar-header docs-navigation"> <a type="button" class="btn btn-default navbar-toggle docs-navigation-toggle" data-toggle="collapse" data-target=".doc-menu-collapse"> Table of Contents </a> </div> <div class="collapse navbar-collapse doc-menu-collapse doc-navigation-sidebar"> <ul> <li><a href="/doc-data-forms:howto">How to create a new data form</a></li> <li><a href="/doc-data-forms:creating-new-page">Creating a new page</a></li> <li><a href="/doc-data-forms:displaying">Displaying the results</a></li> <li><a href="/doc-data-forms:dataforms-and-listpages">DataForms and ListPages</a></li> <li><a href="/doc-data-forms:selecting-and-sorting">Selecting & Sorting</a> <ul> <li><a href="/doc-data-forms:selecting-and-sorting#selecting">Selecting</a></li> <li><a href="/doc-data-forms:selecting-and-sorting#sorting">Sorting</a></li> </ul> </li> <li><a href="/doc-data-forms:images">Images in Data Forms</a></li> <li><a href="/doc-data-forms:youtube">YouTube and external content</a></li> <li><a href="/doc-data-forms:tags">Tags</a></li> <li><a href="/doc-data-forms:links">Links</a> <ul> <li><a href="/doc-data-forms:links#external">External</a></li> <li><a href="/doc-data-forms:links#internal">Internal</a></li> </ul> </li> <li><a href="/doc-data-forms:output-style">Styling the output of a field</a></li> <li><a href="/doc-data-forms:pagepath">Pagepath concept</a></li> <li><a href="/doc-data-forms:deleting-form">Deleting a form</a></li> </ul> <hr /> <ul> <li><a href="/doc-data-forms:reference">Reference</a></li> </ul> <p><strong>Field Properties</strong></p> <ul> <li><a href="/doc-data-forms:field-properties#label">The 'label' property</a></li> <li><a href="/doc-data-forms:field-properties#join">The 'join' property</a></li> <li><a href="/doc-data-forms:field-properties#before">The 'before' property</a></li> <li><a href="/doc-data-forms:field-properties#after">The 'after' property</a></li> </ul> <p><strong>Field Types</strong></p> <ul> <li><a href="/doc-data-forms:text-field">The 'text' field type</a></li> <li><a href="/doc-data-forms:select-field">The 'select' field type</a></li> <li><a href="/doc-data-forms:checkbox-field">The 'checkbox' field type</a></li> <li><a href="/doc-data-forms:pagepath-field">The 'pagepath' field type</a></li> <li><a href="/doc-data-forms:hidden-field">The 'hidden' field type</a></li> <li><a href="/doc-data-forms:wiki-field">The 'wiki' field type</a></li> <li><a href="/doc-data-forms:static-field">The 'static' field type</a></li> <li><a href="/doc-data-forms:file-field">The 'file' field type</a></li> <li><a href="/doc-data-forms:url-field">The 'url' field type</a></li> <li><a href="/doc-data-forms:password-field">The 'password' field type</a></li> <li><a href="/doc-data-forms:date-field">The 'date' field type</a></li> </ul> <hr /> <ul> <li><a href="/doc-data-forms:css-styling">CSS Styling</a></li> <li><a href="/doc-data-forms:hints">Hints & Tips</a></li> <li><a href="/doc-data-forms:thanks">Thanks</a></li> </ul> </div> </div> </nav> </div> <div class="col-md-9"> <div class="page-title"> Displaying the results </div> <div class="breadcrumb"> <a href="/doc:start">Documentation</a> » <a href="/doc-data-forms:start">Data Forms</a> » Displaying the results </div> <div id="page-content"> <p>If you just save the <span style="white-space: pre-wrap;">[[form]]..[[/form]]</span> structure then create pages, each page will have simple layout with each field under the previous one in the order the form was structured. With this simple layout any images uploaded won't be displayed, just a link to the image.</p> <p>But you can layout the fields that are displayed in any way you like and display uploaded images and videos. To do this you need to divide the live template page into 2 areas with <span style="white-space: pre-wrap;">====</span> separator between them:</p> <p>The <span style="white-space: pre-wrap;">[[form]]..[[/form]]</span> data form goes at the bottom of the page. Above that is a separator, <span style="white-space: pre-wrap;">====</span>, and then above the separator is how you want the form to be displayed on the page. This might be just the fields, it might be a table or it might be a more complex layout using divs, modules, tables and css. You display the data for the form using the following syntax. In place of the word field use</p> <table class="wiki-content-table"> <tr> <th>Variable</th> <th>Usage</th> </tr> <tr> <td><tt><span style="white-space: pre-wrap;">%%form_data{field}%%</span></tt></td> <td>Displays the content of the chosen field. This is used for essentially everything except urls (images, video, email, etc.).</td> </tr> <tr> <td><tt><span style="white-space: pre-wrap;">%%form_raw{field}%%</span></tt></td> <td>Displays unformatted content of the chosen field. This is used for url information (images, video, etc.) and when advanced Wikidot syntax is necessary (includes, modules).</td> </tr> <tr> <td><tt><span style="white-space: pre-wrap;">%%form_label{field}%%</span></tt></td> <td>Displays the field's label if any.</td> </tr> <tr> <td><tt><span style="white-space: pre-wrap;">%%form_hint{field}%%</span></tt></td> <td>Displays the hint used for the field, if any.</td> </tr> </table> <p>Using the form we created above, the dataform structure, separator and layout are shown below with a very simple layout:</p> <div class="code"> <pre> <code>[[f<image %%form_raw{bandimage}%% width="150px"]] ++ %%title%% Band type: %%form_data{type}%% Band website: %%form_data{bandwebsite}%% Is the band currently recording?: %%form_data{current}%% ==== [[form]] fields: type: label: Music type type: select values: 0: Classical 1: Country 2: Folk 3: Indie 4: Jazz 5: Pop 6: Rock default: 6 bandimage: label: Image type: file bandwebsite: label: Band website type: url current: label: Currently Recording type: select values: 0: "Yes" 1: "No" default: 0 [[/form]]</code> </pre></div> <p>The result is:</p> <img src="http://www.wdfiles.com/local--files/doc-data-forms:displaying/df_queen.jpg" alt="df_queen.jpg" class="image" /></div><div id="action-area" style="display: none;"></div> </div> </div> </div> <div class="page-options-container container"> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-sm-6"><img src="https://www.wikidot.com/common--theme/wikidot30/images/amazon.png" alt="amazon.png" class="image" /></div> <div class="col-sm-3"> <p><a href="http://blog.wikidot.com">Official Wikidot blog</a></p> <p><a href="http://community.wikidot.com">Community</a></p> <p><a href="/doc">Documentation</a></p> </div> <div class="col-sm-3"> <p><a href="/about">About Wikidot</a></p> <p><a href="http://shop.wikidot.com">Gift Shop</a></p> <p><a href="/legal:terms-of-service">Terms of Service</a></p> <p><a href="/legal:privacy-policy">Privacy policy</a></p> </div> </div> </div> <div class="container license-area"> Copyright 漏 All Rights Reserved, Wikidot Inc. 2024 </div> </div> </div> <div id="dummy-ondomready-block" style="display: none;" ></div>  <script type="text/javascript"> (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <div id="page-options-bottom-tips" style="display: none;"> <div id="edit-button-hovertip"> Click here to edit contents of this page. </div> </div> <div id="page-options-bottom-2-tips" style="display: none;"> <div id="edit-sections-button-hovertip"> Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available. </div> <div id="edit-append-button-hovertip"> Append content without editing the whole page source. </div> <div id="history-button-hovertip"> Check out how this page has evolved in the past. </div> <div id="discuss-button-hovertip"> If you want to discuss contents of this page - this is the easiest way to do it. </div> <div id="files-button-hovertip"> View and manage file attachments for this page. </div> <div id="site-tools-button-hovertip"> A few useful tools to manage this Site. </div> <div id="backlinks-button-hovertip"> See pages that link to and include this page. </div> <div id="rename-move-button-hovertip"> Change the name (also URL address, possibly the category) of the page. </div> <div id="view-source-button-hovertip"> View wiki source for this page without editing. </div> <div id="parent-page-button-hovertip"> View/set parent page (used for creating breadcrumbs and structured layout). </div> </div> </body> </html>

CINXE.COM

Displaying the results - Wikidot - Free and Pro Wiki Hosting