Develop Reference

Add different controls in different rows in UI5 table

I have table sap.ui.table.Table ans I have a model in which some records have links and some doesn't. I want to render the link in the sap.m.Link component in the column and when the link is not available in the record, it should render "Link is not provided." in the sap.m.Text in the column.
As the sap.ui.table.Column has the template aggregation which does not support binding aggregation as it is only 0 or 1 controls supported. And the formatter is also applicable here. Is there any way that the content of the column can be changed runtime according to the module data?
My module data is :
var data = [{
id : 1,
link : 'abc.com'
},
{
id : 2
},
{
id : 3,
link : 'pqr.com'
}]
I am providing the code:
var link = new sap.m.Link({text : "{link}"});
var noLink = new sap.m.Text({text : "Link is not provided."});
var idColumn = new sap.ui.table.Column({
label : [new sap.m.Label({text : "ID"})],
template : [new sap.m.Text({text : "{id}"})]
});
var linkColumn = new sap.ui.table.Column({
label : [new sap.m.Label({text : "Link"})],
template : [??????]
});
var table = new sap.ui.table.Table({
columns : [idColumn, linkColumn]
});
var model = new sap.ui.model.json.JSONModel();
model.setData({items : data});
table.setModel(model);
table.bindRows("/items");
I want to add the link and noLink in the column likColumn runtime according to the data in the module. How can I achieve this?

The display content of each column can be changed using formatter
e.g:
new sap.m.Link({
width: "20em",
//editable: false,
//text: "{items>link}"
text: {
path: "items>link",
formatter: function(link){
if (link === undefined) return "Link is not provided"
return link;
}
}
});
...
oTable.addEventDelegate({
onAfterRendering: function(){
$('#idTable a:contains("Link is not provided")').removeClass("sapMLnk");
}
}, oTable);
UPDATE: This is a jsbin with the full example of what you need:
UPDATED example

Problem with variable scope in nested Backbone views

I have a parent view which contains a Backgrid view. In the parent view's initialize section I define a variable isWellSelected. The variable is toggled in the Backgrid column logic when a tickbox is checked. I am able to watch the variable toggled when a box is ticked and unticked.
However, once an event fires the variable is no longer in scope for the event to see. I suspect I may need to pass the variable to the Backrgrid view but I am unsure how to do that correctly. Please advise.
app.wellCollectionView = Backbone.View.extend({
template: _.template($('#wellTemplate').html()),
initialize: function() {
this.isWellSelected = false;
// isWellSelected toggled to true when a tickbox is checked in the columns block.
var columns = [...];
// instantiate collection
var wellCollection = new app.wellCollection;
// Set up a grid view to use the pageable collection
var wellGrid = new Backgrid.Grid({
columns: columns,
collection: wellCollection
});
// Initialize the paginator
var paginator = new Backgrid.Extension.Paginator({
collection: wellCollection
});
// Render the template
this.$el.html(this.template());
// Render the grid
this.$el.append(wellGrid.render().el);
this.$el.append(paginator.render().$el);
wellCollection.fetch({reset: true}).then(function () {...});
},
events: {
'click #EvaluateWell': function(){
this.evalWell(event, this.isWellSelected);
console.log("In events - isWellSelected: " + this.isWellSelected);}
},
// More stuff
}
Constructive feedback welcome.
Thanks!
Adding a snippet for "columns" as per JT's request:
var columns = [
{
name: '',
label: 'Select',
cell: Backgrid.BooleanCell.extend({
events : {
'change': function(ev){
var $checkbox = $(ev.target);
var $checkboxes = $('.backgrid input[type=checkbox]');
if($checkbox.is(':checked')) {
$checkboxes.attr("disabled", true);
this.isWellSelected = true;
// Disable all checkboxes but this one
$checkbox.removeAttr("disabled");
} else {
// Enable all checkboxes again
$checkboxes.removeAttr("disabled");
this.isWellSelected = false;
}
}
}
})
}, {
name: "api",
label: "API",
editable: false, // Display only!
cell: "string"
}, {
name: "company",
label: "Operator",
editable: false, // Display only!
cell: "string"
}];

No data is displayed with ExtJS and C#

I have a problem with ExtJS and c# does not show me any data only header, I just want to show the records of my sql table, but I could not, my backend works fine and if it returns the records of my BD, the problem is that it does not they are binding, reason why I believe that my JS file is bad and did not find the error so that the registers are shown.
data that return GetCustomer method
app.js:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.util.*'
]);
Ext.application({
name: 'Fiddle',
launch: function () {
var myStore = new Ext.data.JsonStore({
// Load data at once
autoLoad: true,
// Override default http proxy settings
proxy: new Ext.data.HttpProxy({
pageParam: false, //to remove param "page"
startParam: false, //to remove param "start"
limitParam: false, //to remove param "limit"
noCache: false, //to remove param "_dc"
// Call web service method using GET syntax
url: 'GetCustomers',
// Ask for Json response
headers: {
'Content-type': 'application/json'
}
}),
// Root variable
root: 'data',
// Record identifier
id: 'EmpleadoId',
//reader:Jreader,
// Fields declaration
fields: ['EmpleadoId', 'NombreEmpleado', 'DirectorId'],
});
var grid = new Ext.grid.GridPanel({
// Set store
store: myStore,
// Columns definition
columns: [{
dataIndex: 'EmpleadoId',
header: 'Empleado Id'
}, {
dataIndex: 'NombreEmpleado',
header: 'Nombre Empleado'
}, {
dataIndex: 'DirectorId',
header: 'Director Id'
}],
// Render grid to dom element with id set to panel
renderTo: 'whitespace',
width: 422,
height: 300
});
}
});
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/charts-all.css" rel="stylesheet" />
<script src="~/Scripts/ext-all.js"></script>
<script src="~/Scripts/app.js"></script>
</head>
<body>
<div id="whitespace"></div>
<div>
</div>
</body>
</html>
Controller:
public JsonResult GetCustomers()
{
List<Empleados> lstPersona = new List<Empleados>();
SqlConnection con = new SqlConnection("Server=PC;Database=TestPersona;Trusted_Connection=yes;");
SqlCommand cmd = new SqlCommand("SELECT EmpleadoId,NombreEmpleado,DirectorId FROM Empleados", con);
cmd.CommandType = CommandType.Text;
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
Empleados emp = new Empleados();
emp.EmpleadoId = Convert.ToInt16(dr["EmpleadoId"]);
emp.NombreEmpleado = dr["NombreEmpleado"].ToString();
emp.DirectorId = Convert.ToInt16(dr["DirectorId"]);
lstPersona.Add(emp);
}
con.Close();
JsonResult res = Json(new { data = lstPersona }, JsonRequestBehavior.AllowGet);
return res;
}

Marionette.js - Uncaught ReferenceError: text is not defined

I wonder if someone can help to find what's wrong in this case. I get "Uncaught ReferenceError: text is not defined" in line 6 app.js:
((__t=( text ))==null?'':_.escape(__t))+
driver.js:
var Marionette = require('backbone.marionette');
var TodoView = require('./views/layout');
var initialData = {
items: [
{assignee: 'Scott', text: 'Write a book about Marionette'},
{assignee: 'Andrew', text: 'Do some coding'}
]
};
var App = new Marionette.Application({
onStart: function(options) {
var todo = new TodoView({
collection: new Backbone.Collection(options.initialData.items),
model: new ToDoModel()
});
todo.render();
todo.triggerMethod('show');
}
});
App.start({initialData: initialData});
views/layout.js
var Backbone = require('backbone');
var Marionette = require('backbone.marionette');
var ToDoModel = require('../models/todo');
var FormView = require('./form');
var ListView = require('./list');
var Layout = Marionette.View.extend({
el: '#app-hook',
template: require('../templates/layout.html'),
regions: {
form: '.form',
list: '.list'
},
collectionEvents: {
add: 'itemAdded'
},
onShow: function() {
var formView = new FormView({model: this.model});
var listView = new ListView({collection: this.collection});
this.showChildView('form', formView);
this.showChildView('list', listView);
},
onChildviewAddTodoItem: function(child) {
this.model.set({
assignee: child.ui.assignee.val(),
text: child.ui.text.val()
}, {validate: true});
var items = this.model.pick('assignee', 'text');
this.collection.add(items);
},
itemAdded: function() {
this.model.set({
assignee: '',
text: ''
});
}
});
module.exports = Layout;
todoitem.html
<%- item.text %> — <%- item.assignee %>
Any can me explain why text is not defined?

check your ToDoModel for a typo, the Backbone Model field should be "defaults" not "default", while parsing for a template Marionette view looks for "defaults" field:
https://marionettejs.com/docs/master/template.html#rendering-a-model
so the ToDoModel code should go like this:
...
var ToDo = Backbone.Model.extend({
defaults: {
assignee: '',
text: ''
},
...

You should take a look at the Marionnette's ItemView documentation which explain how to render a template with custom data.
var my_template_html = '<div><%= args.name %></div>'
var MyView = Marionette.ItemView.extend({
template : function(serialized_model) {
var name = serialized_model.name;
return _.template(my_template_html)({
name : name,
some_custom_attribute : some_custom_key
});
}
});
new MyView().render();
Note that using a template function allows passing custom arguments
into the .template function and allows for more control over how the
.template function is called.
With the code you provided at the moment, I can't help.

Marionette calls 'serializeModel' before passing the context to 'template'. So, if you have a backbone.model like
{
.
.
.
attributes: {
text: 'someText',
asignee: 'someAsignee'
}
.
.
}
your template will receive
{
text: 'someText',
assignee: 'someAsignee'
}
I have worked with handlebars but not underscore exactly. There {{this.text}} and {{this.assignee}} works like a charm in the template. So, try this.text or text in place of item.text, see if that works

Access collection on two views in backbone.js

Hi i have a collection and two views. On my view1 i'm adding data to my collection and view2 will just render and display any changes about the collection. But i can't get it to work. The problem is originally i'm doing this
return new CartCollection();
But they say its a bad practice so i remove changed it. But when i instantiate cart collection on view1 it would add but it seems view2 doesn't sees the changes and renders nothing.
Any ideas?
here is my cart collection.
define([
'underscore',
'backbone',
'model/cart'
], function(_, Backbone, CartModel) {
var CartCollection = Backbone.Collection.extend({
model : CartModel,
initialize: function(){
}
});
return CartCollection;
});
Here is my itemView ( view1 )
AddToCart:function(ev){
ev.preventDefault();
//get data-id of the current clicked item
var id = $(ev.currentTarget).data("id");
var item = this.collection.getByCid(id);
var isDupe = false;
//Check if CartCollection is empty then add
if( CartCollection.length === 0){
CartCollection.add([{ItemCode:item.get("ItemCode"),ItemDescription:item.get("ItemDescription"),SalesPriceRate:item.get("RetailPrice"),ExtPriceRate:item.get("RetailPrice"),WarehouseCode: "Main",ItemType : "Stock",LineNum:1 }]);
}else{
//if check if the item to be added is already added, if yes then update QuantityOrdered and ExtPriceRate
_.each(CartCollection.models,function(cart){
if(item.get("ItemCode") === cart.get("ItemCode")){
isDupe = true;
var updateQty = parseInt(cart.get("QuantityOrdered"))+1;
var extPrice = parseFloat(cart.get("SalesPriceRate") * updateQty).toFixed(2);
cart.set({ QuantityOrdered: updateQty });
cart.set({ ExtPriceRate: extPrice });
}
});
//if item to be added has no duplicates add new item
if( isDupe == false){
var cartCollection = CartCollection.at(CartCollection.length - 1);
var lineNum = parseInt( cartCollection.get("LineNum") ) + 1;
CartCollection.add([{ItemCode:item.get("ItemCode"),ItemDescription:item.get("ItemDescription"),SalesPriceRate:item.get("RetailPrice"),ExtPriceRate:item.get("RetailPrice"),WarehouseCode: "Main",ItemType : "Stock",LineNum:lineNum}]);
}
}
CartListView.render();
}
My cartview (view2)
render: function(){
this.$("#cartContainer").html(CartListTemplate);
var CartWrapper = kendobackboneModel(CartModel, {
ItemCode: { type: "string" },
ItemDescription: { type: "string" },
RetailPrice: { type: "string" },
Qty: { type: "string" },
});
var CartCollectionWrapper = kendobackboneCollection(CartWrapper);
this.$("#grid").kendoGrid({
editable: true,
toolbar: [{ name: "save", text: "Complete" }],
columns: [
{field: "ItemDescription", title: "ItemDescription"},
{field: "QuantityOrdered", title: "Qty",width:80},
{field: "SalesPriceRate", title: "UnitPrice"},
{field: "ExtPriceRate", title: "ExtPrice"}
],
dataSource: {
schema: {model: CartWrapper},
data: new CartCollectionWrapper(CartCollection),
}
});
},

The problem is you've created 2 different instances of CartCollection. So when you update or fetch data into one instance the other does not change but remains the same.
Instead you need to use the same instance of CartCollection across the 2 views (or alternatively keep the 2 insync) .Assuming both views are in the same require.js module you would need to:
1) Instantiate the CartCollection instance and store it somewhere that both views have access to. You could put this in the Router, the parent view, or anywhere else really.
e.g.
var router = Backbone.Router.extend({});
router.carts = new CartCollection();
2) You need need to pass the CartCollection instance to each of your views.
e.g.
var view1 = new ItemView({ collection: router.carts });
var view2 = new CartView({ collection: router.carts });
You may also want to just pass the Cart model to the CartView instead of the entire collection.
e.g.
var cartModel = router.carts.get(1);
var view2 = new CartView({ model: cartModel });