Iniciar uma conversa

Criando um menu dinâmico

Neste tutorial veremos como criar um menu com links dinâmicos, cadastrados em uma tabela.

1 - Criando a tabela:

  • O primeiro passo é criar a tabela que abrigará os valores dos itens do menu, para o exemplo estamos utilizando o banco de dados MySQL. Veja a estrutura da tabela abaixo:

TABELA: menu_dinamico
CAMPOS: id, item_mestre, descricao, link, numero_item.

Obs: O campo "item_mestre" deve aceitar valores nulos.

2 - Criando o projeto e o formulário para inserção:

  • Em seguida, crie um projeto no Scriptcase e conecte com a base de dados, onde a tabela criada anteriormente está:

  • Agora crie uma aplicação do tipo formulário(Múltiplos registros) usando a tabela "menu_dinamico".

3 - Configurando o formulário:

  • Vá até as configurações do campo item_mestre e na opção "Tipo do Dado" escolha "Select":

  • Na opção "Lookup de Edição -> Usar Título" escolha "Sim" e insira o título "Sem item_mestre" no input exibido ao lado:

  • Ainda no bloco "Lookup de Edição", utilize o seguinte select na opção "Comando Select":

SELECT id, descricao
FROM menu_dinamico
WHERE id <> {id}
ORDER BY descricao

Obs:Este campo será usado para criarmos sub-itens de menu.

  • A seguir, crie um evento ajax, do tipo onChange, no campo item_mestre e insira o seguinte código:

{numero_item} = {item_mestre};

  • Use também o evento onLoadRecord, do formulário, para preencher o campo numero_item automáticamente, como na imagem abaixo:

CÓDIGO:

$sql = "SELECT item_mestre, descricao FROM menu_dinamico WHERE id = {id}";
sc_lookup(ds, $sql);

if(empty({ds[0][0]}))
{
    {numero_item} = 0;
}

  • Para finalizar a criação do form, crie um método javascript, através do menu "Programação -> Métodos Javascript", com o nome reload. Este método será responsável por recarregar o menu sempre que for adicionado, atualizado ou removido algum item/sub-item do menu. Nele utilize o seguinte código:

window.parent.location.href = '../app_menu/app_menu.php';

  • Faça a chamada do método nos seguintes eventos: onAfterInsert, onAfterUpate e onAfterDelete. Para isso utilize a macro sc_ajax_javascript, como abaixo:

sc_ajax_javascript("reload");

4 - Criando a apliação menu:

  • Crie a aplicação menu com o nome "app_menu" e em seguida adicione o seguinte código em seu evento onLoad:

CÓDIGO:

sc_appmenu_reset("app_menu");
sc_appmenu_create("app_menu");

$sql = "SELECT id, item_mestre, descricao, link FROM menu_dinamico ORDER BY item_mestre, numero_item";
sc_lookup(ds, $sql);

foreach({ds} as $arr_item_menu)
{
    $item_menu = "item_".$arr_item_menu[0];
   
    if($arr_item_menu[1] == 0)
    {
        $id_master = "";
    }else{
        $id_master = "item_".$arr_item_menu[1];
    }
   
    sc_appmenu_add_item("app_menu", $item_menu, $id_master, $arr_item_menu[2], $arr_item_menu[3], "", "", "", "");
}

  • Escolha uma conexão para o menu, através da opção "Aplicação -> Configuração ->Conexão"

5 - Executando:

  • Execute o formulário criado e insira os itens que desejar:

Escolher arquivos ou arraste e solte arquivos
Esse artigo foi útil?
Sim
Não
  1. Caio Guerra (Migrated deleted Agent)

  2. Publicado
  3. Atualizado

Comentários