diff --git a/gallery/src/demos/demo-hui-entities-card.js b/gallery/src/demos/demo-hui-entities-card.js
index 906f942573..f193d92de0 100644
--- a/gallery/src/demos/demo-hui-entities-card.js
+++ b/gallery/src/demos/demo-hui-entities-card.js
@@ -121,6 +121,13 @@ const CONFIGS = [
url: http://google.com/
icon: mdi:google
name: Google
+ - type: call-service
+ icon: mdi:power
+ name: Bed light
+ action_name: Toggle light
+ service: light.toggle
+ service_data:
+ entity_id: light.bed_light
- type: divider
- type: divider
style:
diff --git a/src/panels/lovelace/cards/hui-entities-card.js b/src/panels/lovelace/cards/hui-entities-card.js
index 38cd7af859..e3d1977db6 100644
--- a/src/panels/lovelace/cards/hui-entities-card.js
+++ b/src/panels/lovelace/cards/hui-entities-card.js
@@ -28,7 +28,6 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
margin: 4px 0;
}
#states > div > * {
- display: block;
overflow: hidden;
}
.header {
diff --git a/src/panels/lovelace/common/call-service.js b/src/panels/lovelace/common/call-service.js
new file mode 100644
index 0000000000..57989ea854
--- /dev/null
+++ b/src/panels/lovelace/common/call-service.js
@@ -0,0 +1,9 @@
+export default function callService(config, hass) {
+ const entityId = config.entity;
+ const [domain, service] = config.service.split('.', 2);
+ const serviceData = Object.assign(
+ {}, { entity_id: entityId },
+ config.service_data
+ );
+ hass.callService(domain, service, serviceData);
+}
diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js
index db8147e9e8..b2e797368e 100644
--- a/src/panels/lovelace/common/create-row-element.js
+++ b/src/panels/lovelace/common/create-row-element.js
@@ -12,6 +12,7 @@ import '../entity-rows/hui-text-entity-row.js';
import '../entity-rows/hui-timer-entity-row.js';
import '../entity-rows/hui-toggle-entity-row.js';
+import '../special-rows/hui-call-service-row.js';
import '../special-rows/hui-divider-row.js';
import '../special-rows/hui-weblink-row.js';
@@ -19,6 +20,7 @@ import createErrorCardConfig from './create-error-card-config.js';
const CUSTOM_TYPE_PREFIX = 'custom:';
const SPECIAL_TYPES = new Set([
+ 'call-service',
'divider',
'weblink'
]);
diff --git a/src/panels/lovelace/special-rows/hui-call-service-row.js b/src/panels/lovelace/special-rows/hui-call-service-row.js
new file mode 100644
index 0000000000..7b1c91816b
--- /dev/null
+++ b/src/panels/lovelace/special-rows/hui-call-service-row.js
@@ -0,0 +1,68 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import '@polymer/paper-button/paper-button.js';
+
+import '../../../components/ha-icon.js';
+import callService from '../common/call-service.js';
+
+class HuiCallServiceRow extends PolymerElement {
+ static get template() {
+ return html`
+
+