Skip to content

Commit 64e4445

Browse files
committed
Show results in an HTML table
1 parent cd858f7 commit 64e4445

File tree

4 files changed

+374
-67
lines changed

4 files changed

+374
-67
lines changed

README.md

Lines changed: 102 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,113 @@ To help users discover your publications, you can add them to an online database
99

1010
## Usage
1111

12-
Open the HTML file in your browser and enter a search term like Groundwater. When you click Search, the application searches the LTER Network Zotero group (ID 2055673) which makes their items publicly available, and writes results as formatted by Zotero to the page.
12+
Open the zotero.html file in your browser and enter a search term like
13+
`coastal`. Click the search button and see results as formatted by Zotero to the page.
1314

14-
You can click Search with no terms specified to show the entire catalog, which is the default behavior when you load the page.
15+
You can click Search with no terms specified to show the entire catalog, which is the default behavior when you load the page.
1516

1617
Zotero limits the number of results returned in a single request, so the page supports pagination to get additional results.
1718

1819
To use this for your own project, you will need a free Zotero account into which you include your publications, and obviously you'll need to adapt the HTML, CSS, etc., for your particular website.
1920

2021
## Customization
2122

22-
To change parameters such as how many search results to show at a time, see the ZOTERO_CONFIG variable in zotero.js.
23+
The code finds elements via their HTML id attribute values, so in general you'll
24+
want to start with one of the example HTML documents and adapt it to your needs.
25+
26+
To change parameters such as how many search results to show at a time, see the
27+
`ZOTERO_CONFIG` variable in `zotero.js`. See comments in the code for a brief
28+
explanation and example values, or the text below for additional details.
29+
30+
### What To Search
31+
32+
You can search a user library, a group, or a collection within a user library or
33+
group.
34+
35+
* `zotId` - The user or group identifier. You can find your group identifier by
36+
browsing to your group page and copying the number in the URL. To find your
37+
user identifier, click **Settings**, and then click **Feeds/API**.
38+
* `zotIdType` - Indicates whether `zotId` is for a `group` or a `user`.
39+
* `collectionKey` - Supply a value for this if you want to limit search to a
40+
particular collection. Otherwise leave it as an empty string, "". You can
41+
find your collection identifier by browsing to the collection's page and copying the
42+
collection key from the URL.
43+
* `filterTags` - Use this to restrict results to items matching this tag filter,
44+
or leave the value as an emptry string, "", if no tag filtering is desired.
45+
Since the Zotero API supports several ways of writing a tag filter, the entire tag parameter including the preceeding ampersand is required for
46+
this value, as in `&tag=FeaturedArticle`. See the [API
47+
documentation](https://www.zotero.org/support/dev/web_api/v3/basics) for
48+
examples.
49+
50+
### Results Table
51+
52+
Results are displayed in a table with up to four columns: `Year`, `Citation`,
53+
`Item Type`, and a special column (we'll refer to it as `ShowTags`) showing the
54+
presence of particular tags.
55+
56+
* `resultsElementId` - The id of the HTML element to contain the results table.
57+
This element must already exist in your HTML document.
58+
* `includeCols` - Array of column names to include in the output table, other than
59+
`Citation` which is always included. The full set is `Year`, `Type`, and
60+
`ShowTags`. If you leave a column name out in this array, then it will not
61+
appear in the result table. If you leave all columns out (i.e., the array is
62+
empty), then only the citations are shown, and no column header is shown.
63+
* `showTags`: Array of tags to show, if present, for each result item. Use this
64+
to categorize your items if Zotero doesn't support the categories you need out
65+
of the box. For example, you could tag your items based on their relationship
66+
to your LTER site, indicating whether the item is a foundational paper for the
67+
site (`Fondational`), was funded by the site (`LTER-Funded`), or was written by someone outside of your site
68+
who used your site's data (`LTER-Enabled`). If an item has one of the tags
69+
you specify, the tag will be shown in the `ShowTags` column. Obviously, if you
70+
want to use this functionality, make sure the text `ShowTags` is included in
71+
`includeCols`.
72+
* `showTagColName` - The name to be used for the `ShowTags` column in the
73+
results table, since I can't predict what kind of categories your tags
74+
represent. `Relationship to LTER Site` would work for the example tags
75+
mentioned above.
76+
* `style` - The bibliography display style for the citations, e.g., apa. Leave
77+
blank for the default which is chicago-note-bibliography.
78+
79+
### Result Counts and Pagination
80+
81+
You can provide HTML id attribute values for elements that will contain result
82+
counts, pagination links, and so on. In general, if you do not want to show one
83+
of these elements, then provide an empty string, "", as the identifier. If the
84+
code does not find a matching element, it will skip it.
85+
86+
* `limit` - Max number of results to retrieve per page. A value of 10 is a good
87+
starting point. As you approach 100, Zotero gets awfully slow.
88+
* `urlElementId` - Supply this if your HTML document has an element in which
89+
you'd like to display the URL that was used to fetch results from Zotero.
90+
* `countElementId` - Element in your HTML document for showing the total number
91+
of results.
92+
* `pagesTopElementId` - Element to display result page links above results.
93+
* `pagesBotElementId` - Element to display result page links below results.
94+
* `showPages` - Max number of page links to show. The code assumes this is an
95+
odd number!
96+
97+
### Advanced Search Controls
98+
99+
The Zotero API has very limited advanced search functionality, though the
100+
developers say they are planning to add more features. Currently you
101+
can only filter by item type. Thus, `zotero.html` includes a collapsible
102+
**Advanced** section in which the user can choose to filter by item type. See
103+
the HTML if you're curious, but for now I suggest leaving the advanced section
104+
out until more advanced functionality is supported.
105+
106+
### Sorting
107+
108+
The Zotero API supports sorting results. If you want to allow the user to sort
109+
results, you must include an HTML `select` control with the identifier
110+
`visibleSort` and with options matching the allowable Zotero sort values. See
111+
the section on sorting and pagination parameters in the [Zotero API
112+
documentation](https://www.zotero.org/support/dev/web_api/v3/basics) for
113+
allowable values. See `zotero.html` for an example of what the `select` element
114+
should look like. This element should be contained within a `div` element,
115+
which is used to hide the control if no results were returned from the search.
116+
117+
If you do not want to allow the user to change the sorting option, then leave
118+
these HTML elements out of your document.
119+
120+
* `sortDiv` - Identifier of the HTML element containing the `select` control
121+
allowing interactive sort options.

minimal.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Demo Zotero Search (min UI)</title>
6+
<meta charset="utf-8" />
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
8+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
10+
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
11+
<link href="search.css" rel="stylesheet" type="text/css">
12+
<script src="cors.js"></script>
13+
<script src="pagination.js"></script>
14+
<script src="zotero.js"></script>
15+
</head>
16+
17+
<body>
18+
<div class="container">
19+
<h1>Minimal User Interface Example</h1>
20+
<p>This example does not include elements for letting the user filter by
21+
item type or sorting results. It also does not display the search URL.</p>
22+
<p>Enter a search term, e.g., groundwater. The user or group with ID <span id="displayId">(not set)</span> will be
23+
searched.</p>
24+
<form id="zoteroSearchForm" name="zoteroSearchForm">
25+
<input type="hidden" id="sort" name="sort" value="date">
26+
<input class="search-input" name="q" placeholder="Enter search term" type="text">
27+
<input type="submit" value="Search">
28+
</form>
29+
30+
<div class="loading" id="loading-div">
31+
<i class="fas fa-spinner fa-pulse fa-3x fa-fw"></i>
32+
<span class="sr-only">Loading...</span>
33+
</div>
34+
35+
<p>Search results will be written below:</p>
36+
<div class="resultCount" id="resultCount"></div>
37+
<div id="searchResults"></div>
38+
<div class="pagination" id="paginationBot"></div>
39+
</div>
40+
<script>
41+
document.getElementById("displayId").innerHTML = ZOTERO_CONFIG["zotId"];
42+
</script>
43+
</body>
44+
45+
</html>

zotero.html

Lines changed: 55 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
<html lang="en">
33

44
<head>
5-
<title>Demo Zotero Search</title>
5+
<title>Demo Zotero Search (max UI)</title>
66
<meta charset="utf-8" />
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
8+
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
79
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
810
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
911
<link href="search.css" rel="stylesheet" type="text/css">
@@ -13,62 +15,67 @@
1315
</head>
1416

1517
<body>
16-
<p>Enter a search term, e.g., groundwater. The user or group with ID <span id="displayId">(not set)</span> will be
17-
searched.</p>
18-
<form id="zoteroSearchForm" name="zoteroSearchForm">
19-
<input type="hidden" id="sort" name="sort" value="date">
20-
<input class="search-input" name="q" placeholder="Enter search term" type="text">
21-
<input type="submit" value="Search">
18+
<div class="container">
19+
<h1>Complete User Interface Example</h1>
20+
<p>This example shows all possible user interface items. It also shows
21+
the URL with parameters sent to the Zotero API.</p>
22+
<p>Enter a search term, e.g., groundwater. The user or group with ID <span id="displayId">(not set)</span> will be
23+
searched.</p>
24+
<form id="zoteroSearchForm" name="zoteroSearchForm">
25+
<input type="hidden" id="sort" name="sort" value="date">
26+
<input class="search-input" name="q" placeholder="Enter search term" type="text">
27+
<input type="submit" value="Search">
2228

23-
<div style="margin-top: 10px">
24-
<input aria-expanded="false" aria-controls="advancedInputs" class="collapse-toggle" name="expanded"
25-
type="checkbox" value="true" id="advancedToggle" role="button">
26-
<label class="lbl-toggle" tabindex="0" for="advancedToggle">
27-
Advanced
28-
</label>
29-
</div>
29+
<div style="margin-top: 10px">
30+
<input aria-expanded="false" aria-controls="advancedInputs" class="collapse-toggle" name="expanded"
31+
type="checkbox" value="true" id="advancedToggle" role="button">
32+
<label class="lbl-toggle" tabindex="0" for="advancedToggle">
33+
Advanced
34+
</label>
35+
</div>
3036

31-
<div class="collapsible" id="advancedInputs">
32-
<div class="input-block">
33-
<i class="fas fa-book"></i><label class="group-label" for="itemType">Item Type</label><br>
34-
<select class="search-input" name="itemType" id="itemType">
35-
<option value="-attachment">Any</option>
36-
<option value="journalArticle">Journal Article</option>
37-
<option value="book">Book</option>
38-
<option value="bookSection">Book Section</option>
39-
<option value="thesis">Thesis</option>
40-
<!--
37+
<div class="collapsible" id="advancedInputs">
38+
<div class="input-block">
39+
<i class="fas fa-book"></i><label class="group-label" for="itemType">Item Type</label><br>
40+
<select class="search-input" name="itemType" id="itemType">
41+
<option value="-attachment">Any</option>
42+
<option value="journalArticle">Journal Article</option>
43+
<option value="book">Book</option>
44+
<option value="bookSection">Book Section</option>
45+
<option value="thesis">Thesis</option>
46+
<!--
4147
<option value="conferencePaper">Conference Paper</option>
4248
<option value="magazineArticle">Magazine Article</option>
4349
<option value="videoRecording">Video</option>-->
44-
</select>
50+
</select>
51+
</div>
52+
<input type="submit" value="Search">
4553
</div>
46-
<input type="submit" value="Search">
47-
</div>
48-
</form>
54+
</form>
4955

50-
<div class="loading" id="loading-div">
51-
<i class="fas fa-spinner fa-pulse fa-3x fa-fw"></i>
52-
<span class="sr-only">Loading...</span>
53-
</div>
56+
<div class="loading" id="loading-div">
57+
<i class="fas fa-spinner fa-pulse fa-3x fa-fw"></i>
58+
<span class="sr-only">Loading...</span>
59+
</div>
5460

55-
<p>Search URL will be written below:</p>
56-
<p id="searchUrl"></p>
57-
<p>Search results will be written below:</p>
58-
<div class="resultCount" id="resultCount"></div>
59-
<div class="pagination" id="paginationTop"></div>
60-
<div style="display:none" id="sortDiv">
61-
<label for="visibleSort">Sort by</label>
62-
<select name="sort" id="visibleSort">
63-
<option value="date">Publication Date</option>
64-
<option value="dateAdded">Date Added</option>
65-
<option value="itemType">Item Type</option>
66-
<option value="creator">Creator (a-z)</option>
67-
<option value="title">Title (a-z)</option>
68-
</select>
61+
<p>Search URL will be written below:</p>
62+
<p id="searchUrl"></p>
63+
<p>Search results will be written below:</p>
64+
<div class="resultCount" id="resultCount"></div>
65+
<div class="pagination" id="paginationTop"></div>
66+
<div style="display:none" id="sortDiv">
67+
<label for="visibleSort">Sort by</label>
68+
<select name="sort" id="visibleSort">
69+
<option value="date">Publication Date</option>
70+
<option value="dateAdded">Date Added</option>
71+
<option value="itemType">Item Type</option>
72+
<option value="creator">Creator (a-z)</option>
73+
<option value="title">Title (a-z)</option>
74+
</select>
75+
</div>
76+
<div id="searchResults"></div>
77+
<div class="pagination" id="paginationBot"></div>
6978
</div>
70-
<div id="searchResults"></div>
71-
<div class="pagination" id="paginationBot"></div>
7279
<script>
7380
document.getElementById("displayId").innerHTML = ZOTERO_CONFIG["zotId"];
7481
</script>

0 commit comments

Comments
 (0)