### Install bootstrap-fileinput using Bower

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-fileinput/README.md

This command installs the bootstrap-fileinput plugin using the Bower package manager. Ensure you have Bower installed and configured in your project.

```bash
bower install bootstrap-fileinput
```

--------------------------------

### Include Docassemble Code Example in Documentation

Source: https://github.com/jhpyle/docassemble/blob/master/CONTRIBUTING.md

A Jinja2 template tag used within the Docassemble documentation to include a side-by-side demonstration of a code example. The 'demo' parameter specifies which example to load.

```jinja2
{% include side-by-side.html demo="user-logged-in" %}
```

--------------------------------

### Install bootstrap-fileinput using NPM

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-fileinput/README.md

This command installs the bootstrap-fileinput plugin using the NPM package manager. It is the recommended method for Node.js-based projects.

```bash
npm install bootstrap-fileinput
```

--------------------------------

### Install Labelauty with Bower

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/labelauty/README.md

Installs the Labelauty jQuery Plugin using the Bower package manager. This is the primary method for including the plugin in a project.

```bash
bower install labelauty
```

--------------------------------

### Install bootstrap-fileinput using Composer

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-fileinput/README.md

These commands show how to install the bootstrap-fileinput plugin using Composer, a dependency manager for PHP. You can either run the command directly or add the dependency to your composer.json file.

```bash
$ php composer.phar require kartik-v/bootstrap-fileinput "@dev"
```

```json
"kartik-v/bootstrap-fileinput": "@dev"
```

--------------------------------

### PyPI Publish Instruction

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/playgroundpackages.html

Provides instructions for publishing a package to PyPI. It includes an option to also install the package if the user has the necessary permissions.

```Jinja2
{{ word("Press the Publish button to publish the package on PyPI.") }}

{%- if config['DEVELOPER_CAN_INSTALL'] or current_user.has_roles(['admin']) %}

{{ form.install_also(type='checkbox', class='form-check-input') }} {{ form.install_also.label }}

{%- endif %}
```

--------------------------------

### Docassemble Metadata Block for Code Examples

Source: https://github.com/jhpyle/docassemble/blob/master/CONTRIBUTING.md

Defines the metadata for a Docassemble code example, including its title, short title, documentation link, and the start and end lines for the example within the interview YAML file. This structure is used to generate code samples and associated documentation.

```yaml
metadata:
  title: Test if user is logged in
  short title: Logged in
  documentation: "https://docassemble.org/docs/functions.html#user_logged_in"
  example start: 2
  example end: 5
```

--------------------------------

### Install and Test jQuery Plugin

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/areyousure/README.md

Commands to install dependencies and run tests for the Are-You-Sure jQuery plugin. Requires Node.js and npm.

```bash
$ npm install
$ npm test
```

--------------------------------

### Install Bootstrap Combobox via npm

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-combobox/README.md

Installs the Bootstrap Combobox plugin using the npm package manager. This is a convenient way to add the plugin to your project.

```bash
npm install @danielfarrell/bootstrap-combobox
```

--------------------------------

### Install Bootstrap Combobox via Bower

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-combobox/README.md

Installs the Bootstrap Combobox plugin using the Bower package manager. This method places the plugin files into your project's bower_components folder.

```bash
bower install bootstrap-combobox
```

--------------------------------

### Grunt Development Task

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-slider/README.md

Launches a browser window with the Examples page, compiling LESS/JS and enabling auto-refresh on code changes. This task is aliased by `grunt dev`.

```bash
grunt development
```

--------------------------------

### Conditional Install Button (Jinja2)

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/playgroundpackages.html

This Jinja2 code renders an 'Install' button only if the current user has administrator privileges or the developer is allowed to install. The button's appearance is customized via configuration settings.

```jinja2
{{ render_submit_field(form.install, class="btn " + config['BUTTON_STYLE'] + "success " + config['BUTTON_CLASS'], title=word('Install package on this server')) }}
```

--------------------------------

### Configure Bootstrap Combobox with Options

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-combobox/README.md

Shows how to configure the Bootstrap Combobox plugin by passing an options object during initialization. This example sets the Bootstrap version to 2.

```javascript
$('.combobox').combobox({bsVersion: '2'});
```

--------------------------------

### Install jQuery.AreYouSure with Bower

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/areyousure/README.md

This command shows how to install the jQuery.AreYouSure plugin using the Bower package manager. This is a convenient way to manage the plugin's inclusion in your project.

```bash
$ bower install jquery.are-you-sure
```

--------------------------------

### Manage Existing Docassemble Packages

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/update_package.html

Displays a list of installed packages with their version and branch information. It provides actions to update, uninstall, or download installed packages.

```html
{% for package in package_list %}
Package name
Actions
{{ package.package.name }}{% if package.package.packageversion %} {{ package.package.packageversion }}{% endif %}{% if package.package.gitbranch %} ({{ package.package.gitbranch }}){% endif %}
{% if package.can_uninstall and package.package.type == 'zip' %}[]({{ url_for('download_zip_package', package=package.package.name) }} "{{ word('Download installed package') }}"){% endif %} {% if package.can_update %}[{{ word('Update') }}]({{ url_for('update_package', package=package.package.name, action='update') }}){% endif %} {% if package.can_uninstall %}[{{ word('Uninstall') }}]({{ url_for('update_package', package=package.package.name, action='uninstall') }}){% endif %}
{% endfor %}

```

--------------------------------

### Exclude jQuery dependency with Browserify

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-slider/README.md

Provides a command-line example for using Browserify to bundle the application while explicitly excluding the optional jQuery dependency from the build.

```bash
browserify --im -u jquery main.js > bundle.js
```

--------------------------------

### Jinja2 Template Setup for User Profile Page

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/flask_user/user_profile.html

This snippet sets up variables for the user profile page using Jinja2 templating, including footer content, page titles, extra CSS/JavaScript, and navigation bar HTML. It then extends a base Flask-User template.

```jinja2
{% set footer_content = get_part('profile page footer', get_part('global footer')) %}
{% set page_title = get_part('profile page title', word('User Profile')) %}
{% set tab_title = get_part('profile page tab title', word('User Profile')) %}
{% set extra_css = get_part('profile page extra css') %}
{% set extra_js = get_part('profile page extra javascript') %}
{% set navigation_bar_html = get_part('profile page navigation bar html') %}
{% extends 'flask_user/member_base.html' %}
```

--------------------------------

### Jinja2 Template Logic for Interview Listing

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/interviews.html

This snippet demonstrates the Jinja2 template logic used in Docassemble to display a list of interviews. It includes logic for filtering by tags, showing interview details like title, tags, and start time, and providing actions like resuming or deleting interviews. It also handles pagination with 'Back' and 'Next' links.

```jinja
{%- set footer_content = get_part('interview page footer', get_part('global footer')) %} {%- set page_title = get_part('interview page title', word('Interviews')) %} {%- set tab_title = get_part('interview page tab title', word('Interviews')) %} {%- set extra_css = get_part('interview page extra css') %} {%- set extra_js = get_part('interview page extra javascript') %} {%- set navigation_bar_html = get_part('interview page navigation bar html') %} {%- extends 'flask_user/public_base.html' %} {%- block content %}

{{ get_part('interview page heading', word('Resume an interview')) }}
======================================================================

{{ get_part('interview page pre') }}

{{ form.hidden_tag() }} {%- if tag %}

{{ word('Showing interviews tagged with:') }} [{{ tag }}](?tag={{ tag }}). [{{ word("Show all") }}](?)

{%- else %}
{%- if tags_used %}

{{ word('Filter by tag') }}: {% for tag in tags_used %}[{{ tag }}](?tag={{ tag }}) {% endfor %}

{%- endif %}
{%- endif %}

{{ word('Click interview title to resume an interview you already started.') }}

{%- if tags_used %} {%- endif %} {%- for interview in interviews %} {%- if not interview['metadata'].get('hidden', False) %} {%- if tags_used %} {%- endif %} {%- endif %} {%- endfor %} {%- if numinterviews > 0 %} {%- if tags_used %} {%- endif %} {%- endif %}

{{ word('Title') }}

{{ word('Tags') }}

{{ word('Started') }}

{{ word('Delete') }}

{% if interview['valid'] %}[{{ interview['title'] | safe }}]({{ url_for('index', i=interview['filename'], session=interview['session'], from_list=1) }}){% else %}{{ interview['title'] | safe }}{% endif %}{% if interview['subtitle'] %}  
{{ interview['subtitle'] | safe}}{% endif %}

{% for tag in interview['tags'] %}[{{ tag }}](?tag={{ tag }}) {% endfor %}

{{ interview['starttime'] }}

{{ word('Delete') }}

 

 

 

{{ word('Delete All') }}

{%- if next_id or show_back %}

{%- if show_back %}*   [{{ word('Back') }}]({{ url_for('interview_list') }})
{%- endif %} {%- if next_id %}*   [{{ word('Next') }}](?next_id={{ next_id }})
{%- endif %}

{%- endif %} {{ get_part('interview page post') }} {% endblock %}
```

--------------------------------

### Install/Update Package via Git URL

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/update_package.html

Allows users to install or update a Docassemble package by providing a Git repository URL and optionally specifying a branch. This is useful for installing packages directly from source control.

```html
{{ render_field(form.giturl, placeholder='https://github.com/username/packagename') }}
{{ render_select_field(form.gitbranch)
}}
```

--------------------------------

### Get list of fields from PDF/DOCX template

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/utilities.html

This snippet demonstrates how to render a file input field for uploading DOCX or PDF files and a submit button to initiate scanning for fields. It utilizes form macros for rendering form elements.

```html
{{ form.hidden_tag() }}
{{ render_file_field(form.pdfdocxfile, accept=".docx,.pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf") }}
{{ render_submit_field(form.scan) }}
```

--------------------------------

### Mako Template Example for HTML Table

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_base/docassemble/base/mako/README.rst

This Mako template demonstrates basic syntax for creating an HTML table. It utilizes Python-like control flow (loops, variable assignment) within the template to generate dynamic content, including a custom function `makerow` for table rows.

```mako
<%inherit file="base.html"/>
<%
    rows = [[v for v in range(0,10)] for row in range(0,10)]
%>
<table>
    % for row in rows:
        ${makerow(row)}
    % endfor
</table>

<%def name="makerow(row)">
    <tr>
    % for name in row:
        <td>${name}</td>\
    % endfor
    </tr>
</%def>
```

--------------------------------

### Jinja2 Interview List Rendering

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_demo/docassemble/demo/data/templates/myinterviews.html

This snippet demonstrates how to render a list of interviews using Jinja2 templating. It iterates through interviews, displays their titles and start times, and provides options to delete individual interviews or all interviews. It also includes conditional logic to link to an interview if it's valid.

```jinja2
{% extends 'flask_user/public_base.html' %} {% block content %}

### {{ title }}

{{ word('This is my custom interview page.') }}

{% for interview in interviews %} {% endfor %} {% if numinterviews > 0 %} {% endif %}

Title

Started

Delete

{% if interview['valid'] %}[{{ interview['title'] }}]({{ url_for('index', i=interview['interview_info'].filename, session=interview['interview_info'].key, from_list=1) }}){% else %}{{ interview['title'] }}{% endif %}

{{ interview['starttime'] }}

[{{ word('Delete') }}]({{ url_for('interview_list', action='delete', filename=interview['interview_info'].filename, session=interview['interview_info'].key) }})

 

 

[{{ word('Delete All') }}]({{ url_for('interview_list', action='deleteall') }})

{% endblock %}
```

--------------------------------

### GitHub Commit Form

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/playgroundpackages.html

Renders form elements for committing changes to GitHub. This includes selecting files to add, choosing a branch, specifying a commit message, and options to also publish to PyPI or install the package.

```Jinja2
{{ word("Select which files to include in the commit") }}
{%- if form.files_to_add.errors %}
{%- for e in form.files_to_add.errors %}

{{ e }}

{%- endfor %}
{%- endif %}

{{ render_select_field(form.github_branch) }}

{{ render_field(form.github_branch_new) }}

{{ render_field(form.commit_message) }}
{%- if can_publish_to_pypi %}

{{ form.pypi_also(type='checkbox', class='form-check-input') }} {{ form.pypi_also.label }}

{%- endif %}
{%- if config['DEVELOPER_CAN_INSTALL'] or current_user.has_roles(['admin']) %}

{{ form.install_also(type='checkbox', class='form-form-check-input') }} {{ form.install_also.label }}

{%- endif %}
```

--------------------------------

### Home Page Route (Python/Flask)

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/member_page.html

Defines the root route '/' for the application, accessible to anyone. It renders the 'home_page.html' template. This is a basic Flask route definition.

```python
# The Home page is accessible to anyone
@app.route('/')
def home_page():
    return render_template('pages/home_page.html')
```

--------------------------------

### Jinja2 Template for Docassemble Playground Navigation and File Management

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/playground.html

This Jinja2 template defines the structure and navigation for the Docassemble playground. It includes links to create new interviews, manage project files (packages, templates, static files, sources, modules), edit the current file, and sync with cloud storage. It also handles form rendering for interview details.

```html
{% extends 'base\_templates/flask_two_col_base.html' %} {% block content %} {%- from "base\_templates/form_macros.html" import render_addon_field, render_submit_field, myrender_hidden_field, render_file_field with context %}

*    [{{ word('Add') }}]({{ url_for\('playground_page', new='1', project=current_project) }} "{{ word('Create a new interview') }}")
{%- if own_playground %}*    [{{ word('Wizard') }}]({{ url_for\('index', i='docassemble.webapp:data/questions/wizard-template.yml', project=current_project) }} "{{ word('Create an interview with the wizard') }}")
{%- endif %}*    [{{ word('Folders') }}](# "{{ word('Items in the Playground other than interviews') }}")
    
 [{{ word('Packages') }}]({{ url_for\('playground_packages', project=current_project) }})  [{{ word('Templates') }}]({{ url_for\('playground_files', project=current_project, section='template') }})  [{{ word('Static files') }}]({{ url_for\('playground_files', project=current_project, section='static') }})  [{{ word('Sources') }}]({{ url_for\('playground_files', project=current_project, section='sources') }})  [{{ word('Modules') }}]({{ url_for\('playground_files', project=current_project, section='modules') }})
    
*   [{% if current_file == '' %}{{ word("(New file)") }}{% else %}{{ current_file }}{% endif %}](# "{{ word('Edit another interview')}}")
    
    {%- if any_files %} {%- for file in files %}{% if file['name'] == current_file %}  [{{ file['name'] }}](#) {%- else %}  [{{ file['name'] }}]({{ url_for\('playground_page', file=file['name'], project=current_project) }}) {%- endif %} {%- endfor %} {%- else %}  [{% if current_file == '' %}{{ word("(New file)") }}{% else %}{{ current_file }}{% endif %}](#) {%- endif %}    
*   {{ fileform.hidden_tag() }}  {{ word("Upload") }}
    
{%- if use_gd and own_playground %}*    [{{ word('Sync') }}]({{ url_for\('sync_with_google_drive', project=current_project, next=url_for\('playground_page', project=current_project)) }} "{{ word('Sync with Google Drive') }}")
{%- endif %} {%- if use_od and own_playground %}*    [{{ word('Sync') }}]({{ url_for\('sync_with_onedrive', project=current_project, next=url_for\('playground_page', project=current_project)) }} "{{ word('Sync with OneDrive') }}")
{%- endif %}

{{ form.hidden_tag() }} {%- if is_new != 'False' %} {{ myrender_hidden_field(form.status, value='new') }} {%- else %} {{ myrender_hidden_field(form.status, value='existing') }} {%- endif %} {{ myrender_hidden_field(form.original_playground_name, value=current_file) }}

{{ render_addon_field(form.playground_name, tabindex=20) | indent(16) }}

{{ myrender_hidden_field(form.playground_content, value="") }}

{{ render_submit_field(form.submit, class="ms-1 btn " + config['BUTTON_STYLE'] + "primary " + config['BUTTON_CLASS'] + " dasubmitbutton", tabindex="90") }} {% if is_new == 'False' %}[{{ word("Save and Run") }}]({{ url_for\('playground_redirect', project=current_project) }}) {%- if use_gd and own_playground %}  [{{ word("Sync and Run") }}]({{ url_for\('playground_poll') }}) {%- endif %} {%- if use_od and own_playground %}  [{{ word("Sync and Run") }}]({{ url_for\('playground_poll') }}) {%- endif %} [{{ word("Download") }}]({{ url_for\('playground_download', current_project=current_project, userid=userid, filename=current_file) }}) {{ render_submit_field(form.delete, id='daDelete', class="btn " + config['BUTTON_STYLE'] + "danger " + config['BUTTON_CLASS'] + " dasubmitbutton", tabindex="110") }} {% if interview_path %}  [{{ word('Share') }}]({{ url_for\('index', i=interview_path, _external=True) }} "Click to copy link") {% endif %} {% endif %}

{%- endblock %}
{% block rightside %}

{{ word('From') }} {% for file in dropdown_files %}{{ file }}{% endfor %} {{ word('Run') }} 

{{ variables_html }}

{%- endblock %}
{% block bottompart %}
{{ example_html }}

##### {{ word("Names and questions") }}

{{ word("Loading . . .") }}

{{ word("Close") }}

{%- endblock %}
```

--------------------------------

### Jinja2 Templating for Package Listing

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/train.html

This snippet demonstrates how to dynamically list packages and their counts using Jinja2 templating. It includes logic to highlight the 'Global' package and the user's 'Playground' package, providing links to detailed views.

```html
{%- if show_package_list %}

{%- if show_all %} [{{ word("Hide entries that are already classified") }}]({{ url_for('train', show_all=0)|safe }}) {%- else %} [{{ word("Show entries that are already classified") }}]({{ url_for('train', show_all=1)|safe }}) {%- endif %}

### {{ word('Packages') }}[]({{ url_for('train', show_all=show_all)|safe }} "{{ word('Refresh') }}")

{%- for package, count in package_list %}
  {%- if package == '_global' %} [{{ word('Global') }} {{ count }}]({{ url_for('train', package='_global', file='_global', show_all=show_all)|safe }}) {%- elif package == playground_package %} [{{ word("My Playground") }} {{ count }}]({{ url_for('train', package=package, show_all=show_all)|safe }}) {%- else %} [{{ package }} {{ count }}]({{ url_for('train', package=package, show_all=show_all)|safe }})
  {%- endif %}
{%- endfor %}

{%- endif %}
```

--------------------------------

### Install/Update Package via Pip

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/update_package.html

Provides a way to install or update a Docassemble package using its pip package name. This leverages Python's package management system for straightforward installations.

```html
{{ render_field(form.pippackage)
{{ render_submit_field(form.submit)
}}
```

--------------------------------

### Home Page Route

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/admin_page.html

Defines the route for the home page, accessible to anyone. It renders the 'pages/home_page.html' template.

```python
@app.route('/')
def home_page():
    return render_template('pages/home_page.html')
```

--------------------------------

### Jinja2 Template for Package Creation Form

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/create_playground_package.html

This Jinja2 template renders a form for selecting or creating packages. It extends a base Flask-User template and includes form macros. It conditionally displays a package selection form or a message directing the user to create a package in the Playground.

```html
{% extends 'flask_user/public_base.html' %} {% block content %} {% from "base_templates/form_macros.html" import render_submit_field %}

Create package from Playground
==============================

{%- if package_names.__len__() %}

{{ form.hidden_tag() }}

{{ word("Select a package") }} {%- for package in package_names %} {{ package }} {%- endfor %}

{{ render_submit_field(form.submit) }}

{%- else %}

You have not yet created any packages. Create a package in the [Playground package area]({{ url_for('playground_packages', package=current_package) }}) first.

{%- endif %} {% endblock %}
```

--------------------------------

### Docassemble JavaScript Configuration

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/officeouter.html

This JavaScript code configures default server and project settings, along with user messages for file upload success and failure within a Docassemble environment. It utilizes server-provided variables for dynamic initialization.

```JavaScript
var defaultServer = "{{ defaultDaServer }}"; var defaultProject = "default"; var fileErrorMessage = "{{ word(\"There was a problem uploading the file.\") }}"; var fileSuccessMessage = "{{ word(\"The file was uploaded to the Templates folder.\") }}"; var defaultPlaygroundName = "{{ word(\"Default Playground\") }}"; {{ extra_js }}
```

--------------------------------

### Slider Attribute Manipulation

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-slider/README.md

Allows getting and setting attributes of the slider component. Refer to the documentation for a list of available attributes.

```javascript
 $("#slider").slider('setAttribute', 'max', 100);
 let maxValue = $("#slider").slider('getAttribute', 'max');
```

--------------------------------

### Jinja2 Template for Interview Listing Page

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/start.html

This Jinja2 template defines the structure for a Docassemble interview listing page. It includes variables for page titles, footers, and optional extra CSS/JavaScript. The core functionality involves iterating through 'interview_info' to display a list of interview titles and links.

```jinja2
{% set footer_content = get_part('start page footer', get_part('global footer')) %}
{% set page_title = get_part('start page title', word('Interviews')) %}
{% set tab_title = get_part('start page tab title', word('Interviews')) %}
{% set extra_css = get_part('start page extra css') %}
{% set extra_js = get_part('start page extra javascript') %}
{% set navigation_bar_html = get_part('start page navigation bar html') %}
{% extends 'flask_user/public_base.html' %}
{% block content %}

{{ get_part('start page heading', word('Available interviews')) }}
===================================================================

{{ get_part('start page pre') }}

{% for interview in interview_info %}*   [{{ interview['title'] }}]({{ interview['link'] }}){% if interview['subtitle'] %} {{ interview['subtitle'] }}{% endif %}
{% endfor %}

{{ get_part('start page post') }}
{% endblock %}
```

--------------------------------

### Initialize Bootstrap File Input (JavaScript)

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-fileinput/README.md

Demonstrates how to initialize the Bootstrap File Input plugin with default settings or custom options using jQuery selectors.

```javascript
// initialize with defaults
$("#input-id").fileinput();

// with plugin options
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});
```

--------------------------------

### Install/Update Package via Zip Upload

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/update_package.html

Enables users to install or update a Docassemble package by uploading a zip archive. This method is suitable for distributing packages as compressed files.

```html
{{ render_file_field(form.zipfile)
}}
```

--------------------------------

### Download Office add-in manifest file

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/utilities.html

This snippet outlines the form elements for downloading an Office add-in manifest file. It includes a hidden tag, a field to specify the add-in version, and a submit button to initiate the download.

```html
{{ form.hidden_tag() }}
{{ render_field(form.officeaddin_version) }}
{{ render_submit_field(form.officeaddin_submit) }}
```

--------------------------------

### Jinja2 Templating for Model Listing and Download

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/train.html

This snippet illustrates how to display models associated with a package and file using Jinja2. It includes conditional rendering for global models versus package-specific models and provides a download link for the data.

```html
{%- if show_group_id_list %}

{%- if show_all %} [{{ word("Hide entries that are already classified") }}]({{ url_for('train', package=the_package, file=the_file, show_all=0)|safe }}) {%- else %} [{{ word("Show entries that are already classified") }}]({{ url_for('train', package=the_package, file=the_file, show_all=1)|safe }}) {%- endif %}

### {{ word('Models') }}[]({{ url_for('train', package=the_package, file=the_file, show_all=show_all)|safe }} "{{ word('Refresh') }}")

1.  {%- if the_package == '_global' %} [{{ word('Packages') }}]({{ url_for('train', show_all=show_all)|safe }})
2.  {{ word('Global models') }}
{%- else %} [{{ word('Packages') }}]({{ url_for('train', show_all=show_all)|safe }})4.  [{{ the_package_display }}]({{ url_for('train', package=the_package, show_all=show_all)|safe }})
5.  {{ the_file }} {%- endif %}

[{{ word('Download') }}]({{ url_for('train', package=the_package, file=the_file, show_all=show_all, download='1')|safe }})

[{{ word("Show import controls") }}](#) [{{ word("Hide import controls") }}](#)
{%- endif %}
```

--------------------------------

### Slider Functions: Get and Set Value

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-slider/README.md

This section demonstrates how to retrieve the current value of the slider and how to programmatically set a new value. The `setValue` function can optionally trigger 'slide' and 'change' events.

```javascript
// Get the current value of the slider
var currentValue = slider.getValue();
console.log('Current slider value:', currentValue);
```

```javascript
// Set a new value for the slider, triggering slide and change events
slider.setValue(75, true, true);
```

```javascript
// Set a new value without triggering events
slider.setValue(25, false, false);
```

```javascript
// Set a range value for a range slider
slider.setValue([10, 90]);
```

--------------------------------

### Package Section File Selection

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/playgroundpackages.html

Renders selection fields for different package sections (e.g., 'playground', 'playgroundstatic'). For each section, it displays a label, instructions, lists available files, and handles errors.

```Jinja2
{%- for sec in ['playground', 'playgroundtemplate', 'playgroundstatic', 'playgroundsources', 'playgroundmodules'] %}

{{ section_field[sec].label }}
---------------------------------

{{ word("Select zero or more files") }}
{%- for file in file_list[sec] %}
 {{ file }}
{%- endfor %}
{%- if section_field[sec].errors %}
{%- for e in section_field[sec].errors %}

{{ e }}

{%- endfor %}
{%- endif %}

{%- endfor %}
```

--------------------------------

### Download Package Link (Jinja2)

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/playgroundpackages.html

This Jinja2 snippet generates a download link for the current package. It utilizes the 'url_for' function to construct the URL and includes a descriptive tooltip.

```jinja2
[{{ word('Download') }}]({{ url_for('create_playground_package', project=current_project, package=current_file) }} "{{ word('Download the current package') }}")
```

--------------------------------

### Python Flask Routing and Access Control

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/home_page.html

Demonstrates Flask routing for different user roles: public, authenticated, and admin. It uses decorators like @app.route, @login_required, and @roles_required to manage access.

```python
# The Home page is accessible to anyone
@app.route('/')
def home_page():
    return render_template('pages/home_page.html')
```

```python
# The Member page is accessible to authenticated users (users that have logged in)
@app.route('/member')
@login_required             # Limits access to authenticated users
def member_page():
    return render_template('pages/member_page.html')
```

```python
# The Admin page is accessible to users with the 'admin' role
@app.route('/admin')
@roles_required('admin')    # Limits access to users with the 'admin' role
def admin_page():
    return render_template('pages/admin_page.html')
```

--------------------------------

### Customize beforeunload Warning with jQuery.AreYouSure

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/areyousure/README.md

This example shows how to integrate custom logic into the 'beforeunload' event handler. It checks if the form is dirty and adds a conditional message to the browser's unload warning.

```javascript
$(window).on('beforeunload', function() {
    isSunday = (0 == (new Date()).getDay());
    if ($('#my-form').hasClass('dirty') && isSunday) {
        return "Because it's Sunday, I'll be nice and let you know you forgot to save!";
    }
})
```

--------------------------------

### Jinja2 Templating for JSON Data Import Form

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/train.html

This snippet defines the HTML structure for uploading and importing training data from a JSON file. It includes Jinja2 logic to display specific prompts based on package file availability and renders form fields using macros.

```html
{{ uploadform.hidden_tag() }}

##### {{ word("Import training data from a JSON file") }}

{% if package_file_available %}

#### {{ word("What file do you want to import?") }}

 {{ word("The JSON file in the package") }}: `{{ the_package_location }}`

 {{ word("An uploaded JSON file") }}

{% else %}

{% endif %} {{ render_file_field(uploadform.jsonfile) }}

###### {{ word("How would you like the data to be imported?") }}

 {{ word("Merge new data into existing data") }}

 {{ word("Erase existing data for each model before importing") }}

{{ render_submit_field(uploadform.submit, class="btn " + config['BUTTON_STYLE'] + "primary " + config['BUTTON_CLASS']) }}
```

--------------------------------

### Displaying and Linking Training Items (Jinja2)

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/train.html

This snippet uses Jinja2 templating to dynamically display training items. It handles conditional rendering based on package scope and displays item details like input, predictions, and actual values. It also includes functionality for submitting or canceling actions.

```Jinja2
{% import "form.html" as form %}
{% from "form.html" import render_submit_field %}
{% block body %}

{% if the_package == '_global' %}

1.  [{{ word('Packages') }}]({{ url_for('train', show_all=show_all)|safe }})
2.  [{{ word('Global models') }}]({{ url_for('train', package=the_package, file=the_file, show_all=show_all)|safe }})
3.  {{ the_group_id }}

{% else %}

1.  [{{ word('Packages') }}]({{ url_for('train', show_all=show_all)|safe }})
2.  [{{ the_package_display }}]({{ url_for('train', package=the_package, show_all=show_all)|safe }})
3.  [{{ the_file }}]({{ url_for('train', package=the_package, file=the_file, show_all=show_all)|safe }})
4.  {{ the_group_id }}

{% endif %}

{{ form.hidden_tag() }} {% if not is_data %}

{{ word("Manually add a training item") }}

{{ word("Input") }} {{ word("Actual") }}

{% if choices %}

{{ word("Select one") }} {%- for item, count in choices %} {{ item }} {%- endfor %}

{% endif %}

{{ render_submit_field(form.submit, class="btn " + config['BUTTON_STYLE'] + "primary " + config['BUTTON_CLASS']) }} {{ render_submit_field(form.cancel, class="btn " + config['BUTTON_STYLE'] + "secondary " + config['BUTTON_CLASS'])
}}

{% endif %} {% if entry_list|length > 0 %} {% if show_all %}

#### {{ word('Items in the training set') }}

{% else %}

#### {{ word('Unclassified items in the training set') }}

{% endif %} {% for entry in entry_list %}

 {{ word("Delete") }}

{{ word("Input") }} {%- if entry.type == 'text' %}

> {{ entry.independent }}

{% else %} {{ entry.independent_display|safe }} {%- endif %} {%- if entry.image_files %} {%- if entry|length == 1 %} {{ word("File") }} {%- else %} {{ word("Files") }} {%- endif %} {%- for linked_file in entry.image_files %}

[![]({{ linked_file['image_url'] }})]({{ linked_file['doc_url'] }})

{%- endfor %} {%- endif %} {%- if entry.predictions %} {{ word("Prediction") }}

{%- for prediction, probability in entry.predictions[0:1] %} {{ prediction }} {{ probability }} {%- endfor %} {%- for prediction, probability in entry.predictions[1:] %} {{ prediction }} {{ probability }} {%- endfor %}

{%- endif %} {{ word("Actual") }}

 

{%- if choices %}

{%- if entry.dependent is none %} {{ word("Select one") }} {%- else %} {{ word("Select one") }} {%- endif %} {%- for item, count in choices %}
 {%- if item == entry.dependent %}
 {{ item }}
 {% else %}
 {{ item }}
 {% endif %}
{%- endfor %}
{%- endif %}

{%- endfor %}

{{ render_submit_field(form.submit, class="btn " + config['BUTTON_STYLE'] + "primary " + config['BUTTON_CLASS']) }} {{ render_submit_field(form.cancel, class="btn " + config['BUTTON_STYLE'] + "secondary " + config['BUTTON_CLASS'])
}}

{%- endif %}

{%- endif %} {% endblock %}
```

--------------------------------

### Docassemble Server Health Check using JavaScript

Source: https://github.com/jhpyle/docassemble/blob/master/Docker/nascent.html

This snippet implements a client-side health check for the Docassemble server. It uses `XMLHttpRequest` to send GET requests to the '/health_check?ready=1' endpoint every 10 seconds. If the server responds with a status of 200, the page is reloaded. Error handling is included for network issues or timeouts.

```javascript
var callingServer = false;

function pingServer() {
  if (callingServer) {
    return;
  }
  let xhr = new XMLHttpRequest();

  function onError() {
    callingServer = false;
  }

  function onLoad() {
    callingServer = false;
    if (xhr.status == 200) {
      location.reload();
      return;
    }
  }

  xhr.open('GET', "/health_check?ready=1", true);
  xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
  xhr.addEventListener("load", onLoad);
  xhr.addEventListener("error", onError);
  xhr.addEventListener("abort", onError);
  xhr.addEventListener("timeout", onError);
  xhr.timeout = 5000;
  xhr.send();
}

window.setInterval(pingServer, 10000);
```

--------------------------------

### Package Dependencies Selection

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/playgroundpackages.html

Renders a section for selecting package dependencies. It displays a label, instructions, lists available packages, and handles potential form errors.

```Jinja2
{{ word("Select zero or more packages") }}
{%- for package in package_names %}
 {{ package }}
{%- endfor %}
{%- if form.dependencies.errors %}
{%- for e in form.dependencies.errors %}

{{ e }}

{%- endfor %}
{%- endif %}
```

--------------------------------

### Configure slider using data-provide API

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-slider/README.md

Illustrates how to automatically initialize a slider by adding the 'data-provide="slider"' attribute to an input element. Options can be passed using 'data-slider-' attributes.

```html
<input
	type="text"
	name="somename"
	data-provide="slider"
	data-slider-ticks="[1, 2, 3]"
	data-slider-ticks-labels='["short", "medium", "long"]'
	data-slider-min="1"
	data-slider-max="3"
	data-slider-step="1"
	data-slider-value="3"
	data-slider-tooltip="hide"
>
```

--------------------------------

### Jinja2 Templating for Entry List Toggling

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/train.html

This snippet demonstrates how to control the visibility of classified entries using Jinja2 templating. It provides links to toggle between showing and hiding these entries based on the 'show_all' flag.

```html
{%- if show_entry_list %}

{%- if show_all %} [{{ word("Hide entries that are already classified") }}]({{ url_for('train', package=the_package, file=the_file, group_id=the_group_id, show_all=0)|safe }}) {%- else %} [{{ word("Show entries that are already classified") }}]({{ url_for('train', package=the_package, file=the_file, group_id=the_group_id, show_all=1)|safe }}) {%- endif %}

{%- endif %}
```

--------------------------------

### Navigation Links in Jinja2

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/playgroundfiles.html

Provides navigation links within the Docassemble playground. Includes a link back to the main playground page and dynamically displays the current file being edited or a 'New file' placeholder.

```jinja2
{% block bottom %}

 [{{ word("Back to Playground") }}]({{ url_for('playground_page', project=current_project) }})

{% endblock %}
```

--------------------------------

### Grunt Build Task

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/static/bootstrap-slider/README.md

Transpiles JavaScript source code using Babel and compiles LESS source code to CSS, placing the output in the `temp` directory.

```bash
grunt build
```

--------------------------------

### Jinja2 Templating for File Listing

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/train.html

This snippet shows how to render a list of files within a specific package using Jinja2. It provides navigation back to package lists and includes counts for each file, with options to show or hide classified entries.

```html
{%- if show_file_list %}

{%- if show_all %} [{{ word("Hide entries that are already classified") }}]({{ url_for('train', package=the_package, show_all=0)|safe }}) {%- else %} [{{ word("Show entries that are already classified") }}]({{ url_for('train', package=the_package, show_all=1)|safe }}) {%- endif %}

### {{ word('Interviews') }}[]({{ url_for('train', package=the_package, show_all=show_all)|safe }} "{{ word('Refresh') }}")

1.  [{{ word('Packages') }}]({{ url_for('train', show_all=show_all)|safe }})
2.  {{ the_package_display }}

{%- for file, count in file_list %} [{{ file }} {{ count }}]({{ url_for('train', package=the_package, file=file, show_all=show_all)|safe }}) {%- endfor %}

{%- endif %}
```

--------------------------------

### Jinja2 Template for Playground Project Management

Source: https://github.com/jhpyle/docassemble/blob/master/docassemble_webapp/docassemble/webapp/templates/pages/manage_projects.html

This Jinja2 template defines the structure for managing playground projects. It uses macros for rendering form fields and conditional logic to display different interfaces based on the 'mode' variable (standard, new, rename, delete). It also includes navigation links and handles project-specific actions.

```jinja2
{% extends 'base_templates/page_base_half_wider.html' %}
{% from "base_templates/form_macros.html" import render_addon_field, render_field, render_select_field, render_submit_field, myrender_hidden_field, render_file_field with context %}

{% block top %}{% endblock %}

{% block content %}
{% if mode == 'standard' %}
  {% if description %}
    {{ description }}
  {% endif %}
  *    [{{ word('Add a New Project') }}]({{ url_for('playground_project', new='1', project=current_project) }} "{{ word('Create a new project') }}")
  {% for project in projects %} {% endfor %}
  {{ word("Project") }}
  {{ word("Action") }}
  [{{ project }}]({{ url_for('playground_page', project=project) }})
  [{{ word('Rename') }}]({{ url_for('playground_project', rename='1', project=project) }}) [{{ word('Delete') }}]({{ url_for('playground_project', delete='1', project=project) }})
{% elif mode == 'new' %}
  {% if description %}
    {{ description }}
  {% endif %}
  {{ form.csrf_token }}
  {{ render_field(form.name) }}
  {{ render_submit_field(form.submit) }}
  [Cancel]({{ url_for('playground_project', project=current_project) }})
{% elif mode == 'rename' %}
  {% if description %}
    {{ description }}
  {% endif %}
  {{ form.csrf_token }}
  {{ render_field(form.name) }}
  {{ render_submit_field(form.submit) }}
  [Cancel]({{ url_for('playground_project', project=current_project) }})
{% elif mode == 'delete' %}
  {% if description %}
    {{ description }}
  {% endif %}
  {{ form.csrf_token }}
  {{ render_submit_field(form.submit) }}
  [Cancel]({{ url_for('playground_project', project=current_project) }})
{% endif %}
{% if after_text %}
  {{ after_text }}
{% endif %}
{% endblock %}

{% block bottom %}
{% if mode == 'standard' %}
   [{{ word("Back to Playground") }}]({{ url_for('playground_page', project=current_project) }})
{% endif %}
{% endblock %}
```