Bulletlist in a table view cell

[oliver]

Hi,

i've to build a portal iView and did some prototyping using htmlb taglib and JSPDynPage.

Now one request is to display a content as a bulletlist inside a table view cell. I tried several ways, like raw HTML in the cell or putting an item list into the cell but nothing worked for me so far.

Could one of your experts please enlighten me how to satisfy my customer?

Thanks & regards

Oliver

[former_member62468]

Hi Oliver,

I understand your frustration. My first look at it I wasn't sure what to do. If you are creating a tableView in the portal there are only a few things you can do inside the tableViews htmlb tags. For example, if you wanted a picture and text inside one cell, you could not do that. In your case you need to create a custom TableCellRenderer.

Here is some sample code:

In the JSP (look at below the table where we set the user type cell renderer to your class):

<% pageContext.setAttribute("talentModel", pacificorpTalentmgmtTalentBean.getTalentTableInfo().getModel()); %>

<hbj:tableView id="talentTableView"

model="talentModel"

design="ALTERNATING"

headerVisible="false"

footerVisible="false"

fillUpEmptyRows="false"

navigationMode="BYLINE"

selectionMode="NONE"

onNavigate="onNavigate"

visibleFirstRow="1"

visibleRowCount='<%= "" + pacificorpTalentmgmtTalentBean.getTalentTableInfo().getVisibleRowCount() %>'

rowCount='<%= "" + pacificorpTalentmgmtTalentBean.getTalentTableInfo().getModel().getRowCount() %>'

width="100%">

<%

com.sapportals.htmlb.table.TableView tv = (com.sapportals.htmlb.table.TableView)pageContext.findAttribute("talentTableView");

<b>tv.setUserTypeCellRenderer(new com.pacificorp.sap.portal.talentmgmt.talentpools.htmlb.TalentTableCellRenderer(pacificorpTalentmgmtTalentBean));</b> tv.setHeaderCellRenderer(new TalentTableHeaderCellRenderer());

tv.setColumnHAlignment(1, com.sapportals.htmlb.enum.CellHAlign.LEFT);

tv.setColumnHAlignment(2, com.sapportals.htmlb.enum.CellHAlign.CENTER);

tv.setColumnHAlignment(3, com.sapportals.htmlb.enum.CellHAlign.CENTER);

tv.setColumnHAlignment(4, com.sapportals.htmlb.enum.CellHAlign.CENTER);

tv.setColumnHAlignment(5, com.sapportals.htmlb.enum.CellHAlign.RIGHT);

%>

</hbj:tableView>

In the renderer (Get the column number and then do whatever you want to it):

public void renderCell(int row, int column, TableView tableView, IPageContext rendererContext)

{

IPortalComponentRequest request = (IPortalComponentRequest) rendererContext.getRequest();

ResourceBundle resource = request.getResourceBundle();

if(column == 1)

{

TalentTable table = bean.getTalentTable();

TalentEntry entry = (TalentEntry) table.getEntries().get(row - 1);

TextView tv = new TextView();

tv.setText(tableView.getValueAt(row, column).toString());

tv.render(rendererContext);

if ((entry.getEmployee().getEmployeeId() != null) &&

(entry.getEmployee().getEmployeeId().length() > 0))

{

HtmlbUtil.getProfileImageLink("employee--" + row,

entry.getEmployee().getEmployeeId(),

(IPortalComponentRequest) rendererContext.getRequest()).render(rendererContext);

}

}

else if(column == 2)

{

TalentTable table = bean.getTalentTable();

TalentEntry entry = (TalentEntry) table.getEntries().get(row - 1);

DropdownListBox ddlb = new DropdownListBox("talentClassification--" + row);

ddlb.setWidth("95%");

ddlb.setOnSelect("onTalentClassificationSelect");

if (tableView.getValueAt(row, column).toString().length() > 0)

{

ddlb.setSelection(entry.getTalentClassificationCode());

}

else

{

ddlb.addItem("", "");

ddlb.setSelection("");

}

String[] talentClassifications = bean.getModel().getTalentClassifications();

String[] codes = bean.getModel().getTalentClassificationsCodeEnumeration();

for (int i = 0; i < talentClassifications.length; i++)

{

ddlb.addItem(codes<i>, talentClassifications<i>);

}

ddlb.render(rendererContext);

}

else if (column == 3)

{

TalentTable table = bean.getTalentTable();

TalentEntry entry = (TalentEntry) table.getEntries().get(row - 1);

InputField inputRationale = new InputField();

inputRationale.setId("talentRationale--" + row);

inputRationale.setType(DataType.STRING);

inputRationale.setMaxlength(250);

if (tableView.getValueAt(row, column).toString().length() > 0)

{

inputRationale.setValue(escapeChars(entry.getTalentRationale()));

}

else

{

inputRationale.setValue("");

}

inputRationale.setSize(35);

inputRationale.setValueEncode(false);

inputRationale.setJsObjectNeeded(true);

String inputfieldID = rendererContext.getParamIdForComponent(inputRationale);

Link l = new Link("btalentRationale--" + row);

l.setLabeled(false);

l.setOnClick("onTalentRationaleInputValidation");

l.render(rendererContext);

String buttonID = rendererContext.getParamIdForComponent(l);

rendererContext.render(new HTMLFragment(

"<script>document.getElementById('" + buttonID +

"').style.visibility = 'hidden';</script>"));

String inputRationaleText = escapeChars(inputRationale.getString().toString());

inputRationale.setClientEvent(EventTrigger.ON_BLUR,

"checkBlur('" + inputfieldID + "', '" + buttonID + "', '" +

inputRationaleText + "')");

inputRationale.setClientEvent(EventTrigger.ON_KEYUP,

"checkChange('" + inputfieldID + "', '" + buttonID + "', '" +

inputRationaleText + "')");

inputRationale.render(rendererContext);

}

else if(column == 4)

{

TalentTable table = bean.getTalentTable();

TalentEntry entry = (TalentEntry) table.getEntries().get(row - 1);

DropdownListBox potClass = new DropdownListBox("potentialClassification--" + row);

potClass.setWidth("95%");

potClass.setOnSelect("onPotentialClassificationSelect");

if (tableView.getValueAt(row, column).toString().length() > 0)

{

potClass.setSelection(entry.getPotentialClassificationCode());

}

else

{

potClass.addItem("", "");

potClass.setSelection("");

}

String[] potentialClassifications = bean.getModel().getPotentialClassifications();

String[] codes = bean.getModel().getPotentialClassificationsCodeEnumeration();

for (int i = 0; i < potentialClassifications.length; i++)

{

potClass.addItem(codes<i>, potentialClassifications<i>);

}

potClass.render(rendererContext);

}

[oliver]

Hi Sean,

thanks for this realy nice example of what you can do with HTMLB Tables using cell renderers. This gave me some good hints on how to improve the solution for my problem.

To get a bulletlist into a tablecell i simply render some HTML content into the cell and set the encoding flag to "false".

<hbj:tableView

id="myTableView3"

design="STANDARD"

headerVisible="false"

footerVisible="false"

fillUpEmptyRows="true"

navigationMode="BYLINE"

selectionMode="NONE"

headerText="External Effects"

visibleFirstRow="1"

width="100%">

<%

myTableView3.setModel(ReportModelBean.getTableModel("externalEffects"));

myTableView3.getModel().getColumnAt(3).setEncode(false);

%>

</hbj:tableView>

In my XML parser i expect at a specific hierarchy a list so i render it directly in HTML.

while(bulletIter.hasNext()) {

bulletElement = (Element) bulletIter.next();

bulletTags = bulletTags + "<li>" +

bulletElement.getText() + "</li>";

iteml.addText(bulletElement.getText());

}

rowData.addElement(bulletTags);

This works farly well for me so far but i'll use some of your ideas to clean it up a little.

Thanks a lot!

Oliver