$(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
0

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

Feb 10, 2017 at 12:42 AM

77

avatar image
Former Member

Hello,

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");
		that.theTokenInput.setTokens(that.bTokens);	
		oMasterValueHelpDialog.close();
				},
		cancel: function(oEvent) {
			oMasterValueHelpDialog.close();
			oMasterValueHelpDialog.destroy();
			},
			afterClose: function() {
			oMasterValueHelpDialog.destroy();
				}
			});
		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);
	oBinding.filter(allFilters);
						} else {
			oBinding.filter(allFilters);
			sap.m.MessageToast.show("No input to filter");
						}


					}
				}));
			}

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


	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) {
					singleRowModel.setData(oData);
					},
					function(oError) {
				MessageToast.show("Read Filter failed");
					}
				);


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


		if (oMasterValueHelpDialog.getTable().bindRows) {
		oMasterValueHelpDialog.getTable().bindRows("/results");
				}

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());
				oMasterValueHelpDialog.setBusy(false);

				this._dialog.close();
			
				oMasterValueHelpDialog.open();
				oMasterValueHelpDialog.update();
			});
			_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">
		<f:content>
		<VBox>
		<HBox>
<Label text="{i18n>Title}" design="Bold" class="sapUiTinyMarginEnd"/>
	<Text text="{Title}" class="sapUiSmallMarginEnd"/>
	<Text text="{TitleDescription}" class="sapUiLargeMarginEnd"/>
		</HBox>
 	<HBox>
	<Label text="{i18n>Lib}" design="Bold" class="sapUiTinyMarginEnd"/>
<Text text="{LibraryPrefixDescription}" class="sapUiSmallMarginEnd"/>
		</HBox>
		</VBox>
 	<HBox direction="RowReverse">
	<Text text="{BrandManagerName}"/>
<Label text="{i18n>BrandMngr}" design="Bold" class="sapUiTinyMarginEnd"/>
		</HBox>
	</f:content>
</f:SimpleForm>

	<l:Grid width="auto" class="ResponsiveGridLayout">
	<l:content>
	<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"/>

				</l:content>
			</l:Grid>
		</WizardStep>
	</Wizard>
</core:FragmentDefinition>
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

0 Answers