$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: false, vro: false, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content

Value Help Dialog Header's Description & Item's Value Misaligned

Feb 10, 2017 at 12:42 AM


avatar image


I'm trying to implement Value Help Dialog.

When I'm trying to run it. It gives misaligned header & Item.

See below Code for your ref.

  • controller.js
onInit: function() {
	this.bKeys = ["RightsTypeId", "RightsTypeDesc"];

onValueHelpRequest:function(oEvent) { 
		this.theTokenInput = this.getView().byId("MI1");
			var that = this;	
			var _timeout;

var oMasterValueHelpDialog = new sap.ui.comp.valuehelpdialog.ValueHelpDialog("valueF4Master", {

				title: "XXXXXX",
				supportMultiselect: false,
				supportRanges: false,
				supportRangesOnly: false,
				key: this.bKeys[0],
				descriptionKey: this.bKeys[1],
				stretch: sap.ui.Device.system.phone, 
				ok: function(oEvent) {
		that.bTokens = oEvent.getParameter("tokens");
		cancel: function(oEvent) {
			afterClose: function() {
		var oFilterBar = new sap.ui.comp.filterbar.FilterBar({
				advancedMode: false,
				filterBarExpanded: false,
				showGoOnFB: false

		if (oFilterBar.setBasicSearch) {
		oFilterBar.setBasicSearch(new sap.m.SearchField({
				placeholder: "Search and hit Enter",
				search: function(event) {
				var sQuery = event.getParameter("query");
	var oBinding = oMasterValueHelpDialog.getTable().getBinding("rows");
			var allFilters;
			if (sQuery) {
var oFilter1 = [new Filter("RightsTypeId", FilterOperator.Contains, sQuery),
new Filter("RightsTypeDesc", FilterOperator.Contains, sQuery)
	allFilters = new sap.ui.model.Filter(oFilter1, false);
						} else {
			sap.m.MessageToast.show("No input to filter");


			// open dialog
jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._dialog);
			// simulate end of operation
	_timeout = jQuery.sap.delayedCall(30, this, function() {

	var url = "/sap/opu/odata/sap/ZXXXXXXX_SRV/";
	var oModelDetail = new sap.ui.model.odata.ODataModel(url, true);
	var singleRowModel = new sap.ui.model.json.JSONModel();

	oModelDetail.read("/RightsTypesSet", null, null, false,
		function(oData, oResponse) {
					function(oError) {
				MessageToast.show("Read Filter failed");

		var oColModel = new sap.ui.model.json.JSONModel();
					cols: [
			{label: "Id", template: "Id"}, 
			{label: "Description", template: "Desc"}
	oMasterValueHelpDialog.getTable().setModel(oColModel, "columns");
	this.singleRowModel = singleRowModel;

		if (oMasterValueHelpDialog.getTable().bindRows) {

if (oMasterValueHelpDialog.getTable().bindItems) {
		var oTable = oMasterValueHelpDialog.getTable();
	oTable.bindAggregation("items", "/", function(sId, oContext) {
		var aCols = oTable.getModel("columns").getData().cols;
	return new sap.m.ColumnListItem({
			cells: aCols.map(function(column) {
			var colname = column.template;
 		return new sap.m.Label({
				text: "{" + colname + "}"
	// oValueLibHelpDialog.setTokens(that.theTokenInput.getTokens());

			_timeout = "";			
  1. View.xml
<core:FragmentDefinition height="100%" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core" xmlns="sap.m">
	<Wizard id="CreateProductWizard" complete="wizardCompletedHandler">
	<WizardStep id="ProductTypeStep" title="Step 1" validated="true">		<f:SimpleForm maxContainerCols="2" layout="ResponsiveGridLayout" labelSpanL="5" labelSpanM="8" emptySpanL="0" emptySpanM="0" columnsL="2" columnsM="2">
<Label text="{i18n>Title}" design="Bold" class="sapUiTinyMarginEnd"/>
	<Text text="{Title}" class="sapUiSmallMarginEnd"/>
	<Text text="{TitleDescription}" class="sapUiLargeMarginEnd"/>
	<Label text="{i18n>Lib}" design="Bold" class="sapUiTinyMarginEnd"/>
<Text text="{LibraryPrefixDescription}" class="sapUiSmallMarginEnd"/>
 	<HBox direction="RowReverse">
	<Text text="{BrandManagerName}"/>
<Label text="{i18n>BrandMngr}" design="Bold" class="sapUiTinyMarginEnd"/>

	<l:Grid width="auto" class="ResponsiveGridLayout">
	<Label text="{i18n>MRT}" labelFor="MI1"/>
<MultiInput id="MI1" enableMultiLineMode="true" showValueHelp="true" valueHelpRequest="onMasterValueHelpRequest"/>
		<Label text="{i18n>RelType}" labelFor="MI2"/>
 <MultiInput id="MI2" enableMultiLineMode="true" showValueHelp="true" valueHelpRequest="onLibValueHelpRequest"/>

<Label text="{i18n>RelCompany}" labelFor="MI3"/>
<MultiInput id="MI3" enableMultiLineMode="true" showValueHelp="true" valueHelpRequest="onBrandValueHelpRequest"/>

<Label text="{i18n>Terr}" labelFor="MI4"/>
<MultiInput id="MI4" enableMultiLineMode="true" showValueHelp="true" valueHelpRequest="onBrandValueHelpRequest"/>

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

0 Answers