Insert href redirect on click button (c3ui)

#1

Hi, I want to modify the redirection from my page to another when I click on a button. Now when I click on the Remove button the system remove the current project from the db and then redirect to the projects page. I want to change this, after removed the project I want redirect the page to another one. How can I do?
In the Project.c3ui page I have this definition for the button (that have the class “removeFromPlan”)

"$ .removeFromPlan": {
     "click": {
          "type": "LCI.RemoveProjectFromPlan_ProjectPage"
      }
}

What I have to add to this? an “href” definition or what else?

#2

I’m trying to follow another way to fix the problem.
I created a custom action class and I’m calling it from my button (now I have “type”: “LCI.RemoveProjectFromProjectPage” ) .
Now I have the problem that not always the system reload the state of the recommendations and projects updated (I do a window.location.href=“javascript:history.go(-1)” at the end of the action)…I’m trying to force the update of the data doing a PEATEngine.getRecommendationList but sometimes (few case) the state of the recommendation is not updated on the page. Any suggestion? I don’t want to reload the entire page or insert an href that change the page, I want to go back to the previous page having the data updated.

#3

The proper way to do this is to add a config refreshDataSource to your action. The value of this config is the ids of data sources you want to refresh. Also, you need to make sure you call afterDispatch() in your custom action, as this is what triggers the refreshing of the data source.

So it might look something like this:

"$ .removeFromPlan": {
     "click": {
          "type": "LCI.RemoveProjectFromPlan_ProjectPage",
          "refreshDataSource": [ "yourDataSourceId" ]
      }
}
1 Like
#4

+1 to @josh.nathanson’s explanation.

Also keep in mind that “LCI.RemoveProjectFromPlan_ProjectPage” makes 2 separate API calls: Project.remove and PEATEngine.updateRecommendation before redirecting (and calling afterDispatch to refresh the data sources!)

#5

Hi @matt and @josh.nathanson , thanks for your replies. I’m calling the Project.remove and PEATEngine.updateRecommendation in my custom action, the suggestion of using refreshDataSource seems not work because I want that the data will be refreshed in the previous page and not in the current page. The previous page can be Facility Details or Projects…there is a way to go back in the previous page updating the data of the previous one? I don’t know if we have a way to know the url of previous page, for example document.referrer seems not work.
A solution could be to go back forcing the reload of the previous page but I have not yet find a way to do this. Any suggestions?

Thanks! Laura

#6

Hi Laura,

I don’t think you need to worry about the pages, i.e. going “back to the previous page” to refresh the data. Because C3 apps are single page applications, the pages all live in browser memory. Configuring refreshDataSource should reload the grid such that when you navigate back to the page with the grid, it should be updated. The data source is linked to the environment, not a specific page, and all datasources are available at any time through the environment.

#7

Maybe I’m using a wrong dataSourceId, because the grid in the Projects page doesn’t refresh after the remove of one project (I see it in the grid even if I removed it).
Which is the correct dataSourceId to insert in the refreshDataSource? If I want to refresh the kendogrid in Projects page, I have to insert “Enterprise.Projects” or “Projects” or “ProjectListView” (this last is the data-componentId in the html of the Projects page) as dataSourceId ?
Projects.c3ui is defined as :
ui module Enterprise {
dataSource Projects {
“c3type”: “Project”,
“responseSelector”: “objs”,
…and so on

Thanks,
Laura

#8

I solved the problem using the refreshDataSource inside the new custom action instead of in the Project.c3ui page (like done in the RemoveProjectFromPlan_ProjectPage).

C3.define(“C3.action.LCI.RemoveProjectFromProjectPage”, {
extend: “C3.action.Action”,

config: {
    refreshDataSource: ["Enterprise.Projects"],


Thanks,
Laura