Constructor

# new Gallery(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the following methods:

Create the Web Component and call its init method:

const myGallery = document.createElement("a-gallery").init(config)

Or use the shorthand for it:

const myGallery = createGallery({
  id: "my-gallery",
  color: "#00aaee",
  collection: kiss.app.collections["contact"],

  // We can define a menu with custom actions
  actions: [
      {
          text: "Group by status",
          icon: "fas fa-sort",
          action: () => $("my-gallery").groupBy(["Status"])
      }
  ],
  
  // We can add custom methods, and also override default ones
  methods: {

     // Override the createRecord method
     createRecord(model) {
         // Create a record from this model
         console.log(model)
     },

     // Override the selectRecord method
     selectRecord(record) {
         // Show the clicked record
         console.log(record)
     },

     sayHello: () => console.log("Hello"),
  }
})

myGallery.render()

Parameters:

Name	Type	Attributes	Description
`config`	`object`
`collection`	`Collection`		The data source collection
`showImage`	`boolean`	<optional>	Show the image in the gallery (default = true)
`imageFieldId`	`string`	<optional>	The field to use as the image in the gallery. If not set, the first attachment field will be used.
`record`	`object`	<optional>	Record to persist the view configuration into the db
`columns`	`Array.<object>`	<optional>	Where each column is: {title: "abc", type: "text\|number\|integer\|float\|date\|button", id: "fieldId", button: {config}, renderer: function() {}}
`color`	`string`	<optional>	Hexa color code. Ex: #00aaee
`showToolbar`	`boolean`	<optional>	false to hide the toolbar (default = true)
`showActions`	`boolean`	<optional>	false to hide the custom actions menu (default = true)
`showLayoutButton`	`boolean`	<optional>	false to hide the button to adjust the layout (default = true)
`canSearch`	`boolean`	<optional>	false to hide the search button (default = true)
`canSelect`	`boolean`	<optional>	false to hide the selection checkboxes (default = true)
`canSort`	`boolean`	<optional>	false to hide the sort button (default = true)
`canFilter`	`boolean`	<optional>	false to hide the filter button (default = true)
`canGroup`	`boolean`	<optional>	false to hide the group button (default = true)
`canSelectFields`	`boolean`	<optional>	Can we select the fields (= columns) to display in the gallery? (default = true)
`canCreateRecord`	`boolean`	<optional>	Can we create new records from the gallery?
`createRecordText`	`boolean`	<optional>	Optional text to insert in the button to create a new record, instead of the default model's name
`actions`	`Array.<object>`	<optional>	Array of menu actions, where each menu entry is: {text: "abc", icon: "fas fa-check", action: function() {}}
`width`	`number` \| `string`	<optional>
`height`	`number` \| `string`	<optional>

View Source client/ui/data/gallery.js, line 50

Returns:

this

Generated markup

<a-gallery class="a-gallery">
     <div class="gallery-toolbar">
         <!-- Gallery toolbar items -->
     </div>
     <div class="gallery-body-container">
         <div class="gallery-body">
             <!-- Body columns -->
         </div>
     </div>
</a-gallery>