cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

How to show the Timeline control in table?

Go to solution
former_member198924
Participant

on ‎01-22-2019 3:36 AM 

1) XMLVIEW

	 <Table id="idProductsTable" noDataText="No Data" items="{/}">
            <items>
            <ColumnListItem  counter="0">
            <cells>
            <com:Timeline
			id="idTimeline"
			enableDoubleSided="false"
			groupBy="HireDate"
			growingThreshold="0"
			filterTitle="Job Title"
			sortOldestFirst="true"
			content="{/}"
			axisOrientation="Horizontal"
			alignment="Top"
			showSearch="false"
			showSort="false"
			showHeaderBar="false"
			showSuggestion="false"
			class="timelicss">
		<com:content>
			<com:TimelineItem
			      	id="idTemplateItem"
			      	dateTime="{HireDate}"
			      	status="Success"
			      	title="{Title}"
			      	iconTooltip="{JobTitle}"
					userPicture="{Photo}"
			    	userNameClickable="true"
					text="{JobTitle}"
					userName="{Name}"
					filterValue="{JobTitle}"
					icon="{Icon}">
			</com:TimelineItem>
		</com:content>
	</com:Timeline>
                </cells>
                </ColumnListItem>
                </items>
                <columns>
                    <Column minScreenWidth="Tablet"
				    demandPopin="true" hAlign="Left" >
                        <header>
                            <Text text="" maxLines="0"></Text>
                        </header>
                    </Column>
                </columns>
            </Table>

2) Controller.js

onInit: function () {
			var table1 = this.byId("idProductsTable");
		
    			var datapath= 
				[{"Name":"John","Status":"Success","HireDate": "Date(1471020400000)","JobTitle": "Accounts Payable Manager","JobResponsibilities": "Plans.\"","Photo":"data:image/png;base64,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","Icon": "sap-icon://activity-individual"},
        		 {"Name":"Robert","Warning":"Failed","HireDate": "Date(1371020400000)","JobTitle": "Configuration Expert","JobResponsibilities": "I keep the big picture in mind.\"","Photo":"data:image/png;base64,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","Icon": "sap-icon://settings"},
    			 {"Name":"Mike","Status":"Warning","HireDate": "Date(1371020400000)","JobTitle": "Credit Analyst","JobResponsibilities": "that’s acceptable for my customers and my company.\"","Photo":"data:image/png;base64,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","Icon": "sap-icon://manager-insight"}];
			
		
    		var ojsonModel = new sap.ui.model.json.JSONModel(); 
            ojsonModel.setData(datapath);
            table1.setModel(ojsonModel);


    
    
		}

Hi All,

I need to show the Timeline control (sap.suite.ui.commons.Timeline) in Table (sap.m.table). I have tried that. But duplicate value are repeating. Is it possible to display the Timeline to inside the table?. Can you please assist me.

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

junwu
Active Contributor
‎01-23-2019 3:38 AM
0 Kudos 
"property1":"value1""propert2":"value2" you need to put comma in between
Show replies
Show replies
former_member198924
Participant
‎01-23-2019 6:29 AM
0 Kudos

Thank You Jun Wu

Answers (3)

Answers (3)

former_member198924
Participant
‎01-23-2019 6:50 AM
0 Kudos

Hi Mahesh and Jun Wu,

Is it possible to give the color for Timeline box. Can you please suggest me.

Show replies
Show replies
maheshpalavalli
Active Contributor
‎01-23-2019 11:39 AM

There is a status in timelineitem maybe if you pass it will change the color, never tried though. If not possible you have to use the CSS.

I advice you to close the question and create another question if you get any issues.

BR,

Mahesh

junwu
Active Contributor
‎01-22-2019 5:34 AM
0 Kudos

timeline is kind of table, which needs to be bound to array....

so your data model has to support that,

basically you data model should contains array(for the table) which contains array as element (for the timeline)

Show replies
Show replies
former_member198924
Participant
‎01-22-2019 8:48 AM
0 Kudos

I just want to show the timeline like this. Timeline should come row by row different entries. So please assist me.

former_member198924
Participant
‎01-23-2019 6:52 AM
0 Kudos

Hi Jun Wu,

Is it possible to give the color for Timeline box. Can you please suggest me.

maheshpalavalli
Active Contributor
‎01-22-2019 4:20 AM
0 Kudos

Hi DURAI VENKATESH,

It is possible but you are doing the binding incorrectly.

1. You mentioned the items binding for the table as items="{/}"

It means it will fetch all array of data that is available in the model.

2. You mentioned the content binding for the timeline as content="{/}"

Which also means fetch all the array of data that is available in the model.

So your code itself is written to show the total no of items available in the model as the table rows and again for every table row, you are again showing the same items for the timelines. So change your data and binding accordingly (both are incorrect).

BR,

Mahesh

Show replies
Show replies
former_member198924
Participant
‎01-22-2019 5:00 AM
0 Kudos

Hi Mahesh,

Thanks for the reply.

I have binding the model to table in controller itself. So I have removed the items="/" line in table xmlview. When I try to run the code, I'm getting the first row value only in the table. I need to get dynamical values from JSON data. can you please tell me, how to do that. I have mentioned the Table and Timeline control binding.

1) XMLView 
 <Table id="idProductsTable" noDataText="No Data">
            <items>
            <ColumnListItem  counter="0">
            <cells>
            <com:Timeline
			id="idTimeline"
			enableDoubleSided="false"
			groupBy="HireDate"
			growingThreshold="0"
			filterTitle="Job Title"
			sortOldestFirst="true"
			
			axisOrientation="Horizontal"
			alignment="Top"
			showSearch="false"
			showSort="false"
			showHeaderBar="false"
			showSuggestion="false"
			class="timelicss">
		<com:content>
			<com:TimelineItem
			      	id="idTemplateItem"
			      	dateTime="{HireDate}"
			      	status="Success"
			      	title="{Title}"
			      	iconTooltip="{JobTitle}"
					userPicture="{Photo}"
			    	userNameClickable="true"
					text="{JobTitle}"
					userName="{Name}"
					filterValue="{JobTitle}"
					icon="{Icon}">
			</com:TimelineItem>
		</com:content>
	</com:Timeline>
                </cells>
                </ColumnListItem>
                </items>
                <columns>
                    <Column minScreenWidth="Tablet"
				    demandPopin="true" hAlign="Left" >
                        <header>
                            <Text text="" maxLines="0"></Text>
                        </header>
                    </Column>
                </columns>
            </Table>
2) Controller
	onInit: function () {
			var table1 = this.byId("idProductsTable");
			var datapath= [{"Name":"John","Status":"Success","HireDate": "Date(1471020400000)","JobTitle": "Accounts Payable Manager","JobResponsibilities": "Plans.\"","Photo":"data:image/png;base64,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","Icon": "sap-icon://activity-individual"}];
        	
	    var ojsonModel = new sap.ui.model.json.JSONModel(); 
            ojsonModel.setData(datapath);
            table1.setModel(ojsonModel);
maheshpalavalli
Active Contributor
‎01-22-2019 5:23 AM

Hi DURAI VENKATESH

Like I said, you need to understand the data part correctly first.

Tell me these details.

1. What you want to show in the table, provide the data also

2. What you want to show in the timeline, provide the data

Then I can tell you how to solve your issue.

BR,

Mahesh

former_member198924
Participant
‎01-22-2019 8:45 AM
0 Kudos

I want to show dynamic value to timeline. Why I'm using means if i keep timeline to inside the table means I'll get multiple rows and each row have one timeline values. so please assist me.

maheshpalavalli
Active Contributor
‎01-22-2019 9:18 AM

Hi Durai,

I understand your question that's why I am asking you please provide me the data for the table and for the timeline. I gave points right, answer to those points.

i will give an example:

[
 {
   "userid":"user1",
   "name":"Test user 1",
   "timeline":[{
      "property1":"value1"
      "propert2":"value2"
     },{
      "property1":"value1"
      "propert2":"value2"
    }]
 },
{
   "userid":"user2",
   "name":"Test user 2",
   "timeline":[{
      "property1":"value1"
      "propert2":"value2"
     },{
      "property1":"value1"
      "propert2":"value2"
    }]
 }
]

If you have the data in the above format, then you can bind the table with items="{/}" and timeline content with content="{timeline}", this will work. But the data you have given is not in the correct format. That is why I am asking you to understand what you want to do first.

BR,

Mahesh

former_member198924
Participant
‎01-23-2019 3:15 AM
0 Kudos

Hi Mahesh,

When I try to define the Json data, I'm getting the following error message "error: ESLINT: Parsing error: Unexpected token "propert2"".

Can you please assist me.

  var jsonData = [
 {
   "userid":"user1",
   "name":"Test user 1",
   "timeline":[{
      "property1":"value1"
      "propert2":"value2"
     },{
      "property1":"value1"
      "propert2":"value2"
    }]
 },
{
   "userid":"user2",
   "name":"Test user 2",
   "timeline":[{
      "property1":"value1"
      "propert2":"value2"
     },{
      "property1":"value1"
      "propert2":"value2"
    }]
 }
];

maheshpalavalli
Active Contributor
‎01-23-2019 4:05 AM

😄 Jun Wu is right, you need to give commas, I just pasted a dummy code..

former_member198924
Participant
‎01-23-2019 6:43 AM
0 Kudos

Hi Mahesh,

Thank you so much for your suggestion. I have modified the json data based on your suggestion. It is working fine.

former_member198924
Participant
‎01-23-2019 6:52 AM
0 Kudos

Hi Mahesh,

Is it possible to add some colour into the boxes as seen in the image below. Can you please suggest me.

Ask a Question