When you select the dropdown "This apples to..." then you might see hundreds of reports in a long list depending on whether you use premium feature, have many goals, forms, etc.
It would be better to instead use the expandable select. This UI control allows you to search and use collapsible groups. Below code should allow you to do this. However, I'm assuming that UI tests will need to be adjusted to make this work.
It would look like this:
We're using this UI control in custom reports. So the tests could be adjusted similar to plugins/CustomReports/tests/UI/Edit_spec.js
eg the changeDimension
method
diff --git a/angularjs/managecustomalerts/managecustomalerts.controller.js b/angularjs/managecustomalerts/managecustomalerts.controller.js
index aef933e..7ad2012 100644
--- a/angularjs/managecustomalerts/managecustomalerts.controller.js
+++ b/angularjs/managecustomalerts/managecustomalerts.controller.js
@@ -81,7 +81,7 @@
self.alert.report = reportApiMethod;
}
- options.push({key: reportApiMethod, value: reportMetadata.name});
+ options.push({key: reportApiMethod, value: reportMetadata.name, group: reportMetadata.category});
if (reportApiMethod == self.alert.report) {
updateMetrics(reportMetadata.metrics);
@@ -272,4 +272,4 @@
});
}, 1000);
}
-})();
\ No newline at end of file
+})();
diff --git a/templates/form.twig b/templates/form.twig
index 66665d8..b5c0092 100755
--- a/templates/form.twig
+++ b/templates/form.twig
@@ -70,10 +70,10 @@
</div>
{% endif %}
- <div piwik-field uicontrol="select" name="report"
+ <div piwik-field uicontrol="expandable-select" name="report"
ng-model="manageAlerts.alert.report"
ng-change="manageAlerts.changeReport()"
- title="{{ 'CustomAlerts_ThisAppliesTo'|translate|e('html_attr') }}"
+ title="{{ 'CustomAlerts_ThisAppliesTo'|translate|e('html_attr') }}: {{ '{{ manageAlerts.actualReportMetadata.name }}' }}"
introduction="{{ 'CustomAlerts_AlertCondition'|translate|e('html_attr') }}"
options="manageAlerts.reportOptions"
{% if reportMetadata and alert %}value="{{ alert.report|e('html_attr') }}"{% endif %}>
@@ -162,4 +162,4 @@
</div>
</div>
-</div>
\ No newline at end of file
+</div>