Remove the Discount % from the Review Order screen in the Self Service Portal

You should be able to replace the qp-data-feed and replace it with your own. But, I’d be curious to see if hiding the field in the .ts file would work better.

Add an extension folder for the SP504004 file (usual Modern UI customization).

Something like:

SP504004_XXClientMod.ts

import { SOLine } from “../../view-models”;  //check this path for correctness

export interface SP504004_XXClientMod extends SP504004 {}
export class SP504004_XXClientMod {}

export interface SOLine_XXClientMod extends SOLine {}
export class SOLine_XXClientMod {
  DiscPct: PXFieldState<PXFieldOptions.Hidden>;
}

@Joe Schmucker your read is right. The column isn't bound to a field. The header is a plain div that prints msg.Discount, and the cell prints a discount getter on the SOLine class in SP504004's view-models.ts, which reads SOLine__DiscPct and falls back to 0.

That's why hiding a field in TypeScript won't take it off (the field in that view is SOLine__DiscPct, not DiscPct). Django's first suggestion, replacing the markup, is the route.

The catch is that the data feed isn't in SP504004.html. The screen only has <compose class="sp-full-width" view-model="../sp-ordered-items">, and the build merges your HTML extension into the screen's own HTML without pulling composed templates in. A selector aimed at dfOrderedItems throws a build error: "screen HTML doesn't contain any elements that satisfies such querySelector".

The compose line is what you can reach. Remove it in your SP504004 extension and add your own copy of the ordered-items markup after the Fifth fieldset, minus the two discount divs. Your copy binds to SP504004's msg (its Labels class), which has no UnitOfMeasure, so give that header its own text.

The same template is composed on the Order screen (SP504000), so Discount still shows there unless you do the same on that screen.

Yup...I tried to hide it in the .ts extension about 12 different ways.

As you can see here, I tried just about everything that can be tried!  😑 I agree that hiding the field like this is pointless as the field isn’t actually a “field” in the html.

import {
	PXFieldState,
	readOnly,
	isVisible,
	PXFieldOptions,
	PXView,
	columnConfig,
	GridCell
} from "client-controls";
import { SP504004 } from "src/screens/SP/SP504004/SP504004";
import { SPOrderedItems } from "src/screens/SP/sp-ordered-items";
import { SOLine } from "src/screens/SP/SP504004/view-models";

export interface SP504004_ICS extends SP504004 { }
export class SP504004_ICS { }

export interface SP504004_SPOLine extends SOLine { }

//export class SP504004_SPOLine {
//	@columnConfig({ visible: false })
//	SOLine__DiscPct: PXFieldState<PXFieldOptions.Hidden>;

//	@columnConfig({ visible: false })
//	DiscPct: PXFieldState<PXFieldOptions.Hidden>;
//}

//tried it this way too.
export class SP504004_SPOLine extends PXView {
	@columnConfig({ visible: false })
	SOLine__DiscPct: PXFieldState<PXFieldOptions.Hidden>;

	@columnConfig({ visible: false })
	DiscPct: PXFieldState<PXFieldOptions.Hidden>;
}


export interface SP504004_SPOrderedItems extends SPOrderedItems { }
//tried it this way too.
export class SP504004_SPOrderedItems {
//export class SP504004_SPOrderedItems extends PXView {
	@columnConfig({ visible: false })
	SOLine__DiscPct: PXFieldState<PXFieldOptions.Hidden>;

	@columnConfig({ visible: false })
	DiscPct: PXFieldState<PXFieldOptions.Hidden>;
}

I tried to hide this section in my html extension but I could not resolve my reference.  You will see I successfully removed two discount fields from the “main” stuff.  But I couldn’t figure out how to remove this from the sp-ordered-items html.  I think this is what I want to replace.

		<qp-data-feed id="dfOrderedItems" class="no-toolbar sp-data-feed sp-filled-section"
			view="OrderedItems" auto-resize="true">
			<template width="100%">
				<qp-fieldset id="fsShipment" view.bind="OrderedItems" class="sp-data-feed-fieldset no-animation">
					<field name="fieldImage" unbound replace-content class="sp-items-col-image sp-data-feed-field">
						<div class="sp-image">
							<div if.bind="OrderedItems.Data.value !== ''" class="sp-image-blob"
								style="background-image: url(data:image/png;base64,${OrderedItems.Data.value})">
							</div>
							<div if.bind="OrderedItems.Data.value === ''" class="sp-image-empty small">
								<qp-hyper-icon images.bind="{ normal: 'svg:sp@photo' }"></qp-hyper-icon>
							</div>
						</div>
					</field>

					<field name="fieldDescr" unbound replace-content class="sp-items-col-desc sp-data-feed-field">
						<div class="col-sm-12 col-md-12 col-lg-6">
							${OrderedItems.description}
						</div>
						<div class="col-lg-2 sp-items-price">${OrderedItems.unitPrice}</div>
						<div class="col-lg-2 sp-items-uom"><span>/</span>${OrderedItems.unit.toLowerCase()}</div>
						<div class="col-sm-12 col-md-12 col-lg-2 sp-items-qty">
							<span>${msg.Qty}:</span>${OrderedItems.quantity}
						</div>
					</field>

					<field name="fieldTotal" unbound replace-content
						class="col-3 sp-data-feed-field sp-items-totals-col">
						<div
							class="col-lg-6 sp-items-discount ${OrderedItems.discount > 0 ? '' : 'sp-pane-view-invisible'}">
							<span>${msg.Discount}: </span>${OrderedItems.discount}%
						</div>
						<div
							class="col-lg-6 sp-items-extprice sp-grid-view-hidden ${OrderedItems.discount > 0 ? '' : 'sp-pane-view-invisible'}">
							${OrderedItems.extPrice}
						</div>
						<div class="col-lg-6 sp-items-total">${OrderedItems.totalPrice}</div>
					</field>
				</qp-fieldset>
			</template>
		</qp-data-feed>

 This is my html extension which works to remove the main discount fields from the screen.

<template>
    <field remove="#first field[name='CuryDiscTot_Text']"></field>
    <field remove="#first-expanded field[name='CuryDiscTot_Text']"></field>
</template>

I tried using these options (in different tests) just to try to remove SOMETHING but they caused compiler errors. 

    <field remove="#dfOrderedItems"></field>
    <field remove="#dfOrderedItems_fsShipment"></field>
    <field remove="#dfOrderedItems_fsShipment_fieldTotal"></field>

<qp-data-feed remove="#dfOrderedItems"></qp-data-feed>

Since I am not removing something from the “main” html, I don’t know how to reference a “sub-file”.  

I still am not good at knowing how to reference objects that I want to modify.  Maybe I am close?

I found this topic from Daryl

I tried renaming my extension to SP504004_XXX.html, then retried the various options in my extension but I get the same error that the element wasn’t found.  Just thought maybe this might point out something I might be doing wrong.