{"id":367,"date":"2023-02-24T01:35:00","date_gmt":"2023-02-24T01:35:00","guid":{"rendered":"https:\/\/automatethemundane.com\/index.php\/2023\/02\/24\/expanding-model-driven-apps-with-code-hiding-tabs-based-on-value\/"},"modified":"2023-07-04T14:33:36","modified_gmt":"2023-07-04T14:33:36","slug":"expanding-model-driven-apps-with-code-hiding-tabs-based-on-value","status":"publish","type":"post","link":"https:\/\/automatethemundane.com\/index.php\/2023\/02\/24\/expanding-model-driven-apps-with-code-hiding-tabs-based-on-value\/","title":{"rendered":"Expanding Model Driven apps with code- Hiding Tabs based on value"},"content":{"rendered":"\n

2\/24\/2023<\/p>\n\n\n\n

\n\n\n\n

The Why<\/h1>\n\n\n\n

Using Java code in a Model Driven app offers several benefits. One major advantage is the ability to extend the app's functionality beyond what is available out-of-the-box. Java code can be used to create custom components, integrate with other systems, and perform complex calculations and data processing tasks. Additionally, Java is a widely-used language with a large community of developers, which means that there are many resources available for those looking to learn or troubleshoot issues.<\/p>\n\n\n\n

In this first part, we will expand our model-driven app to hide unnecessary tabs. During the design phase Building a Model Driven App Part 1-Design<\/a>, we determined that requests below or equal to $100 did not require higher approval. Thus, we will hide the Higher Approval tab when the cost is less than or equal to $100.<\/p>\n\n\n\n

The How<\/h1>\n\n\n\n

Step one will be to write out some base JavaScript, then add in the actual fields. <\/p>\n\n\n\n

function FUNCTIONNAME(executionContext) {\n    var formContext = executionContext.getFormContext(); \/\/ get formContext\n    if(formContext.getAttribute(\"columnname\").getValue() = \"value\") {\n        \/\/if the value dose not match set the visibilty to false\n        formContext.ui.tabs.get(\"tabname\").setVisible(false);\n    }\n    else {\n        \/\/if the value dose match set the visibilty to true\n        formContext.ui.tabs.get(\"tabname\").setVisible(true);\n    }\n }<\/code><\/pre>\n\n\n\n
The next step will be to set the function name, get the column name, the value we want, and the tab name. <\/p>\n\n\n\n
Function Name<\/h2>\n\n\n\n
The name for this function will be \u201cCost\u201d<\/p>\n\n\n\n
function Cost(executionContext) {\n    var formContext = executionContext.getFormContext(); \/\/ get formContext<\/code><\/pre>\n\n\n\n
Column Name<\/h2>\n\n\n\n
    \n
  1. Select the Table<\/li>\n\n\n\n
  2. Select Columns<\/li>\n\n\n\n
  3. Select the Cost Column<\/li>\n\n\n\n
  4. Copy the Logical Name<\/li>\n<\/ol>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    if(formContext.getAttribute(\"eddev_cost\")<\/code><\/pre>\n\n\n\n
    Value<\/h2>\n\n\n\n
    The Value we will be looking up is \u2264 $100<\/p>\n\n\n\n
    .getValue() <= 100)<\/code><\/pre>\n\n\n\n
    Tab Name<\/h2>\n\n\n\n
    From the form find the tab to be hidden and copy its Name. Paste the Name into the code.<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    if (formContext.getAttribute(\"eddev_cost\").getValue() <= 100) {\n        \/\/if the value dose not match set the visibilty to false\n        formContext.ui.tabs.get(\"tab_higherapproval\").setVisible(false);\n    }\n    else {\n        \/\/if the value dose match set the visibilty to true\n        formContext.ui.tabs.get(\"tab_higherapproval\").setVisible(true);<\/code><\/pre>\n\n\n\n
    Entire code Block<\/h2>\n\n\n\n
    function Cost(executionContext) {\n    var formContext = executionContext.getFormContext(); \/\/ get formContext\n    if (formContext.getAttribute(\"eddev_cost\").getValue() <= 100) {\n        \/\/if the value dose not match set the visibilty to false\n        formContext.ui.tabs.get(\"tab_higherapproval\").setVisible(false);\n    }\n    else {\n        \/\/if the value dose match set the visibilty to true\n        formContext.ui.tabs.get(\"tab_higherapproval\").setVisible(true);\n    }\n }<\/code><\/pre>\n\n\n\n
    Save the code block with a .js as its extension. <\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Apply the code<\/h2>\n\n\n\n
    From the solutions menu add a new web resource<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Upload the file and give it a Display name along with a Name<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Back on the Form Select Add Library<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Add the web resource from above. <\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    From the main form Select Events, On Load, Event Handler. <\/p>\n\n\n\n
    Enter in the Function name declared in the code.<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    From the Input Tab Select Cost, Select Events, Event Handler, enter in the function name declared above. <\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Select the Higher Approval Tab and select Hide. This is done to ensure that the tab is only seen when it is needed to. <\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Save and Publish all changes.<\/p>\n\n\n\n
    Testing<\/h2>\n\n\n\n