Alpha DevCon 2018
Results 1 to 13 of 13

Thread: Questions about the Sample App

  1. #1
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    390

    Default Questions about the Sample App

    Hopefully, many of you have had an opportunity to load up the Tablet Sample App and start working with it. The Sample App is meant to give you a launching point to build your own applications as well as serve as an educational guide. To that end, we would like to hear any questions you may have about the Sample Application.

    Post your questions in this thread or as new topics in the Beta Forum so that we and other Beta users can answer them for you.

    Thanks!

    Tablet Sample Application Overview



    Video Link: http://www.alphasoftware.com/video-library/?v=4896
    Last edited by Beta Spark; 09-14-2015 at 01:42 PM.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  2. #2
    Member
    Real Name
    Ken Carroll
    Join Date
    Nov 2012
    Location
    San Jose CA
    Posts
    27

    Default Re: Questions about the Sample App

    I would like to upload a screen shot to help to ask my question about the sample application and how I can make simple modifications such as spelling the current BreakPadRR "BrakePadRR" instead...I did this in the static source List1, but could not change it beyond that. I have a screen shot I would like to attach, but have not used this feature yet, and have not been able to do so. Thanks for any advice. Ken

  3. #3
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    390

    Default Re: Questions about the Sample App

    Quote Originally Posted by kctermite View Post
    I would like to upload a screen shot to help to ask my question about the sample application and how I can make simple modifications such as spelling the current BreakPadRR "BrakePadRR" instead...I did this in the static source List1, but could not change it beyond that. I have a screen shot I would like to attach, but have not used this feature yet, and have not been able to do so. Thanks for any advice. Ken
    Hi Ken,

    Thanks for sending your screenshot to me. I passed this along to the dev team. The error could be reproduced by opening any of the FormView controls on the sample app and clicking OK. There's a simple workaround you can use until the issue is fixed:

    1. Go to the CSS Tab in the Form View Builder
    2. Click on "CSS defined specifically for this Control" and type a space in the CSS
    3. Click on "CSS defined at the UX component level" and type a space in the CSS
    4. Click OK


    A fix will be in tomorrow's build.

    If you encounter any problems in the future, feel free to report them here on the forum. You can also send an email to tabletbeta@alphasoftware.com.

    Thanks!
    Last edited by Beta Spark; 09-21-2015 at 12:37 PM.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  4. #4
    Member
    Real Name
    Ken Carroll
    Join Date
    Nov 2012
    Location
    San Jose CA
    Posts
    27

    Default Re: Questions about the Sample App

    Thank you!

    The work-around did the trick.

    Now I am ready to try again making the database table from which to populate the List1 to verify that I know what to do to obtain the data, edit the data, save the data, and see it again. Previously, I could not even correct the spelling of BrakePadRR (sample has it as BreakPadRR which does not agree with the spelling of any of the other Brake Pads) without an error. Glad to find out this was a "bug" and that it can be controlled until such time as it is exterminated.

    Ken

  5. #5
    Member
    Real Name
    Doug Evenhouse
    Join Date
    Apr 2009
    Posts
    47

    Default Re: Questions about the Sample App

    A common requirement is to store a foreign key in a record, but present a longer form description to the user in the UI. For example, in the sample tablet app a list of states is presented as a sort of dropdown list. The "long form" string representation is shown in the list of values to select from (say 'Alabama'), but when the user selects an item, the abbreviation for the state (say 'AL') is presented in the form field.

    I would like to store the foreign key "ID" (value) in the database ('AL" in my example), but show the long form description (text - "Alabama' in my example) in both the dropdown list, and and in the form field after it is selected. In other words, I don't want the user to ever see 'AL' in the UI, but I want to save 'AL' in the database. Can you provide some guidance on how this might be done?

    Thanks.

    Doug

  6. #6
    Member
    Real Name
    Doug Evenhouse
    Join Date
    Apr 2009
    Posts
    47

    Default Re: Questions about the Sample App

    Quote Originally Posted by dougeven View Post
    I would like to store the foreign key "ID" (value) in the database ('AL" in my example), but show the long form description (text - "Alabama' in my example) in both the dropdown list, and and in the form field after it is selected. In other words, I don't want the user to ever see 'AL' in the UI, but I want to save 'AL' in the database. Can you provide some guidance on how this might be done?
    Doug
    Any help or pointers on this? Struggling a bit here. Thanks.

  7. #7
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    390

    Default Re: Questions about the Sample App

    Quote Originally Posted by dougeven View Post
    Any help or pointers on this? Struggling a bit here. Thanks.
    Hi Doug,

    Have you watched Editors: Using a Dropdown Box? I definitely recommend watching it as the example I've built uses some of the methods discussed.

    For lists of data retrieved from a database, one way you could tackle this problem is with Client-side Data Cache. In the attached example, I have setup a client side data cache item called "states" that retrieves a list of states & their corresponding codes from a database table. I have created a second client-side data cached item called "fruit" that contains a static JSON object of a list of fruit. The "states" are used to populate the dropdown box when the state field is edited while the "fruit" contains the list of data to populate the dropdown box with when the fruit field is edited.

    dropdownFromDB.png

    In the FormView, I used the "User defined editor and template settings" to add a setting that contains the name of the data cache item to retrieved. For lack of a better word, this item is called "list". For the state field, it is set to "states". For the fruit field, "fruit".

    Finally, in the "Set value in Editor" event for EDITOR_1, I added the code that retrieves the item from the data cache & populates the dropdown box.

    Items in the attached zip include a UX component and a SQL file that contains the table definition and data I used in my example. You'll need to update the Client-side Data Cache to reference the correct connection string to reference the states table.

    dropdownFromDatabase.zip

    As for displaying the value in the FormView, you can use Client-side Templating to transform the stored value to the appropriate displayed value. With the client-side data cache, you should be able to lookup the "displayed" value and show that when the FormView renders the record.

    Good Luck!
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  8. #8
    Member
    Real Name
    Ken Carroll
    Join Date
    Nov 2012
    Location
    San Jose CA
    Posts
    27

    Default Re: Questions about the Sample App

    Hi. I am saving collected information in a table I named "sample" in a MySQL database, with the fields as per the sample application, but haven't yet figured out how to save the settings of the PASS/FAIL items. Nothing, of course, gets written to the sample table; so, the items do not retain their red or green color from one use to the next. Can the PASS/FAIL (maybe 0's and 1's or T's and F's or "Yes" and "No" be saved in the table and if so, type character? tinyint? Ken

  9. #9
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    390

    Default Re: Questions about the Sample App

    Quote Originally Posted by kctermite View Post
    Hi. I am saving collected information in a table I named "sample" in a MySQL database, with the fields as per the sample application, but haven't yet figured out how to save the settings of the PASS/FAIL items. Nothing, of course, gets written to the sample table; so, the items do not retain their red or green color from one use to the next. Can the PASS/FAIL (maybe 0's and 1's or T's and F's or "Yes" and "No" be saved in the table and if so, type character? tinyint? Ken
    Yes. The Pass/Fail control returns a value - "Pass" or "Fail" - when the editor is saved. You could take this value and store it verbatim or apply a translation that returned whatever value you needed to store it in a database.

    Take a look at the "EDITORCHECKLISTITEM". In the "Set value in editor" event, you could insert code here that set the checklist item appropriately. If, for example, you wanted to store 1 for Pass and 0 for Fail:
    Code:
    var vbobj = {dialog.Object}.getControl('radiobuttons');
    vbobj.populate({choices:["Pass","Fail"]});
    
    // remove the explicit class on the ViewBox
    $rcn($(vbobj.contId),"choiceNoValue"); 
    
    if (value == 1) {
    	vbobj.setValue("Pass");
    } else if (value == 0) {
    	vbobj.setValue("Fail");
    }
    
    // defined in the JavaScript part of the radiobuttons ViewBox to set class for no-choice
    choiceHandleNull(vbobj, value);
    The if block checks the value of your item. If it's 1, the checklist item is set to "Pass". If it's 0, "Fail".

    To get the value back out, you would need to modify the Get value from editor event:
    Code:
    var vbobj = {dialog.Object}.getControl('radiobuttons');
    var r = "";
    if (vbobj.value == "Pass") {
        r = 1;
    } else if (vbobj.value == "Fail") {
        r = 0;
    }
    return r;
    If you wanted to take this an extra step, you could modify the checklist item itself to handle a different stored value from the displayed value. You would need to change the Static JSON Data to handle an array of objects rather than an array of values:
    Code:
    [
      { choice:"Pass", value:true },
      { choice:"Fail", value:false}
    ]
    You would need to do some additional coding to get this working (eg, you'll have to update the ViewBox Layout to reference the "choice" and "value" fields. You'd also need to make modifications to the code that gets and sets the value in the editor.)

    By modifying the checklist item to have a separate "stored" value from a "displayed" value, you can handle showing many different types of fields whose underlying representation can be any value. EG, you could have one field that stores True and False as 1 and 0 and another that stored it as "T" and "F" in the database. In the setup, you could use the "User defined editor and template settings" to specify the list of choices you want shown. This would let you do something like this when the editor is populated:

    Code:
    //choices is a JSON object defining the list of choices
    //to display in the checklist item
    var choices = settings["choices"];
    
    var vbobj = {dialog.Object}.getControl('radiobuttons');
    vbobj.populate(choices);
    
    // remove the explicit class on the ViewBox
    $rcn($(vbobj.contId),"choiceNoValue"); 
    
    // defined in the JavaScript part of the radiobuttons ViewBox to set class for no-choice
    choiceHandleNull(vbobj, value);
    Good luck!
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  10. #10
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    390

    Default Re: Questions about the Sample App

    Quote Originally Posted by kctermite View Post
    haven't yet figured out how to save the settings of the PASS/FAIL items
    I realize I haven't addressed this specific part of your question.

    Saving the values back to the list is handled by the FormView control. You should be able to insert a save and cancel button in the FormView layout - they're listed as predefined controls.

    Saving the data in the checklist item back to the FormView requires either that the Editor Set is configured to automatically commit the changes when the Editor is closed or that you add a button or link that the user can click to commit the data. Inside the button, you'll need to add code that looks similar to the following:
    Code:
    // get name of containing EDITOR_SET for the checklist item editor
    var edObj = {dialog.object}._EDITOR_EDITORSET['EDITORCHECKLISTITEM'];
    var es = '';
    if(typeof edObj != 'undefined') es = edObj.editorSet;
    if(typeof es == 'undefined') es = '';
    
    if(es != '') { 
    	var closeEditorAfterCommit = true;
    	{dialog.object}.editorCommit(es,closeEditorAfterCommit);
    }
    The predefined editors all include buttons for saving or resetting the editor data. I would suggest looking at the Editor-TextBox to see how you would implement both save and cancel.

    The auto commit option is available in the Properties for an Editor Set container - listed in the "Editor Set Properties" section.

    The "Get value from editor" event is used by the commit operation to save the data back to the FormView. This event should return the value to store.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  11. #11
    Member
    Real Name
    Doug Evenhouse
    Join Date
    Apr 2009
    Posts
    47

    Default Re: Questions about the Sample App

    Quote Originally Posted by Beta Spark View Post
    As for displaying the value in the FormView, you can use Client-side Templating to transform the stored value to the appropriate displayed value. With the client-side data cache, you should be able to lookup the "displayed" value and show that when the FormView renders the record.
    Thanks for this example! I think I have a handle on what you've done with client-side data cache and the dropdown list. A working example helps a lot! I'm at a loss, though, as to how to use client-side templating to transform the stored value. I think I can write the javascript necessary to look up the appropriate value to display from the data cache, but it's not clear to me how to inject this javascript into the field template. Is there a special template syntax that enables injecting javascript directly into the field template (similar to the *if conditional token)? Or is there an event on the editor or the formview somewhere that should be used? Something else?

    Thanks for your help. It's very much appreciated.

  12. #12
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    390

    Default Re: Questions about the Sample App

    Quote Originally Posted by dougeven View Post
    Thanks for this example! I think I have a handle on what you've done with client-side data cache and the dropdown list. A working example helps a lot! I'm at a loss, though, as to how to use client-side templating to transform the stored value. I think I can write the javascript necessary to look up the appropriate value to display from the data cache, but it's not clear to me how to inject this javascript into the field template. Is there a special template syntax that enables injecting javascript directly into the field template (similar to the *if conditional token)? Or is there an event on the editor or the formview somewhere that should be used? Something else?

    Thanks for your help. It's very much appreciated.
    Yes. You can use Javascript functions in templates! This is from the release notes. You can also find a copy of the template syntax documentation inside the Template Tester.
    Functions - {@JavascriptFunctionName}

    Your template can include calls to Javascript functions that compute values based on data in the current 'row'. To call a function you use the {@JavascriptFunctionName} placeholder in your template, where JavascriptFunctionName is the name of the Javascript function that you want to call.

    The value returned by the function is emitted for the placeholder.

    The Javascript function takes a single parameter, data, which allows you to reference data from the current row.

    Consider the following simple data object:
    Code:
    {firstname: 'John', lastname: 'Smith'}
    And the following template:
    Code:
    Hello {@fullname}
    The fullname Javascript function might be defined as:
    Code:
    function fullname(data) {
    
        return data.firstname + ' ' + data.lastname.toUpperCase();
    
    }
    The template result for the above data, template and Javascript function will be:
    Code:
    Hello John SMITH
    Note: if you're using the client side data cache, be aware that retrieving data out of the data cache is an asynchronous operation. When the data is retrieved using the Action JavaScript (I copied the action Javascript implementation so I could use it in the editor setup) it performs a callback after the operation completes (passes or fails.) The template function will want you to return a value. So, you'll either have to preemptively fetch the data for use in the templates or design your template such that you can use a method like $svs() to set the value after the fact.

    This is just a way to do this operation. You could also fetch data server-side using xbasic when the UX component is first loaded and store it in state variables or include an extra field in your List control for the "display" value for use in the FormView.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  13. #13
    Member
    Real Name
    Doug Evenhouse
    Join Date
    Apr 2009
    Posts
    47

    Default Re: Questions about the Sample App

    Quote Originally Posted by Beta Spark View Post
    Yes. You can use Javascript functions in templates!
    Thank you! I've got something that seems to be working for me. In the meantime I'm encountering another issue that may possibly be a bug introduced in the beta.

    When I run the sample app in Working Preview I can no longer navigate to any of the panels from the first one. The "DETAILS" panel is shown and can be navigated successfully, but when an attempt is made to navigate to another panel (SECTION 1, SECTION 2, NOTES) nothing happens. An error is logged to the console. See attached screenshot for the text of the error message that appears there. I noticed this last night and downloaded both the latest build of AA and re-downloaded the sample app this morning to be sure this issue isn't related to some change I made.

    Please let me know if I can provide further information that would be helpful in tracking this issue down.

    Thanks.
    AATablet_Sample_Error.PNG

Similar Threads

  1. stockchart app sample download
    By WindForce in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 07-30-2013, 09:34 AM
  2. Notes sample app
    By GTGeek88 in forum Mobile & Browser Applications
    Replies: 12
    Last Post: 05-29-2013, 10:24 AM
  3. Sample App?
    By StevenMcLean in forum Application Server Version 10 - Web/Browser Applications
    Replies: 12
    Last Post: 06-15-2010, 08:47 AM
  4. 3 new sample web app pages
    By Lenny Forziati in forum Web Application Server v6
    Replies: 13
    Last Post: 11-12-2004, 10:22 AM
  5. 3 new sample web app pages
    By Lenny Forziati in forum Alpha Five Version 6
    Replies: 2
    Last Post: 10-17-2004, 12:14 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •