Vigorjs ComponentManager

You can also filter on any custom properties you like by adding properties to your componentDefinitions or instanceDefinitions and then add the desired properties to your filter.

Any properties thats not a part of the default properties on the componentDefinition and instanceDefinition models will be used when filtering on custom properties. The same applies to the filter, so if you add any properties on the filter that is not a part of the default ones the componentManager will go through and merge the custom properties from each instanceDefinition with its referenced componentDefinition and then try to match those properties with whats been provieded in the filter.

That means that you can apply a custom property ex: type: 'my-custom-component' to your componentDefinition and then if needed you can override that type on one of the instanceDefinitions that is referencing that componentDefinition.

Take a look at components.js to see component the setup for this example.

conditions:0components:1instances:8

var componentSettings = {
  components: [
    {
      id: 'filter-condition-component',
      src: 'ExampleComponent' // ExampleComponent.js in the examples directory - exposed on window
    },
    {
      id: 'filter-condition-component2',
      src: 'ExampleComponent', // ExampleComponent.js in the examples directory - exposed on window
      type: 'yellow-component',
      componentStyle: 'custom'
    }
  ],

  targets: {
    main: [
      {
        id: 'filter-instance-1',
        componentId: 'filter-condition-component',
        urlPattern: 'foo/:bar',
        type: 'grey-component',
        args: {
          id: 'id: filter-instance-1',
          urlPattern: 'foo/:bar',
          type: 'grey-component',
          background: 'grey'
        }
      },

      {
        id: 'filter-instance-2',
        componentId: 'filter-condition-component',
        urlPattern: 'bar/:baz',
        type: 'grey-component',
        args: {
          id: 'id: filter-instance-2',
          urlPattern: 'foo/:bar',
          type: 'grey-component',
          background: 'grey'
        }
      },

      {
        id: 'filter-instance-3',
        componentId: 'filter-condition-component',
        urlPattern: 'foo/:bar',
        type: 'green-component',
        args: {
          id: 'id: filter-instance-3',
          urlPattern: 'foo/:bar',
          type: 'green-component',
          background: 'green'
        }
      },

      {
        id: 'filter-instance-4',
        componentId: 'filter-condition-component',
        urlPattern: 'bar/:baz',
        type: 'green-component',
        args: {
          id: 'id: filter-instance-4',
          urlPattern: 'bar/:baz',
          type: 'green-component',
          background: 'green'
        }
      },

      {
        id: 'filter-instance-5',
        componentId: 'filter-condition-component',
        urlPattern: 'foo/:bar',
        type: 'red-component',
        args: {
          id: 'id: filter-instance-5',
          urlPattern: 'bar/:baz',
          type: 'red-component',
          background: 'red'
        }
      },

      {
        id: 'filter-instance-6',
        componentId: 'filter-condition-component',
        urlPattern: 'bar/:baz',
        type: 'red-component',
        args: {
          id: 'id: filter-instance-6',
          urlPattern: 'bar/:baz',
          type: 'red-component',
          background: 'red'
        }
      },

      {
        id: 'filter-instance-7',
        componentId: 'filter-condition-component2',
        urlPattern: 'bar/:baz',
        type: 'red-component',
        args: {
          id: 'id: filter-instance-7',
          urlPattern: 'bar/:baz',
          type: 'red-component',
          background: 'red'
        }
      },

      {
        id: 'filter-instance-8',
        componentId: 'filter-condition-component2',
        urlPattern: 'foo/:bar',
        args: {
          id: 'id: filter-instance-8',
          urlPattern: 'bar/:baz',
          background: 'yellow'
        }
      }
    ]
  }
}

Filter By Custom Properties