Openstad
  • Introductie
  • Projectmanagement
    • Algemene kaders
    • Participatieprocessen
      • Voorkeurspeiling
      • Wedstrijd
      • Participatief begroten
  • Digitale tools
    • OpenStad CMS basis
      • Inloggen
      • De bouwstenen
      • Live in-page editing
      • Bewerkmodus (Draft)
      • Versiebeheer
    • Participatieprocessen
      • Voorkeurspeiling
      • Wedstrijd
      • Participatief begroten
    • How-to's
      • Nieuwe site aanmaken
      • Nieuwe pagina's toevoegen
      • Pagina's vullen
      • Inzendingen uploaden
      • Inzendingen weergeven
      • Filteren en categoriseren van inzendingen
      • Likes verzamelen
      • Reacties en argumenten
      • Interactieve kaart
      • Polygonen
      • Newsletter
      • Moderatie
      • Unieke stemcodes
      • Stemmen
      • Gebruikersbeheer
      • Gebruikers anonimiseren per website
      • Inzendingen exporteren en importeren
      • Vormgeving & logo aanpassen
      • E-mail notificaties
    • Widgets referentie
      • Accordeon
      • Agenda
      • Arguments
      • Columns
      • Slider
      • Counter
      • Date countdown bar
      • Ideas map
      • Ideeën op een kaart (Kaart applicatie)
      • iFrame
      • Image
      • Info bar
      • Link or button
      • List
      • Like
      • Location
      • Participatory budgeting
      • Keuzewijzer
      • Keuzewijzer resultaten
      • Rich text
      • Resource admin buttons
      • Resource overview
      • Resource form
      • Resource representation
      • Resource raw widget
      • Resource image
      • Speech bubble
      • Share widgets
      • Title
      • User remove form
      • Video upload
      • Video 3d party
      • Vorige volgende knoppen
    • Algemeen
      • Terminologie
      • Waarschuwingen
      • Adminpanel
      • Adminpanel (beta)/React admin
      • Page Settings
      • OpenStad hoofdmenu
        • Tags
        • Global
        • Open palette
        • Clear cache
        • Pages
        • Users
        • Images
        • Files
        • Workflow
        • Logout
      • Styles for the container
      • Interactieve kaart thema iconen
      • Inzendingen (ideas)
      • Artikelen (articles)
      • Gebruikers (users)
      • Authenticatie methodes
      • Rollen
      • URL's
      • Testen
      • Raw
      • Resources
  • Technical documentation (English)
    • Architecture
    • Getting started
    • Deploying to production
      • Kubernetes
      • Installing on Digital ocean with Kubernetes
      • Backups
      • Deploying a custom image
    • Frontend: CMS
      • Apostrophe CMS
      • The Openstad version of ApostropheCMS
      • Using openstad-components
      • Configuration
    • Frontend: Components
      • Use and configuration
      • Publishing
      • Components
        • Choices Guide
        • Ideas On Map
    • Api
      • Site
      • Idea
      • Argument
      • Vote
      • Article
      • Newsletter Signup
      • User
      • Auth
      • Resource & Data permissions
      • Pagination and search
      • Email settings
      • Database migrations
      • API configuration
    • oAuth2
      • Oauth2 configuration
    • Management panel
      • Management Panel configuration
    • Image server
    • Contributing & versioning
    • Git flow
    • Roadmap
Powered by GitBook
On this page
  1. Technical documentation (English)
  2. Frontend: CMS

The Openstad version of ApostropheCMS

PreviousApostrophe CMSNextUsing openstad-components

Last updated 2 years ago

We have bundled the ApostropheCMS as an Openstad CMS local npm package. This package lives in the packages/cms folder and the modules are overrideable just like ApostropheCMS modules. Create the files you want to override directly under lib/modules.

This is a core feature of the ApostropheCMS and because of the way we bundled it works for both the ApostropheCMS modules and the Openstad modules.

For now treat it as a local NPM package, in the future this will be moved to an external NPM package (@openstad/cms).

There are multiple ways to add or modify modules. It depends on what you want to achieve and how you run the project.

1. Add new module to the root project in lib/modules:

  • Create new module in lib/modules

  • Create index.js file in you modules folder (e.g. lib/modules/custom-module/index.js), example:

module.exports = {  
  label: 'custom module',
  construct: function(self, options) {
    
  }
};
  • Add the new module to your project in the index.js:

var apos = openstadCms.site({
  bundles: ['@openstad/cms'],
  // See lib/modules for basic project-level configuration of our modules
  // responsible for serving static assets, managing page templates and
  // configuring user accounts.

  modules: { 
    'custom-module': {}
   }
});

2. Override existing Openstad or Apostrophe module To override or extend an existing module you can add the files under lib/modules. **example: If you want to modify the html of the agenda-widgets you only need to create the lib/modules/agenda-widgets/views/widget.html file and you're free to change the html structure.

<style>
  {{data.widget.formattedContainerStyles}}
</style>

<div id="{{data.widget.containerId}}" class="agenda">

<div data-gb-custom-block data-tag="for">

  <div class=" {{'agenda-period' if (item.period === true) or (item.period === 'period') else 'agenda-day' }}">
    <div>
      <h3> {{item.title | sanitize | safe}} </h3>
      

<div data-gb-custom-block data-tag="if">

      {{item.actionText}}
      

</div>

    </div>
  </div>

</div>
</div>

Override/extend for example the section-widgets: lib/modules/section-widgets/index.js

module.exports = {
  construct(self, options) {
    const superGetContentWidgets = self.getContentWidgets;

    self.getContentWidgets = (req) => {
      const contentWidgets = superGetContentWidgets(req);

      contentWidgets['custom-content-widget'] = {
        readOnly: false,
        edit: true,
      };

      return contentWidgets;
    }
  }
};

Override/extend a javascript module file lib/modules/resource-form-widgets/public/js/map.js

apos.define('resource-form-widgets', {
    
    construct: function(self, options) {
       console.log('do something special');
    }
});

3. Create a standalone module and install this as a npm dependency

It's also possible to make your own standalone packages for the Openstad project. You need to create a package and publish it to npm and add the dependency in your package.json.

For more information please refer to the Apostrophe documentation: https://docs.apostrophecms.org/core-concepts/modules/more-modules.html#packaging-apostrophe-modules-together-creating-bundles

4. Create a Pull request in the openstad/cms package if you want to change something directly in the core module: Everyone is invited to contribute to the @openstad/cms core package. contribute

Apostrophe's module pattern