Widget Tricks - Share and print

Browse, Search, Filter then Share or Print!

This resource highlights the urlsync parameter that allows users to copy/share the URL with applied filters and query. It also proposes a scenario of a dedicated page to print a specific record’s metadata.

<div class="container">
    <ods-dataset-context context="ctx"
                         ctx-dataset="record-stores"
                         ctx-domain="userclub"
                         ctx-urlsync="true">
        <div class="row ods-box">
            <h3>
                Share by copying this link :
            </h3>
            <h3 class="red-box">
                Filter and have a look to your browser URL ! It's synced !
            </h3>
            <h4>
                <a href="https://userclub.opendatasoft.com/pages/widgettrick-shareandprint/?{{ ctx.getQueryStringURL() }}"
                   target="_blank">https://userclub.opendatasoft.com/pages/widgettrick-shareandprint/?{{ ctx.getQueryStringURL() }}</a>
            </h4>
            <h3>
                Share through social network or by email:
            </h3>
            <div class="boutons" style="font-size: 1.6rem;">
                <a href="https://twitter.com/intent/tweet?text=Opendatasoft Page Test;url=https%3A%2F%2Fuserclub.opendatasoft.com%2Fpages%2Fwidgettrick-shareandprint%2F%3F{{ctx.getQueryStringURL() | encodeURIComponent}}"
                   class="ods-dataset-visualization__social-button ods-dataset-visualization__social-button--twitter"
                   target="_blank">
                    <i class="fa fa-twitter ods-dataset-visualization__social-button-icon" aria-hidden="true"></i>
                </a>
                <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fuserclub.opendatasoft.com%2Fpages%2Fwidgettrick-shareandprint%2F%3F{{ctx.getQueryStringURL() | encodeURIComponent}}"
                   class="ods-dataset-visualization__social-button ods-dataset-visualization__social-button--facebook"
                   target="_blank">
                    <i class="fa fa-facebook ods-dataset-visualization__social-button-icon" aria-hidden="true"></i>
                </a>
                <a href="https://plus.google.com/share?url=https%3A%2F%2Fuserclub.opendatasoft.com%2Fpages%2Fwidgettrick-shareandprint%2F%3F{{ctx.getQueryStringURL() | encodeURIComponent}}"
                   class="ods-dataset-visualization__social-button ods-dataset-visualization__social-button--google-plus"
                   target="_blank">
                    <i class="fa fa-google-plus ods-dataset-visualization__social-button-icon" aria-hidden="true"></i>
                </a>
                <a href="https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fuserclub.opendatasoft.com%2Fpages%2Fwidgettrick-shareandprint%2F%3F{{ctx.getQueryStringURL() | encodeURIComponent}}&amp;mini=true&amp;title=Opendatasoft Page Test;source=Opendatasoft"
                   class="ods-dataset-visualization__social-button ods-dataset-visualization__social-button--linkedin"
                   target="_blank">
                    <i class="fa fa-linkedin ods-dataset-visualization__social-button-icon" aria-hidden="true"></i>
                </a>
                <a href="mailto:?subject=Opendatasoft Page Test&amp;body=https%3A%2F%2Fuserclub.opendatasoft.com%2Fpages%2Fwidgettrick-shareandprint%2F%3F{{ctx.getQueryStringURL() | encodeURIComponent}}"
                   class="ods-dataset-visualization__social-button ods-dataset-visualization__social-button--mail"
                   target="_blank">
                    <i class="fa fa-envelope ods-dataset-visualization__social-button-icon" aria-hidden="true"></i>
                </a>
            </div>
        </div>
        <div class="row ods-box">
            <h3>
                A dashboard : Music record store in the world
            </h3>
            <div class="col-md-3 ods-box">
                <ods-text-search context="ctx" placeholder="disc, records, music..."></ods-text-search>
                <ods-filter-summary context="ctx"></ods-filter-summary>
                <ods-facets context="ctx"></ods-facets>
            </div>
            <div class="col-md-9 ods-box">
                <ods-map>
                    <ods-map-layer context="ctx">
                        <div>
                            <h3>
                                {{ record.fields.name }}
                            </h3>
                            <p style="font-style:italic; color:grey; font-weight:300">
                                {{ record.fields.address }}
                            </p>
                            <div style="line-height: 0px;">
                                <p>
                                    <span style="font-style:italic;">Has closed </span><b style="font-size:1.2em">{{ record.fields.hasclosed }}</b>
                                </p>
                            </div>
                            <a style="color: #1e0c33; font-weight: 600; font-size: 1.1em;"
                               href="https://userclub.opendatasoft.com/pages/widgettrick-shareandprint-card?q=city:%22{{ record.fields.city }}%22 AND name:%22{{ record.fields.name }}%22"
                               target="_blank">Go to the store card</a>
                        </div>
                    </ods-map-layer>
                </ods-map>
                <div class="ods-box">
                    <ods-table context="ctx"></ods-table>
                </div>
            </div>
        </div>
    </ods-dataset-context>
</div>
.boutons {
    margin-left: 30px;
}
.red-box {
    float: right;
    border: 2px solid darkred;
    color: darkred;
    padding: 20px;
    background-color: #ffe8e8;
}

Card with print style!

This card lists all fields of the record, and has print styling to remove all unnecessary elements of the page.

<div class="ods-box card">
    <h2>
        Record store card <span style="font-size:0.7em; color:darkred; margin-left:40px">Print it (Ctrl/Cmd+P) or just share the link !</span>
    </h2>
    <ods-dataset-context context="ctx"
                         ctx-dataset="record-stores"
                         ctx-urlsync="true">
        <div ng-repeat="item in items" ods-results="items" ods-results-context="ctx" ods-results-max="1">
            <ul class="field-list">
                <li class="field" ng-repeat="field in ctx.dataset.fields">
                    <p class="label">
                        {{ field.label }}
                    </p>
                    <p class="value">
                        {{ item.fields[field.name] }}
                    </p>
                </li>
            </ul>
        </div>
        <ods-map context="ctx"></ods-map>
    </ods-dataset-context>
</div>
.card {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.field-list {
    list-style-type: none;
    display: grid;
}
.field {
    display: inline-flex;
    line-height: 18px;
    margin-bottom: 4px;
}
.label {
    width: 175px;
    color: black;
    font-weight: 500;
}
.value {
    width: 400px;
    border: 1px solid black;
    border-radius: 5px;
    padding: 2px 0px 0px 5px;
    line-height: 25px;
    background-color: #f0f0f0;
}
@media print {
    header, footer {
        display: none;
    }
}