Share and print – Codelibrary

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.

Dataset in use: record-stores (See it on userclub domain)

Fields in use:

coordonnees_geo (geo_point)	name	hasclosed	city
34.67429180,135.50417380	Naminohana Records	no	Osaka
-12.05070340,-77.03952410	Disqueria	no	Lima
50.06394440,19.93641400	Music Corner Sp. o.o.	no	Kraków
-25.77143478,28.23460960	Musica	no	Pretoria

<div class="container">
    <ods-dataset-context context="ctx"
                         ctx-dataset="les-eruptions-volcaniques-dans-le-monde"
                         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 : Global earthquakes
            </h3>
            <div class="col-md-3 ods-box">
                <ods-text-search context="ctx" placeholder="country, type, status..."></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.volcano_name }}
                            </h3>
                            <p style="font-style:italic; color:grey; font-weight:300">
                                {{ record.fields.country }}
                            </p>
                            <p>Type: {{record.fields.volcano_type}}</p>
                            <p>Status: {{record.fields.status}}</p>
                            <div style="line-height: 0px;">
                                <p>
                                    <span style="font-style:italic;">Has tsunami </span><b
                                       style="font-size:1.2em">{{ record.fields.flag_tsunami }}</b>
                                </p>
                                <p>
                                    <span style="font-style:italic;">Has earthquakes </span><b
                                       style="font-size:1.2em">{{ record.fields.flag_earthquake }}</b>
                                </p>
                            </div>
                            <a style="color: #1e0c33; font-weight: 600; font-size: 1.1em;"
                               href="https://userclub.opendatasoft.com/pages/widgettrick-shareandprint-card?q=country:%22{{ record.fields.country }}%22 AND volcano_name:%22{{ record.fields.volcano_name }}%22"
                               target="_blank">Go to the volcano 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.

Dataset in use: record-stores (See it on userclub domain)

Fields in use:

coordonnees_geo (geo_point)	name	hasclosed	city	countrycode	latitude	longitude	placeidh
34.67429180,135.50417380	Naminohana Records	no	Osaka	JP	34.67429180	135.50417380	f63363a2c9f10f3ac7adcfb31f6db486
-12.05070340,-77.03952410	Disqueria	no	Lima	PE	-12.05070340	-12.05070340	06157739f6792af80068e9913152590a
50.06394440,19.93641400	Music Corner Sp. o.o.	no	Kraków	PL	50.06394440	19.93641400	c43ef6c5b6a3dcc6368aec9e41e0625f
-25.77143478,28.23460960	Musica	no	Pretoria	ZA	-25.77143478	28.23460960	26b2ce9808bcf3b531996fdd2914bd40

<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="les-eruptions-volcaniques-dans-le-monde"
                         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.volcano_name }}</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;
    }
}

Widget Tricks - Share and print

Browse, Search, Filter then Share or Print!

Card with print style!