Maximo Open Forum

Hello everyone! 

I am very new to graphite / carbon and it's configuration, so I apologize for any wrong terminology I use.

I've been trying to tinker with the Self Serve application by adding custom made surveys to each ticket. After a lot of trial and errors, I figured out how to create datasources through object structures as well as getting related objects through inline multi-record relationships (which I am 80% sure could be done in a better way once I understand datasources better).

What I am finding difficult is navigating through (what I presume is) the runtime objects (app, page, datasources, their child objects, etc...). I know how to debut the UI elements through my browser's inspect, but I can not tackle debugging these objects. I am guessing these are not sent to the client and remain server sided? I've skimmed through the documentation and the architecture and I am guessing these can be somehow accessed in the container MAF is running on. Has anyone figured out how to reach these runtime objects?

These are all client-side objects built in React. If you install the React Developer Tools extension in your browser you'll be able to inspect these better when you're in the MAF configuration. I will caution you, however, that JavaScript is not like Java and there is no way for IBM to declare public/private methods. This means you can access & utilize anything, but the IBM team only intends you to utilize certain APIs. 

For example, you'll see code out of the box like:

Hello everyone! 

I am very new to graphite / carbon and it's configuration, so I apologize for any wrong terminology I use.

I've been trying to tinker with the Self Serve application by adding custom made surveys to each ticket. After a lot of trial and errors, I figured out how to create datasources through object structures as well as getting related objects through inline multi-record relationships (which I am 80% sure could be done in a better way once I understand datasources better).

What I am finding difficult is navigating through (what I presume is) the runtime objects (app, page, datasources, their child objects, etc...). I know how to debut the UI elements through my browser's inspect, but I can not tackle debugging these objects. I am guessing these are not sent to the client and remain server sided? I've skimmed through the documentation and the architecture and I am guessing these can be somehow accessed in the container MAF is running on. Has anyone figured out how to reach these runtime objects?

These are all client-side objects built in React. If you install the React Developer Tools extension in your browser you'll be able to inspect these better when you're in the MAF configuration. I will caution you, however, that JavaScript is not like Java and there is no way for IBM to declare public/private methods. This means you can access & utilize anything, but the IBM team only intends you to utilize certain APIs. 

For example, you'll see code out of the box like:

Hello everyone! 

I am very new to graphite / carbon and it's configuration, so I apologize for any wrong terminology I use.

I've been trying to tinker with the Self Serve application by adding custom made surveys to each ticket. After a lot of trial and errors, I figured out how to create datasources through object structures as well as getting related objects through inline multi-record relationships (which I am 80% sure could be done in a better way once I understand datasources better).

What I am finding difficult is navigating through (what I presume is) the runtime objects (app, page, datasources, their child objects, etc...). I know how to debut the UI elements through my browser's inspect, but I can not tackle debugging these objects. I am guessing these are not sent to the client and remain server sided? I've skimmed through the documentation and the architecture and I am guessing these can be somehow accessed in the container MAF is running on. Has anyone figured out how to reach these runtime objects?

Thanks a ton for your insight, Mr. Steven.

I did jump to the React Developer Tools extension as a first resort, but for some reason, it wasn't detecting that the MAF preview was using React. I will try my luck again with it. That being said, I did find another (and perhaps convoluted) way to debug through the following document shard on techXchange:
https://community.ibm.com/community/user/viewdocument/amug-event-maximo-application-fram?CommunityKey=af2335d3-5043-4063-8509-018adc3ba1d9&tab=librarydocuments

On page 32, you can see how they use breakpoints in AppCustomization.js to view the current state of variables. This, albeit a bit too complicated and not user-friendly, was quite insightful. That being said, what I was looking for didn't seem to be there (I was looking to see what the {item} object contained), but I can see this being a very useful tool, especially with debugging datasources and making sure I am retrieving the right data and the right structure for it.

I was under the impression that I could find the "item" variable used in components like <data-list>, <repeat>, or such, but it seems to be something akin to the binding values used in Maximo, like:&DATETIME& or :&PERSONID&. There are published exhaustive guides for Maximo, but I haven't found any for MAF yet, other than the occasional small list of app, eventManager, page. I did somehow find that I can use the binding value {index}, which can be used in <data-list>, <repeat>, or similar components.

Either way, thanks again for your reply, and I am definitely not planning on diverting from the best practices, only gaining better understanding of how graphite works.

These are all client-side objects built in React. If you install the React Developer Tools extension in your browser you'll be able to inspect these better when you're in the MAF configuration. I will caution you, however, that JavaScript is not like Java and there is no way for IBM to declare public/private methods. This means you can access & utilize anything, but the IBM team only intends you to utilize certain APIs. 

For example, you'll see code out of the box like:

Hello everyone! 

I am very new to graphite / carbon and it's configuration, so I apologize for any wrong terminology I use.

I've been trying to tinker with the Self Serve application by adding custom made surveys to each ticket. After a lot of trial and errors, I figured out how to create datasources through object structures as well as getting related objects through inline multi-record relationships (which I am 80% sure could be done in a better way once I understand datasources better).

What I am finding difficult is navigating through (what I presume is) the runtime objects (app, page, datasources, their child objects, etc...). I know how to debut the UI elements through my browser's inspect, but I can not tackle debugging these objects. I am guessing these are not sent to the client and remain server sided? I've skimmed through the documentation and the architecture and I am guessing these can be somehow accessed in the container MAF is running on. Has anyone figured out how to reach these runtime objects?

It's not clear from your message if you're running 9.1 (where the MAF configuration is embedded in the application) or 9.0 or earlier (where you run the MAF configuration on your local desktop). I'm assuming you're running 9.0 or earlier and if so, there are different command line arguments you provide to the container. One of the parameters that was recommended at one point was to indicate whether it was a production build which helped reduce the zip size when it was built and uploaded to the server. This stopped being necessary, but you might still have the argument indicating it and it might break the ability to debug if you have it since it changes how the app is built. Otherwise, it should work in the preview in the MAF configuration (not in the web version of Maximo since that is a production react build). I've used the React Developer Tools extension across many releases (except 9.1 due to other problems)

There are pieces of an item record that are consistent for the framework (like item.href) but it's mainly to represent a single record in the datasource so most of what you interact with will be specific to the datasource that you're interacting with. You'll access the attributes you've defined in the schema like item.wonum or item.description. Attributes that exist in Maximo but are not part of the schema would not be accessible. For example, if you didn't declare description_longdescription in the schema, you would not be able to access it as item.description_longdescription. There are a few special values like status_description or status_maxvalue (attributes that are tied to a domain have some special logic the REST API populates) but it's otherwise really the schema as you've declared. If you alias an attribute (IE asset.description--assetdesc) then you would access it as the alias (IE item.assetdesc). If you have a one to many dataset inside the schema, you can get a child datasource of that programmatically or you can declare the maximo-datasource inside your maximo-datasource to have the framework do it for you.

I have never found a reason to use repeat, but you will use data-list extensively. 

Thanks a ton for your insight, Mr. Steven.

I did jump to the React Developer Tools extension as a first resort, but for some reason, it wasn't detecting that the MAF preview was using React. I will try my luck again with it. That being said, I did find another (and perhaps convoluted) way to debug through the following document shard on techXchange:
https://community.ibm.com/community/user/viewdocument/amug-event-maximo-application-fram?CommunityKey=af2335d3-5043-4063-8509-018adc3ba1d9&tab=librarydocuments

On page 32, you can see how they use breakpoints in AppCustomization.js to view the current state of variables. This, albeit a bit too complicated and not user-friendly, was quite insightful. That being said, what I was looking for didn't seem to be there (I was looking to see what the {item} object contained), but I can see this being a very useful tool, especially with debugging datasources and making sure I am retrieving the right data and the right structure for it.

I was under the impression that I could find the "item" variable used in components like <data-list>, <repeat>, or such, but it seems to be something akin to the binding values used in Maximo, like:&DATETIME& or :&PERSONID&. There are published exhaustive guides for Maximo, but I haven't found any for MAF yet, other than the occasional small list of app, eventManager, page. I did somehow find that I can use the binding value {index}, which can be used in <data-list>, <repeat>, or similar components.

Either way, thanks again for your reply, and I am definitely not planning on diverting from the best practices, only gaining better understanding of how graphite works.

These are all client-side objects built in React. If you install the React Developer Tools extension in your browser you'll be able to inspect these better when you're in the MAF configuration. I will caution you, however, that JavaScript is not like Java and there is no way for IBM to declare public/private methods. This means you can access & utilize anything, but the IBM team only intends you to utilize certain APIs. 

For example, you'll see code out of the box like:

Hello everyone! 

I am very new to graphite / carbon and it's configuration, so I apologize for any wrong terminology I use.

I've been trying to tinker with the Self Serve application by adding custom made surveys to each ticket. After a lot of trial and errors, I figured out how to create datasources through object structures as well as getting related objects through inline multi-record relationships (which I am 80% sure could be done in a better way once I understand datasources better).

What I am finding difficult is navigating through (what I presume is) the runtime objects (app, page, datasources, their child objects, etc...). I know how to debut the UI elements through my browser's inspect, but I can not tackle debugging these objects. I am guessing these are not sent to the client and remain server sided? I've skimmed through the documentation and the architecture and I am guessing these can be somehow accessed in the container MAF is running on. Has anyone figured out how to reach these runtime objects?

I am currently running 9.0.0. I have tried using 9.1.0, just for the sake of knowing how to set it up in a MAS workspace, but I have noticed that it had a lot of issues, including but not limited to the preview feature as well as the hierarchy/properties on the left. For now, I prefer 9.0.0 for its stability. I am not sure about the build command. I will look into it and check whether it is a production build, and hence, it disables react debugging. This helps a lot, Thank you!

Thank you for the tips regarding the alias. I understand the part about the schema, though I am curious about these things that are consistent for the framework. I am finding it difficult to find documentation for that. Additionally, I did see the ability to embed a maximo-datasource inside another maximo-datasource using a relationship defined in the object structure, though I failed to be able to access it elsewhere. I noticed from network requests that they do appear in the response, but I was not able to find a way to access them. I vaguely remember seeing something mentioning a function like datasource.getChildDataSource() and setting it up in AppCustomization.js, but I was curious if I could retrieve that datasource directly in the UI without JS customization logic.

It's not clear from your message if you're running 9.1 (where the MAF configuration is embedded in the application) or 9.0 or earlier (where you run the MAF configuration on your local desktop). I'm assuming you're running 9.0 or earlier and if so, there are different command line arguments you provide to the container. One of the parameters that was recommended at one point was to indicate whether it was a production build which helped reduce the zip size when it was built and uploaded to the server. This stopped being necessary, but you might still have the argument indicating it and it might break the ability to debug if you have it since it changes how the app is built. Otherwise, it should work in the preview in the MAF configuration (not in the web version of Maximo since that is a production react build). I've used the React Developer Tools extension across many releases (except 9.1 due to other problems)

There are pieces of an item record that are consistent for the framework (like item.href) but it's mainly to represent a single record in the datasource so most of what you interact with will be specific to the datasource that you're interacting with. You'll access the attributes you've defined in the schema like item.wonum or item.description. Attributes that exist in Maximo but are not part of the schema would not be accessible. For example, if you didn't declare description_longdescription in the schema, you would not be able to access it as item.description_longdescription. There are a few special values like status_description or status_maxvalue (attributes that are tied to a domain have some special logic the REST API populates) but it's otherwise really the schema as you've declared. If you alias an attribute (IE asset.description--assetdesc) then you would access it as the alias (IE item.assetdesc). If you have a one to many dataset inside the schema, you can get a child datasource of that programmatically or you can declare the maximo-datasource inside your maximo-datasource to have the framework do it for you.

I have never found a reason to use repeat, but you will use data-list extensively. 

Thanks a ton for your insight, Mr. Steven.

I did jump to the React Developer Tools extension as a first resort, but for some reason, it wasn't detecting that the MAF preview was using React. I will try my luck again with it. That being said, I did find another (and perhaps convoluted) way to debug through the following document shard on techXchange:
https://community.ibm.com/community/user/viewdocument/amug-event-maximo-application-fram?CommunityKey=af2335d3-5043-4063-8509-018adc3ba1d9&tab=librarydocuments

On page 32, you can see how they use breakpoints in AppCustomization.js to view the current state of variables. This, albeit a bit too complicated and not user-friendly, was quite insightful. That being said, what I was looking for didn't seem to be there (I was looking to see what the {item} object contained), but I can see this being a very useful tool, especially with debugging datasources and making sure I am retrieving the right data and the right structure for it.

I was under the impression that I could find the "item" variable used in components like <data-list>, <repeat>, or such, but it seems to be something akin to the binding values used in Maximo, like:&DATETIME& or :&PERSONID&. There are published exhaustive guides for Maximo, but I haven't found any for MAF yet, other than the occasional small list of app, eventManager, page. I did somehow find that I can use the binding value {index}, which can be used in <data-list>, <repeat>, or similar components.

Either way, thanks again for your reply, and I am definitely not planning on diverting from the best practices, only gaining better understanding of how graphite works.

These are all client-side objects built in React. If you install the React Developer Tools extension in your browser you'll be able to inspect these better when you're in the MAF configuration. I will caution you, however, that JavaScript is not like Java and there is no way for IBM to declare public/private methods. This means you can access & utilize anything, but the IBM team only intends you to utilize certain APIs. 

For example, you'll see code out of the box like:

Hello everyone! 

I am very new to graphite / carbon and it's configuration, so I apologize for any wrong terminology I use.

I've been trying to tinker with the Self Serve application by adding custom made surveys to each ticket. After a lot of trial and errors, I figured out how to create datasources through object structures as well as getting related objects through inline multi-record relationships (which I am 80% sure could be done in a better way once I understand datasources better).

What I am finding difficult is navigating through (what I presume is) the runtime objects (app, page, datasources, their child objects, etc...). I know how to debut the UI elements through my browser's inspect, but I can not tackle debugging these objects. I am guessing these are not sent to the client and remain server sided? I've skimmed through the documentation and the architecture and I am guessing these can be somehow accessed in the container MAF is running on. Has anyone figured out how to reach these runtime objects?