Mrthdrb

I want to override the sizes.js in location:

/vendor/magento/module-ui/view/base/web/js/grid/paging/sizes.js

I want to remove "Custom" and "200" options from admin grid per page dropdown.

Try following solution.

[Vendor]/[Module/view/base/requirejs-config.js

var config = 
 map: 
 '*': 
 'Magento_Ui/js/grid/paging/sizes':'[Vendor]_[Module]/js/grid/paging/sizes'
 
 
;

[Vendor]/[Module/view/base/web/js/grid/paging/sizes.js

 /**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

 /**
 * @api
 */
 define([
 'ko',
 'underscore',
 'mageUtils',
 'uiElement'
 ], function (ko, _, utils, Element) 
 'use strict';

 return Element.extend(
 defaults: 
 template: '[Vendor]_[Module]/grid/paging/sizes',
 value: 20,
 minSize: 1,
 maxSize: 999,
 options: 
 '20': 
 value: 20,
 label: 20
 ,
 '30': 
 value: 30,
 label: 30
 ,
 '50': 
 value: 50,
 label: 50
 ,
 '100': 
 value: 100,
 label: 100
 ,
 '200': 
 value: 200,
 label: 200
 
 ,
 statefull: 
 options: true,
 value: true
 ,
 listens: 
 value: 'onValueChange',
 options: 'onSizesChange'
 
 ,

 /**
 * Initializes sizes component.
 *
 * @returns Sizes Chainable.
 */
 initialize: function () 
 this._super()
 .updateArray();

 this.removeSize(200)
 .discardCustom();

 return this;
 ,

 /**
 * Initializes observable properties.
 *
 * @returns Sizes Chainable.
 */
 initObservable: function () 
 this._super()
 .track([
 'value',
 'editing',
 'customVisible',
 'customValue'
 ])
 .track(
 optionsArray: []
 );

 this._value = ko.pureComputed(
 read: ko.getObservable(this, 'value'),

 /**
 * Validates input field prior to updating 'value' property.
 */
 write: function (value) 
 value = this.normalize(value);

 this.value = value;
 this._value.notifySubscribers(value);
 ,

 owner: this
 );

 return this;
 ,

 /**
 * Starts editing of the specified size.
 *
 * @param Number value - Value of the size.
 * @returns Sizes Chainable.
 */
 edit: function (value) 
 this.editing = value;

 return this;
 ,

 /**
 * Discards changes made to the currently editable size.
 *
 * @returns Sizes Chainable.
 */
 discardEditing: function () 
 var value = this.editing;

 if (value) 
 this.updateSize(value, value);
 

 return this;
 ,

 /**
 * Invokes 'discardEditing' and 'discardCustom' actions.
 *
 * @returns Sizes Chainable.
 */
 discardAll: function () 
 this.discardEditing()
 .discardCustom();

 return this;
 ,

 /**
 * Returns value of the first size.
 *
 * @returns Number
 */
 getFirst: function () 
 return this.optionsArray[0].value;
 ,

 /**
 * Returns size which matches specified value.
 *
 * @param Number value - Value of the item.
 * @returns Undefined
 */
 getSize: function (value) 
 return this.options[value];
 ,

 /**
 * Sets current size to the specified value.
 *
 * @param Number value - Value of the size.
 * @returns Sizes Chainable.
 */
 setSize: function (value) 
 this.value = value;

 return this;
 ,

 /**
 * Adds a new value to sizes list.
 *
 * @param Number value - Value to be added.
 * @returns Sizes Chainable.
 */
 addSize: function (value) 
 var size;

 if (!this.hasSize(value)) 
 size = this.createSize(value);

 this.set('options.' + value, size);
 

 return this;
 ,

 /**
 * Removes provided value from the sizes list.
 *
 * @param Number value - Value to be removed.
 * @returns Sizes Chainable.
 */
 removeSize: function (value) 
 if (!this.hasSize(value)) 
 return this;
 

 this.remove('options.' + value);

 if (this.isSelected(value)) 
 this.setSize(this.getFirst());
 

 return this;
 ,

 /**
 * Updates existing value to the provided one. If new value
 * is not specified, then sizes' '_value' property will be taken.
 *
 * @param Number value - Existing value that should be updated.
 * @param (Number [newValue=size._value] - New size value.
 * @returns Sizes Chainable.
 */
 updateSize: function (value, newValue) ,

 /**
 * Creates new editable size instance with the provided value.
 *
 * @param Number value - Value of the size.
 * @returns Object
 */
 createSize: function (value) 
 return 
 value: value,
 label: value,
 _value: value,
 editable: true
 ;
 ,

 /**
 * Checks if provided value exists in the sizes list.
 *
 * @param Number value - Value to be checked.
 * @returns Boolean
 */
 hasSize: function (value) 
 return !!this.getSize(value);
 ,

 /**
 * Hides and clears custom field.
 *
 * @returns Sizes Chainable.
 */
 discardCustom: function () 
 this.hideCustom()
 .clearCustom();

 return this;
 ,

 /**
 * Shows custom field.
 *
 * @returns Sizes Chainable.
 */
 showCustom: function () 
 this.customVisible = true;

 return this;
 ,

 /**
 * Hides custom field.
 *
 * @returns Sizes Chainable.
 */
 hideCustom: function () 
 this.customVisible = false;

 return this;
 ,

 /**
 * Empties value of the custom field.
 *
 * @returns Sizes Chainable.
 */
 clearCustom: function () 
 this.customValue = '';

 return this;
 ,

 /**
 * Adds a new size specified in the custom field.
 *
 * @returns Sizes Chainable.
 */
 applyCustom: function () 
 var value = this.customValue;

 value = this.normalize(value);

 this.addSize(value)
 .setSize(value)
 .discardCustom();

 return this;
 ,

 /**
 * Checks if custom field is visible.
 *
 * @returns Boolean
 */
 isCustomVisible: function () 
 return this.customVisible;
 ,

 /**
 * Converts provided value to a number and puts
 * it in range between 'minSize' and 'maxSize' properties.
 *
 * @param (Number value - Value to be normalized.
 * @returns Number
 */
 normalize: function (value) 
 value = +value;

 if (isNaN(value)) 
 return this.getFirst();
 

 return utils.inRange(Math.round(value), this.minSize, this.maxSize);
 ,

 /**
 * Updates the array of options.
 *
 * @returns Sizes Chainable.
 */
 updateArray: function () 
 var array = _.values(this.options);

 this.optionsArray = _.sortBy(array, 'value');

 return this;
 ,

 /**
 * Checks if provided value is in editing state.
 *
 * @param Number value - Value to be checked.
 * @returns Boolean
 */
 isEditing: function (value) 
 return this.editing === value;
 ,

 /**
 * Checks if provided value is selected.
 *
 * @param Number value - Value to be checked.
 * @returns Boolean
 */
 isSelected: function (value) 
 return this.value === value;
 ,

 /**
 * Listener of the 'value' property changes.
 */
 onValueChange: function () 
 this.discardAll()
 .trigger('close');
 ,

 /**
 * Listener of the 'options' object changes.
 */
 onSizesChange: function () 
 this.editing = false;

 this.updateArray();
 
 );
 );

Here only 2 changes are there. template parameter and initialize function. Replace your module name in template parameter.

[Vendor]/[Module]/view/base/web/template/grid/paging/sizes.html

<div class="selectmenu" collapsible="">
 <div class="selectmenu-value" openCollapsible="">
 <input type="text" ko-value="_value" attr="id: index" autoselect/>
 </div>
 <button class="selectmenu-toggle" type="button" css="_active: $collapsible.opened" toggleCollapsible>
 <span translate="'Select'"/>
 </button>
 <div class="selectmenu-items" css="_active: $collapsible.opened" outerClick="discardAll.bind($data)">
 <ul>
 <li repeat="foreach: optionsArray, item: '$size'" css="_edit: isEditing($size().value)">
 <div class="selectmenu-item-edit" if="$size().editable" keyboard="13: updateSize.bind($data, $size().value, false)">
 <input class="admin__control-text" type="text"
 ko-value="$size()._value" hasFocus="isEditing($size().value)"/>
 <button class="action-save" type="button" click="updateSize.bind($data, $size().value, false)">
 <span translate="'Save'"/>
 </button>
 <button class="action-delete" type="button" click="removeSize.bind($data, $size().value, false)">
 <span translate="'Delete'"/>
 </button>
 </div>
 <div class="selectmenu-item">
 <button class="selectmenu-item-action" type="button" text="$size().label" click="setSize.bind($data, $size().value)"/>
 <button class="action-edit" type="button" if="$size().editable"
 data-bind="
 click: function () 
 discardCustom().edit($size().value);
 ">
 <span translate="'Edit'"/>
 </button>
 </div>
 </li>

 <li css="_edit: isCustomVisible()" data-bind="visible: isCustomVisible()">
 <div class="selectmenu-item">
 <button class="selectmenu-item-action" type="button"
 translate="'Custom'"
 ko-visible="!isCustomVisible()"
 data-bind="
 click: function () 
 $data.showCustom()
 .discardEditing();
 "/>
 </div>
 <div class="selectmenu-item-edit" keyboard="13: applyCustom">
 <input class="admin__control-text" type="text" ko-value="customValue" hasFocus="isCustomVisible()"/>
 <button class="action-save" type="button" click="applyCustom">
 <span translate="'Save'"/>
 </button>
 </div>
 </li>
 </ul>
 </div>
</div>
<label class="admin__control-support-text" translate="'per page'" attr="for: index"/>

Here i have added data-bind in second li.

After making the changes, execute folllogin commands.

rm -rf var/view_preprocessed/*
rm -rf pub/static/adminhtml/*
php bin/magento setup:static-content:deploy -f

truncate ui_bookmarks table in mysql

It should work.

In your custom module [Namespace]/[Module]/view/frontend/requirejs-config.js add this

var config = 
map: 
 '*': 
 'Magento_Ui/Magento_Ui/js/view/messages.js':'[Namespace]_[Module]/js/view/messages.js'
 
;

your overridden js file should be here

[Namespace]_[Module]/view/frontend/web/js/view/messages.js

php bin/magento setup:upgrade && php bin/magento setup:static-content:deploy -f

read more here: Extending / Overriding JS in Magento 2