Workflow Markup & Snippets
This article is a growing repository of markup, snippets and techniques that can be used within pages of your workflow.
Workflows use the BootStrap 3.0 framework, and as such, any of the BootStrap components can be used within your workflow to expand the layout and functionality. Below you'll find some of the snippets our design team uses.
Showing a Progress Indicator
This snippet simply shows a progress indicator. You can use wildcard values within the progress indicator to create a dynamic progress indicator based on a value in your data. In this example the percent completed value is in a field named [progressPercent].
<div class="progress"> <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="[progressPercent]" class="progress-bar progress-bar-info active" role="progressbar" style="width: [progressPercent]%">[progressPercent]% Complete</div> </div>
Using CurrentUser Wildcards
If your workflow is secured, you could, for example, track the logged in users progress by using [currentuser.progressPercent] in the progress bar example above.Alerts
Add alerts to highlight information and show important messages
<div class="alert alert-danger alert-dismissible fade in" role="alert"> This is an alert! </div>
Alert Tip
Use one of the built in Bootstrap alert classes to change the color and style. Replace alert-danger with alert-info, alert-warning, alert-success to change the alert box color. For more info on alerts see https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-alerts.php2 Column Layout with Panels
This snippet is typically used on a drill down details page, using the Grid Layout. When you set the grid layout to 1 column, and drill down to view a single record, you can create a detail view of your data. The code below will create a basic two column layout with a panel in each column.
<div class="row" style="padding-top:0;margin-top:0"> <!-- start col 1 --> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading">Your Title</div> <div class="panel-body"> <!-- left column content here --> </div> </div> </div> <!-- end col 1 --> <!-- col 2 --> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading">Your Title</div> <div class="panel-body"> <!-- right column content here --> </div> </div> </div> </div>
Showing a PDF Preview
This snippet is typically used on a drill down details page, using the Grid Layout. When you set the grid layout to 1 column, and drill down to view a single record, you can create a detail view of your data. Often, if you have a PDF field in the record being viewed, you will want to display the PDF. The following layout creates a two column layout, with the field values output on the left and a PDF shown on the right.
In this example, be sure to replace the path to the PDF with the path to your form and the [PDF] wildcard with the name of your PDF field.
<div class="row" style="padding-top:0;margin-top:0"> <!-- start col 1 --> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading">Your Title</div> <div class="panel-body"> <!-- left column content here --> </div> </div> </div> <!-- end col 1 --> <!-- col 2 --> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading">Your PDF</div> <div class="panel-body"> <!-- embedded PDF --> <embed src="https://forms.logiforms.com/formdata/user_forms/XXXXX_XXXXX/XXXX/attachments/[PDF]#toolbar=0&navpanes=0&scrollbar=0" style="width:98%;height:400px;margin:20px;"></embed> </div> </div> </div> </div>
Tabs
Use any of the BootStrap 3.0 code from https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navs.php on your workflow pages.
<ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li> <li><a data-toggle="tab" href="#sectionB">Section B</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a data-toggle="tab" href="#dropdown1">Dropdown 1</a></li> <li><a data-toggle="tab" href="#dropdown2">Dropdown 2</a></li> </ul> </li> </ul> <div class="tab-content"> <div id="sectionA" class="tab-pane fade in active"> <p>Section A content…</p> </div> <div id="sectionB" class="tab-pane fade"> <p>Section B content…</p> </div> <div id="dropdown1" class="tab-pane fade"> <p>Dropdown 1 content…</p> </div> <div id="dropdown2" class="tab-pane fade"> <p>Dropdown 2 content…</p> </div> </div>
Accordions
Create accordions easily with this snippet. For more details see https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-accordion.php
<div id="accordion" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse in"> <div class="panel-body"> <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p> </div> </div> </div> </div>
0 Comments