document.addEventListener("appLoaded", () => { UtilityHelpers.waitForElement( "#app", "#custom-spreadsheet-app", (element) => { // 2 sheets should exist; one with the main data (listings), the other one with the filters const elrcListingsConfig = { jsonDataKeys: { mainFileKey: "listings", // Default key for the main file (ex: listings) data filtersKey: "filters", // Default key for filters data }, fetchDataUrl: "https://script.google.com/macros/s/AKfycbycCX8Fh4kSsUrVcZVt4k_a6V0i3VzGb5i66zsNjbYCG2eESNReJQ27axQXsXWBXaml-g/exec", addLoadedClassTo: document.getElementById( "custom-spreadsheet-app", ), // when the content is loaded, a css class is added in order to hide the loader searchElement: document.getElementById("search-input"), // comment to disable search; also remove from HTML resetAllFiltersElement: ".js-reset-all-filters", // comment if the reset functionality is not needed; also remove from HTML sortButtonElement: ".js-sort-button", // comment if sort functionality is not needed; also remove from HTML itemsPerPageElement: ".js-items-per-page", // select how many items per page are shown; comment if not neeeded // also remove from HTML infoAreaElement: ".js-info-area", // search info: Showing X to Y of TOTAL entries; comment if not needed; also remove from HTML mainListArea: document.getElementById("main-list"), // this is where the results will be listed; required mainApp: document.getElementById("custom-spreadsheet-app"), // this is the main app ID; required itemsPerPageDefaultValue: 24, scrollToAppOnFilter: true, // scrolls to mainApp on filter // itemTemplate - builds a card for each listing with the fields requested on the card // (Program/Service Name w/ link, Organization Name, Address/City/State/ZIP, County), // plus a "More Info" button that carries every other column as data-attributes for the modal itemTemplate: `

{{ Organization Name }}

{{ Address }}, {{ City }}, {{ State }} {{ Physical ZIP Code }}

County: {{ County }}

More Info

`, // modalConfig - builds the modal - you have to match a column name from thee spreadsheet with a CSS selector inside the modal modalConfig: { enabled: true, triggerSelector: ".custom-button--2", modalWrapperClass: "spreadsheet-item-modal", // generic naming fields: [ // maps data-* to modal class { data: "program-name", target: ".modal-program-name", type: "text", }, { data: "category", target: ".modal-category", type: "text", }, { data: "website", target: ".modal-website", type: "link", }, { data: "organization", target: ".modal-organization", type: "text", }, { data: "region-number", target: ".modal-region-number", type: "text", }, { data: "address", target: ".modal-address", type: "text", }, { data: "city", target: ".modal-city", type: "text", }, { data: "state", target: ".modal-state", type: "text", }, { data: "zip", target: ".modal-zip", type: "text", }, { data: "mailing-zip", target: ".modal-mailing-zip", type: "text", }, { data: "county", target: ".modal-county", type: "text", }, { data: "hours", target: ".modal-hours", type: "text", }, { data: "phone", target: ".modal-phone", type: "text", }, { data: "toll-free", target: ".modal-toll-free", type: "text", }, { data: "fax", target: ".modal-fax", type: "text", }, { data: "email", target: ".modal-email", type: "mailto", }, { data: "facebook", target: ".modal-facebook", type: "link", }, { data: "twitter", target: ".modal-twitter", type: "link", }, { data: "instagram", target: ".modal-instagram", type: "link", }, { data: "other-social", target: ".modal-other-social", type: "link", }, { data: "source", target: ".modal-source", type: "link", }, { data: "qa-notes", target: ".modal-qa-notes", type: "text", }, { data: "duplicate-flag", target: ".modal-duplicate-flag", type: "text", }, ], }, // "Service Area ZIP Codes" is intentionally not shown anywhere on the page (the data // is unreliable on many rows), but it's kept in search so a user typing a ZIP code // still finds matching listings when the field is well-formed searchInColumns: [ "Program/Service Name", "Organization Name", "County", "City", "Physical ZIP Code", "Service Area ZIP Codes", ], // if search is enabled, this is required sortingCriteria: "Program/Service Name", // if sortButtonElement is enabled, this is required; ONLY ONE enablePagination: true, // Set to false to disable pagination; option to create your own #pagination-area anywhere in the page selectFilters: { // example: { // filterTitle: "Grade Level", // Title to be shown in HTML - OPTIONAL // filterLabel: "grade_name", // from the Filters table - the name of the filter // filterId: "grade_id", // from the Filters table - the ID of the filter - part of the filtering logic // listedColumn: "course_grade_level", // from the main table - contains the filterId value(s); - part of the filtering logic // parentIdInPage: "custom-spreadsheet-app-filter-area", // the ID on the page where it should be appended // optionAll: true, // adds an "All" option with an empty value - basically reset // allButtonText: "All", // only if optionAll is true // extraClass: "optional-css-class" // optional CSS class // }, category: { filterTitle: "Category", filterLabel: "Category", filterId: "CategoryID", listedColumn: "CategoryID", parentIdInPage: "custom-spreadsheet-app-filter-area", optionAll: true, allButtonText: "All Categories", }, }, }; const elrcListings = new CourseCatalog(elrcListingsConfig); }, ); });

{{ Program/Service Name }}

Raise Your Star

Raise Your Star