Related objects on default Rollbase mobile

Posted by jsniemi79 on 09-Oct-2014 18:58

I am trying to figure out the best way to structure a relationship to make it as easy as possible for the end user to see the data they need on their phone.  We have a customer object that is related to a notes object.  On the full browser version, it is easy to see that relationship because you can add the notes view under the Customer object.  However, on the default mobile version, it appears the related tables are not shown under the object like the browser version. I  can still access the notes, but they show as a menu option with customer, rather than as a view of notes specific to that customer.  Is this something that can be done or do I need to create my own mobile app?

All Replies

Posted by Orchid Corpin on 10-Oct-2014 10:32

This seems to be an issue, in my section properties for the related list view I uncheck the "Hide for Mobile Devices" (which is a default) but when I tested to mobile version it was not shown.

As a work around if you want to view the related records, you can use loop_begin/loop_end (see sample below) and store it in a section which viewable in mobile devices. Will need confirmation to the team if this is an expected behavior or an issue so I will file a defect if so.

<!--
R16089701  - relationship name
145437     - View id of the related records
-->

{!#LOOP_BEGIN.R16089701#145437}
      <div>  {!name} --- {!id} </div>
{!#LOOP_END.R16089701}


Hope this helps.

Regards,

Orchid

Posted by jsniemi79 on 10-Oct-2014 10:52

I think this might work. Is there a way to stop the text from being cut-off like the attached picture? It cuts off the same on mobile. Is there also a way for me to easily add a new note button that would pass in the current customer that can be accessed from mobile? If I can easily do that, I think it should work for the customer.

Posted by Orchid Corpin on 10-Oct-2014 13:42

Having New action for a related record inside the parent is not yet available to mobile but I have a workaround that you can use, but still if you want this in the future please feel free to file an enhancement to our ideas page.

<a href="../b/mb.jsp?pageId=110731603"> New Note </a>

To get the "pageId" go to object definition and click the New Note under Page Name > Get the ID value there (tried the original ID but it did not work).

In the new page of Note, drag Customer Lookup to the form and in the lookup properties Check the "Use Record in Scope for New Objects" (see below image) so when you click the New Note from parent it will auto set the parent record (Customer).

Hope this helps.

Regards,

Orchid

Posted by jsniemi79 on 10-Oct-2014 14:41

This is great and works perfectly on the desktop version.  Everything is displaying on the mobile version too.  The only issue I have now is the record in scope doesn't work on the mobile version, just the desktop.  Oddly enough, when I click the new note link on the desktop, it shows the mobile page in my browser with the record in scope.  Any ideas?

Posted by Orchid Corpin on 10-Oct-2014 15:05

I see, that was a link for mobile only, let me revised it, or I think it is much better to hide that link or section when you are in desktop and show the section that has child list view (the one that was not shown in mobile before) that section already has New button as default, otherwise if in mobile show the custom code that we have. I'll test first.

Regards,

Orchid

Posted by jsniemi79 on 10-Oct-2014 15:09

That's exactly what I want to do.  I will have two notes sections, one that shows in mobile and the normal one on the desktop.  I know there is an api for show/hide of the section, but I'm not sure how to know if I am on the desktop or browser version.  This piece and making the new note link pass in the customer on mobile will finish this up for me.

Thanks for you all your help on this.

Posted by Orchid Corpin on 10-Oct-2014 16:49

I created two section, Desktop Section and Mobile Section.

Try this script, I stored this in an script component of section "Mobile Section". Just change the following with what's in your instance, Mobile Section, Desktop Section, pageId and the values in loop_begin/loop_end.

<script>
var sectionId;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
	sectionId = rbf_getSectionIdByTitle("Desktop Section");
	rbf_showOrHideSection(sectionId, false);
	console.log('You are using a mobile device!');
} else {
	sectionId = rbf_getSectionIdByTitle("Mobile Section");
	rbf_showOrHideSection(sectionId, false);
	console.log('You are not using a mobile device!');
}
</script>

<a href="../b/mb.jsp?pageId=110731603"> New Account </a>
<div id="accountsList">
{!#LOOP_BEGIN.R16089701#145437}
      <div>  {!name#link} --- {!id} </div>
{!#LOOP_END.R16089701}
</div>

About the link that was cut-off are those field are URL type? That is expected behavior for URL fields.

Hope this may help.

Posted by jsniemi79 on 10-Oct-2014 17:47

I can't seem to get this to work.  I put the same code and changed the values you suggested and that didn't seem to do the trick.  I then tweaked the code a little bit because all I care about is that the notes for my mobile version is hidden when I am not on a mobile device.  My code looks like this:

<script>

var sectionId;

sectionId = 1953693;

//rbf_getSectionIdByTitle("Customer Notes");

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

rbf_showOrHideSection(sectionId, false);

console.log('You are using a mobile device!');

} else {

rbf_showOrHideSection(sectionId, true);

console.log('You are not using a mobile device!');

}

</script>

I tried that in the same script as my mobile section and in another section with no luck.  I also tried the API to get the title by name as well as hard-coding the original id on the section.  Also with no luck.

This section seems to show up no matter where I am.

Lastly, I still do not get any customer in scope on the mobile device using the new link code below:

<a href="../b/mb.jsp?pageId=12655"> Add New Customer Note </a>

<div id="NotesList">

{!#LOOP_BEGIN.R105316339#105308925}

     <div>

           <br>

                {!note_date} - {!agility_created_by}

           <br>

                {!note}

     </div>

{!#LOOP_END.R105316339}

</div>

I attached a screen shot of the new note page showing that it is set to have a record in scope.

Posted by Orchid Corpin on 13-Oct-2014 14:46

It seems like "Show record on Scope for New Object" is working on desktop version only.

Here are the complete test codes which works in my test, change some IDs and fieldname.

Parent View Page Code:

<script>
var sectionId;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
	sectionId = rbf_getSectionIdByTitle("Desktop Section");
	rbf_showOrHideSection(sectionId, false);
	console.log('You are using a mobile device!');
} else {
        sectionId = rbf_getSectionIdByTitle("Mobile Section");
	rbf_showOrHideSection(sectionId, false);
	console.log('You are NOT using a mobile device!');
}
</script>
<!--Get the page ID in the Object definition > Pages > View > Page Name -->
<a href="../b/mb.jsp?pageId=54383&relatedId={!id}"> New Product </a>

<div id="accountsList">
{!#LOOP_BEGIN.R56036}
      <div>  {!name#link} --- {!id} </div>
{!#LOOP_END.R56036}
</div>

NEW page of Child Object Code:

<script>
//GET URL PARAMETER
function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
$(document).ready(function() {
    parentId = getURLParameter('relatedId');
    $("#R56036 option[value='"+parentId+"']").attr('selected', 'selected'); 
    //REFRESH SELECT ELEMENT - FOR MOBILE
	$('#R56036').selectmenu('refresh', true);
});
</script>

How it works?

In the View page of parent I added a URL attribute "relatedId" to the link (<a ...>) and so when user redirected to the Child's New page it carry over the parent ID/value.

When the user is now in the Child's New page it can get the Parent's Value via URL parameter "relatedId" and set that to the parent lookup.

Hope this helps.

Regards,

Orchid



Posted by jsniemi79 on 13-Oct-2014 15:56

The account is now being passed correctly on the mobile version.  Thank you very much for your help on that.

I still can't seem to get the mobile section to hide when I am on Chrome via my laptop.

Not sure what I am doing wrong.

Posted by Orchid Corpin on 14-Oct-2014 12:39

That's Great!
About the show/hide of section, what chrome version are you using? This seems to be working fine in my app also run in chrome. I'll do some testing too in different browsers.

...or try to use JQuery $("div[name='Customer Notes']").hide();

Regards,
Orchid

Posted by jsniemi79 on 14-Oct-2014 12:50

I tried the JQuery code and that didn't work either.

I'm on version 

I also tried it on the latest version of IE and it still showed the customer notes.

Posted by Orchid Corpin on 14-Oct-2014 13:05

I have the same version too.

Can you take a look at the console (F12), are you getting "You are not using a mobile device!"?

Posted by Orchid Corpin on 14-Oct-2014 13:08

Do you have another "Customer Notes" section in the page?

Posted by Orchid Corpin on 14-Oct-2014 13:12

or try renaming your section if this still behave this way.

Posted by jsniemi79 on 14-Oct-2014 13:12

Nope, I only have the one Customer notes section.

I checked the console in IE and I am getting the correct message.

Posted by jsniemi79 on 14-Oct-2014 13:15

No luck on the rename or a new section.  I added the sectionID to the log and it is coming back as null.

Posted by Orchid Corpin on 14-Oct-2014 13:25

Can you check if you have spaces before or after the section name? I did get null when I add space after the section name "Customer Notes "

Posted by jsniemi79 on 14-Oct-2014 14:22

No spaces.  I tried renaming it and still had no luck. If I hard code the section ID, I still can't get the section to hide.  I tried turning the AJAX on tabs setting on and off as well and that didn't seem to matter.  When running a debugger, it looks like it is hitting that code before my tabs are even drawn.

Did you have tabs under your object in the test you ran through?

Posted by Orchid Corpin on 14-Oct-2014 14:41

I see, try to put your code inside a jquery document.ready, this code will execute after the page has loaded all components.

<script>
$(document).ready(function() {
    var sectionId;
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    	sectionId = rbf_getSectionIdByTitle("Desktop Section");
    	rbf_showOrHideSection(sectionId, false);
    	console.log('You are using a mobile device!');
    } else {
            sectionId = rbf_getSectionIdByTitle("Customer Notes");
    	rbf_showOrHideSection(sectionId, false);
    	console.log('You are NOT using a mobile device!');
    }
});
</script>

Hope this may help.

Regards,

Orchid

Posted by jsniemi79 on 14-Oct-2014 14:57

That is perfect! Thank you so much for your help on this.

This thread is closed