Изменение стиля названия группы ObjectList с включенной группировкой

Когда я использую группировку в списке объектов, стиль заголовка группы вызывает любопытство меньше по росту, чем кажется важным для важной части информации.Изменение стиля названия группы ObjectList с включенной группировкой

Как я могу переименовать названия групп, чтобы лучше отражать их важность в информационной иерархии?

Например, в фрагменте ниже «Кодирование 101» и «Бой 101» оба они не так видны, как могли бы быть.

Я занимаюсь исследованиями в Интернете, но не нашел ничего конкретного в этой теме и в том, что дизайнеры дисплея UI5 в целом заставляют меня думать, что это удовлетворено, не обращаясь к написанию CSS.

// JSON sample data 
 
var data = { 
 
"peeps": [ 
 
    {className: "Coding 101", firstName: "Alan", lastName: "Turing"}, 
 
    {className: "Coding 101", firstName: "Ada", lastName: "Lovelace"}, 
 
    {className: "Combat 101", firstName: "D", lastName: "Trump"}, 
 
    {className: "Combat 101", firstName: "Spartacus", lastName: ""}, 
 
    {className: "Combat 101", firstName: "Tasmanian", lastName: "Devil"} 
 

 
    ] 
 
}; 
 

 

 

 
sap.ui.getCore().attachInit(function() { 
 
    "use strict"; 
 
    sap.ui.controller("MyController", { 
 
    onInit: function() { 
 

 
    // create JSON model instance 
 
    var oModel = new sap.ui.model.json.JSONModel(); 
 

 
    // set the data for the model 
 
    oModel.setData(data); 
 
     
 
    var oList = this.getView().byId("SubsList") 
 

 
    // bind the model to the list 
 
    oList.setModel(oModel); 
 
    
 
    } 
 
     
 
    }); 
 
    sap.ui.xmlview({ 
 
    viewContent: jQuery("#myView").html() 
 
    }).placeAt("content"); 
 

 

 
});

<!DOCTYPE html> 
 
<title>SAPUI5</title> 
 
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script> 
 

 
<script id="myView" type="ui5/xmlview"> 
 
    <mvc:View controllerName="MyController" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" 
 
    xmlns:layout="sap.ui.commons.layout" xmlns:f="sap.ui.layout.form"> 
 

 
    <layout:MatrixLayout> 
 
    \t <layout:rows> 
 
     \t <layout:MatrixLayoutRow> 
 
     \t <layout:MatrixLayoutCell backgroundDesign="Fill1" padding="None"> 
 

 
         <List 
 
           title="Los Optionales" 
 
           id="SubsList" 
 
           width="auto" 
 
           items="{ 
 
           path: '/peeps', 
 
           sorter: { 
 
            path: 'className', 
 
            group: true 
 
           }}" 
 
           class="sapUiResponsiveMargin" 
 
          > 
 
          <items> 
 
           <StandardListItem 
 
             title="{firstName} {lastName}" 
 
             type="Active" 
 
           /> 
 
          </items> 
 
          <layoutData> 
 
           <FlexItemData growFactor="1" /> 
 
          </layoutData> 
 
         </List> 
 

 

 
     \t </layout:MatrixLayoutCell> 
 
     </layout:MatrixLayoutRow> 
 
     </layout:rows> 
 
    </layout:MatrixLayout> 
 
    
 
        
 

 
    </mvc:View> 
 
</script> 
 

 
<body class="sapUiBody"> 
 
    <div id="content"></div> 
 
</body>

источник

2017-01-25 Vanquished Wombat

Вы можете использовать функции фабричных для заголовков группы и добавить класс стиля поставляемый с UI5. Я должен признать, что поиск подходящего класса CSS может быть проблемой. Пример: here.

По вашему мнению вы просто добавить атрибут groupHeaderFactory в настройки агрегирования пунктов:

<List 
    items="{ 
     path : '/peeps', 
     sorter : { 
      path: 'className', 
      group: true 
     }, 
     groupHeaderFactory : '.createGroupHeader' 
    }">

В контроллере вы добавляете соответствующий метод:

createGroupHeader : function(group) { 
    return new GroupHeaderListItem({ 
     "title" : group.key      
    }).addStyleClass("sapMH1Style"); 
}

Here вы найдете все параметры для агрегирования связывания , включая groupHeaderFactory. Объясняется использование заводских функций в целом here. Приложение Explored также содержит example.

источник

2017-01-25 12:32:37 matbtt

Спасибо Matbtt - отлично работает. Могу ли я спросить - знаете ли вы, где в документах объясняется эта техника? –

Добро пожаловать. Я добавил несколько ссылок. – matbtt

Отлично. Я знал о заводских функциях, но не посещал страницу ManagedObjectModule в средстве просмотра API, поэтому не знал об атрибуте 'oBindingInfo.groupHeaderFactory'. Я думаю, что изучу эту страницу API. –

Изменение стиля названия группы ObjectList с включенной группировкой

ответ

Смежные вопросы