[Q&A] Как скрыть неактивные кнопки из ленты в SharePoint?

disabled

Q: На одном проекте заказчик захотел скрывать неактивные кнопки из ленты. Они могут быть неактивны когда на это не хватает прав, например, кнопки добавления элементов неактивны, если у вас права только для чтения

A: К скрытым кнопкам в ленте добавляется CSS класс .ms-cui-disabled. Откройте активную master page в режиме редактирования, и перед закрывающим </head> добавьте следующий код

<style type="text/css">
   .ms-cui-disabled {display:none !important;}
</style>

Сохраните и опубликуйте master page. После этого кнопки станут скрыты, но это будет выглядеть не очень красиво

hidden

Чтобы скрывать пустые места, нужно создать 2 файла

#RibbonContainer .ms-cui-group-hidden, #RibbonContainer .ms-cui-disabled
{
	display: none !important;
}

и

function InitRibbonDisabledItemsRemover(){
	var RIBBON_CONTROL_CLASS = "[class*='ms-cui-ctl']";
	var RIBBON_BUTTON_DISABLED_CLASS = "ms-cui-disabled";
	var RIBBON_BUTTON_SELECTOR = ".ms-cui-section > span > " + RIBBON_CONTROL_CLASS;
	var RIBBON_BUTTON_SELECTOR_DISABLED = RIBBON_BUTTON_SELECTOR + "." + RIBBON_BUTTON_DISABLED_CLASS;
	var RIBBON_GROUP_CLASS = "ms-cui-group";
	var RIBBON_GROUP_HIDDEN_CLASS = "ms-cui-group-hidden";

	var ribbonGroupsParserTimeout = null;

	DomHelper = {
		HasClass: function(el, className){
			if (el.classList){ return el.classList.contains(className); }
			return (new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className));
		},
		AddClass: function(el, className){
			if (el.classList){ el.classList.add(className); }
			else{ el.className += ' ' + className; }
		}
	};

	function HideDisabledRibbonItems(){
		var ribbonGroups = document.querySelectorAll("." + RIBBON_GROUP_CLASS);
		for(var i = 0; i<ribbonGroups.length; i++){
			var currGroup = ribbonGroups[i];
			var allGroupButtons = currGroup.querySelectorAll(RIBBON_BUTTON_SELECTOR);
			var disabledGroupButtons = currGroup.querySelectorAll(RIBBON_BUTTON_SELECTOR_DISABLED);

			// Если все кнопки в группе скрыты
			if( allGroupButtons.length == disabledGroupButtons.length ){
				// Тогда скрываем всю группу
				DomHelper.AddClass(currGroup, RIBBON_GROUP_HIDDEN_CLASS);
			}
		}
	}

	var elRibbonContainer = document.getElementById('RibbonContainer');

	// Отслеживаем изменения в DOM для Ribbon Container
	elRibbonContainer.addEventListener('DOMSubtreeModified', function(e){
		var insertedElement = e.target;
		
		// Если элемент в DOM - неактивная кнопка
		if( DomHelper.HasClass(insertedElement, RIBBON_BUTTON_DISABLED_CLASS) ){
			// Тогда скрываем эту кнопку
			if( ribbonGroupsParserTimeout != null ){
				clearTimeout(ribbonGroupsParserTimeout);
			}
			ribbonGroupsParserTimeout = setTimeout(HideDisabledRibbonItems, 100);
		}
	});
}

document.addEventListener('DOMContentLoaded', InitRibbonDisabledItemsRemover);

Далее их нужно разместить в Style Library, и добавить ссылки в master page. Не забудьте сохранить и опубликовать master page.

После этого пустых мест на ленте не будет. Данный подход можно использовать для SharePoint 2010/2013 и SharePoint Online.

Advertisements

[Q&A] Как скрыть неактивные кнопки из ленты в SharePoint?: 2 комментария

    • Проблемы могут быть разве что в восприятии пользователей, когда они привыкли видеть кнопки на определенных местах. В случае скрытия они немного сдвинутся и неактивные будут скрыты.

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s